CSSの変数と関数。覚えておくと便利なCSSプログラミング。 / メモ / いがわ

CSSの変数と関数。覚えておくと便利なCSSプログラミング。

2023.01.26 2024.03.20更新。

Contents - 目次

1 CSSでも変数や関数が使えるように。
2 CSS変数。カスタムプロパティの使い方。
3 calc()関数の使い方。
4 counter()関数の使い方。
5 attr()関数の使い方。
6 CSS 関連メモ。

CSSでも変数や関数が使えるように。

CSS変数やCSS関数によるプログラミング。

CSSでプログラミング。

CSSの生みの親であるHåkon Wium Lie（ホーコン・ウィウム・リー）氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。

そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング的な要素は取り入れられなかった。

しかしCSSが登場してすでに20年以上、2024年には30周年となる。

その間にWebサイトやデバイスの進化は進み、今ではプログラミングの機能は欠かせないものとなっている。

CSSの変数と関数。CSSプログラミング。

CSS変数。カスタムプロパティの使い方。

カスタムプロパティによる変数。

CSS変数。

プログラミングの世界ではお馴染みの「変数」がCSSで使えるようになっている。

基本的に:rootセレクタへ指定をする。後で変更したくなった場合、ここの変数の値だけを変えれば良く管理もしやすい。

変数名は「–」のハイフン２つから始まる半角英数字で、任意で決められる。

（※idやクラス名と同様に「-」（ハイフン）や「_」（アンダースコア）以外の記号や、数字から始まる名前は使えない。）

–white: #fff;
–sans_serif: “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, sans-serif

例１）

色やフォントスタイルを変数（カスタムプロパティ）へ格納し、var()関数で呼び出す。

HTML

<div id="example">
 <p>テキスト</p>
</div><!--example-->

CSS

:root {
 --white: #fff;
 --black: #000;
 --orange: #f15d00;
 --sans_serif: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
 --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
}
#example {
 background: var(--orange);
}
#example p {
 color: var(--white);
 font-family: var(--sans_serif);
 text-align: center;
}

結果。

テキスト

calc()関数の使い方。

calc()による、四則演算。

CSSの「calc」関数で計算、四則演算ができる。（記号はすべて半角。）

足し算は「 + 」（プラス）
引き算は「 – 」（マイナス）
掛け算は「 * 」（アスタリスク）
割り算は「 / 」（スラッシュ）

例２）

３カラムが簡単かつ、きっちりとできる。

HTML

<div id="example_02">
 <p>テキスト</p>
 <p>テキスト</p>
 <p>テキスト</p>
</div><!--example_02-->

CSS

従来の場合。下記のように三等分に指定しづらかった。

#example_02 p {
 width: 33%;
}
#example_02 p:last-child {
 width: 34%;
}

CSS

calc()関数の場合。簡単に三等分に指定できるようになった。

#example_02 {
 display: flex;
}
#example_02 p {
 width: calc(100% / 3);
 background: var(--orange);
 color: var(--white);
 text-align: center;
}

（※色は例１の:rootから取得。）

結果。

テキスト

counter()関数の使い方。

counter()による、ナンバリング（番号付け）。

CSSでナンバリングができる「counter」関数。

olでのナンバリングと違い、擬似要素のbeforeやafterを使い、contentプロパティで文字列を付けたりすることができる。

少々ややこしいが、概念を覚えて、後はコピペで慣れればなんとかなる。

親要素にcounter-resetを指定し、名前を付けて初期値を設定する。（「0」でリセット。）
子要素に擬似要素（::before or ::after）を付け、counter-incrementでcounter-resetの名前と整数値を指定する。
counter-incrementの値は、「1」なら+1づつ増える。（「-1」なら-1づつ減る。）

例３）

テキストの前に、自動的にナンバリングされる「Chapter」と「.」を付ける。

HTML

<div id="example_03">
 <p>テキスト</p>
 <p>テキスト</p>
 <p>テキスト</p>
</div><!--example_03-->

CSS

contentプロパティで、文字列（Chapter）と、番号、ドット（.）を自動付与できる。

文字列と番号は、半角スペースで空ける。

#example_03 {
 counter-reset: number 0;
}
#example_03 p {
 background: var(--orange);
 padding: 5px 10px;
 color: var(--white);
}
#example_03 p::before {
 counter-increment: number 1;
 content: "Chapter " counter(number) ".";
 padding-right: 5px;
 font-weight: bold;
}

（※色は例１の:rootから取得。）

結果。

テキスト

attr()関数の使い方。

「attr」関数は、自分で決めたデータ属性、「data-」で始まる要素内の値を、contentプロパティで表示させることができる。

例４）

テキストの後に、自動的に文字列を付ける。

（※矢印は特殊文字を使用。）

HTML

<div id="example_04">
 <a href="/" date-link=" 詳しくはこちら&#8658;">テキスト</a>
 <a href="/" date-link=" 詳しくはこちら&#8658;">テキスト</a>
 <a href="/" date-link=" 詳しくはこちら&#8658;">テキスト</a>
</div><!--example_04-->

CSS

今回の例は::after擬似要素だけでも同じことができるが、attr()関数を使うとテキストの変更・修正がHTML側だけで可能となる。

#example_04 a {
 display: block;
 background: var(--orange);
 padding: 5px 10px;
 color: var(--white);
 transition: all 0.3s ease 0s;
}
#example_04 a:hover {
 opacity: 0.7;
 cursor: pointer;
}
#example_04 a::after {
 content: attr(date-link);
}

（※色は例１の:rootから取得。）

結果。

テキスト
テキスト
テキスト

プログラミングの関数。

関数は、処理を自動化するためのコード。

デザイナーには、「関数」という概念は、なかなか取っ付きにくい。

よく、「自動販売機」に例えられるように、「自動化するためのコード」なので、作るまでは一仕事となる。

逆に考えると、作ってしまえば後が楽になる。

Illustratorのアピアランス、Photoshopのレイヤースタイルのような。

イラレで例えると「アピアランス」、フォトショでは「レイヤースタイル」のように、一度作ってしまえば使い回しがきくので、便利なものとなる。

CSSの変数と関数。覚えておくと便利なCSSプログラミング。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。