CSSでは変数や関数は使えなかった。

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

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

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

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

いまではCSSにも、プログラミングのプロパティが着々と増えている。

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

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

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

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

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

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

例）

色やフォントスタイルを変数に格納できる。

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()関数の使い方。

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()関数の場合。きっちりと三等分にできるようになった。

（変数は、前述の疑似クラス「:root」の記述をそのまま活用できる。）

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

結果。

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;
}

結果。

関連：counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。

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);
}

結果。

関数。

デザイン脳の人には、「関数」という概念は、なかなか取っ付きにくいと思われる。

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

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

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

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