ちょいテクHTMLとCSS(4) CSS変数で可変幅指定

技術情報

知ってると便利なHTMLやCSSの紹介コーナー。 今回は、定型処理の手間がぐっと減る「CSS変数」の使い方です。

CSS変数を利用して<span>の幅を可変指定

前回の「幅付きspanで多段組み」は、異なるspan幅が必要になるたびCSSを書き換える必要がありました。 あまりにも不便です。そこで今回は「CSS変数」を導入します。

CSS変数は、またの名を「CSSカスタムプロパティ」とも呼びます。詳細は次のサイトなどをご覧ください。

CSS変数は名前の前に「 」が付きます。ここでは「 w」という変数でspanの幅を指定します。 変数値の設定はHTML側のstyle属性でおこないます。その値はCSS側のvar()関数で読み出せます。

<style>
.varcol span { float: left; width: var(--w); }
</style>

<p class="varcol" style="--w:100px;">
<span>| 100px</span>| 幅100pxのspanです。<br>
</p>

<p class="varcol">
<span style="--w:200px;">| 200px</span>| span自体でもCSS変数が設定可。<br>
</p>

実際に表示すると次のようになります。

| 100px| 幅100pxのspanです。

| 200px| span自体でもCSS変数が設定可。

CSS変数はそれを利用する本体(ここではspan)か、または外側の要素のどこかで設定します。 今回の場合は外側の<p>タグで設定する例と、<span>タグ自体で設定する例を示しました。

コメント

タイトルとURLをコピーしました