便利なCSSテクニック

Last updated at 2018-12-17Posted at 2018-12-15

要素を数えて番号をふる

##counter()
counter関数は要素を数えることができるもので、例えばリスト要素などで効力を発揮します。

html

<ol>
　　<li>池袋で山手線に乗る</li>
　　<li>渋谷で東急東横線に乗り換え</li>
　　<li>自由が丘で下車する</li>
</ol>

スタイルシートを指定していなければ、以下のように出力されます。

1. 池袋で山手線に乗る
2. 渋谷で東急東横線に乗り換え
3. 自由が丘で下車する

以下のようなスタイルシートを適用してみましょう。

css

body {
　　counter-reset: i;
}
li:before {
　　counter-increment: i;
　　content: “手順” counter(i) “：”;
}

すると、以下のようになります。

　手順1. 池袋で山手線に乗る
　手順2. 渋谷で東急東横線に乗り換え
　手順3. 自由が丘で下車する

#要素内の値を展開する
##attr()

attr関数は、要素内の値を展開するための関数です。
HTML5では、「data-」で始まるカスタム属性が使用できるので、attr関数はカスタム属性と一緒に用いられることも多いようです。

html

<li data-label="ToDo:">池袋で山手線に乗る</li>

css

li:before {
　　content: attr(data-label);
}

ToDo: 池袋で山手線に乗る

#要素の最小値と最大値を指定
##minmax()
minmax関数は値に数字やキーワードを使って、要素の最小値と最大値を指定していきます。
CSSグリッドレイアウトと一緒に用いることで、簡単な CSSで高度なレスポンシブデザイン対応のレイアウトを作成することができます。

minmax(min, max)

css

.grid {
　　display: grid;
　　grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}