Zenn
🛀

style属性 × カスタムプロパティの実用例

2024/03/22に公開
CSS
HTML
tech

HTMLからスタイルを指定する方法としてstyle属性があります。
今回はstyle属性とカスタムプロパティを使用してCSSファイルを編集することなく、HTML内で直接スタイルのカスタマイズする例を紹介します。

要素ごとにtransition-delayの値を変える

各<p>要素のstyle属性に--delayの異なる遅延時間を設定します。

index.html
<p　style='--delay: 0.3s;'>テキスト<p>
<p　style='--delay: 0.6s;'>テキスト<p>

transitionプロパティには、透明度を変化させるトランジション効果を指定しており、これがtransition-delayによって遅延されます。

style.css
p　{
  transition: opacity .3s ease;
  transition-delay: var(--delay, 0);
}

HTMLファイル内で直接、要素ごとに異なるアニメーションの遅延を設定することが可能になります。

HTMLで背景画像を設定する

<section>要素のstyle属性に--background-imageを指定します。

index.html
<section　style='--background-image: url('assets/image/background.jpg');'></section>
style.css
section　{
  background: var(--background-image) no-repeat　0 0 / cover;
}

HTMLファイル内で直接、背景画像が指定できるのでサイトのメンテナンスが容易になります。

縦並びでのアイテム配置


縦並びで折り返すレイアウトはcolumn-countで実装できますが、横のアイテムと高さを揃えたい場合はグリッドレイアウトを選択する必要があります。

<ol>要素をグリッドレイアウトに配置しその行数を動的に指定することで実装できます。

index.html
<ol style='--grid-rows: 3;'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
style.css
ol　{
    display: grid;
    grid-template-rows: repeat(var(--grid-rows, 1), auto);
    grid-auto-flow: column;
}

JavasSriptで計算することで--grid-rowsの値を自動で算出できます。

script.js
document.addEventListener('DOMContentLoaded', function() {
    const ol = document.querySelector('ol');
    const itemsCount = ol.querySelectorAll('li').length;

    // 要素の数の半分（切り上げ）を計算
    const gridRows = Math.ceil(itemsCount / 2);

    ol.style.setProperty('--grid-rows', gridRows.toString());
});

動的なグラフを実装


データの可視化やプログレスバーの表示などで使える動的なグラフを実装できます。

--rangeにグラフの進行状況の数値を設定します。

index.html
<div class='graph' style='--range:70;'>
    <div class='inner'>70%</div>
</div>
<div class='graph' style='--range:50;'>
    <div class='inner'>50%</div>
</div>

.innerで--rangeの値に基づいて幅を計算します。

style.css
.graph {
    width: 100%;
    height: 10px;
    background-color: #f5f5f5;
}
.inner {
    width: calc(var(--range) / 100 * 100%);
    height: 100%;
    background-color: tomato;
}

カスタムプロパティを使用することでスタイルシートの外部から容易に値を変更できるようになり、スタイルシート内で値が変更される可能性があることを示すこともできます。
間違いや他に有用な方法があればご教授いただけると幸いです。

Discussion