
CSSの変数と関数。覚えておくと便利なCSSプログラミング。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSでは変数や関数は使えなかった。
CSSの生みの親であるHåkon Wium Lie(ホーコン・ウィウム・リー)氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。
そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング的な要素は取り入れられなかった。
しかしCSSが登場してすでに20年以上、来年には30周年となる。
その間にWebサイトやデバイスの進化は進み、今ではプログラミングの機能は欠かせないものとなっている。
いまではCSSにも、プログラミングのプロパティが着々と増えている。
CSS変数。カスタムプロパティの使い方。
プログラミングの世界ではお馴染みの「変数」がCSSで使えるようになっている。
基本的に:rootセレクタへ指定をする。後で変更したくなった場合、ここの変数の値だけを変えれば良く管理もしやすい。
変数名は「–」のハイフン2つから始まる半角英数字で、基本的に任意で決められる。
(※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」関数で計算、四則演算ができる。
- 足し算は「 + 」
- 引き算は「 – 」
- 掛け算は「 * 」
- 割り算は「 / 」
例)
3カラムが簡単かつ、きっちりとできる。
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=" 詳しくはこちら⇒">テキスト</a>
<a href="/" date-link=" 詳しくはこちら⇒">テキスト</a>
<a href="/" date-link=" 詳しくはこちら⇒">テキスト</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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。