for the win｜フォーザウィン

【コーディング初心者向け】知っておくと便利！CSS関数まとめ

WEB関連
shutterstock_1208037415_0000

Web制作においてバックエンドでの実行処理を考えるプログラミングに対して、サイトの「見え方」や「見た目」の部分に責任を持つことが多いのがコーディングです。
コーディングはコードによってページを組み立てていくイメージで、そのように呼ばれています。
コーディングの中でもスタイルシートを使ってページをデザインする技術は年々上がってきており、通常CSSはプロパティと値をセットで指定していきますが、「CSS関数」と呼ばれる便利な関数も用意されていることはご存知でしょうか？

今回はこの便利な「CSS関数」について解説します。もくじ

  1. calc()
  2. counter()
  3. attr()
  4. まとめ

◆calc()

calcというのは英語で「演算」という意味で、calc関数を使えばカッコ内の値を計算することができます。また、％やvh、pxなどの異なる単位も計算対象になります。
基本的な記述方法は下記のようになります。

/* 引き算の場合 */
.sample01 {
　　width: calc(100% - 50px); 
}

/* 割り算の場合 */
.sample02 {
　　width: calc(400px / 2); 
}

◆counter()

counterとは要素を数えることができる関数のことで、リスト要素などに活用できます。

<ul>
　　<li>ボウルに卵と小麦粉を入れる</li>
　　<li>混ぜ合わせて型に流し込む</li>
　　<li>オーブンで15分焼く</li>
</ul>

このようなHTMLに対して、

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

上記のようにスタイルシートを適用してみると、

　作業1. ボウルに卵と小麦粉を入れる
　作業2. 混ぜ合わせて型に流し込む
　作業3. オーブンで15分焼く
このように表示することができます。

◆attr()

attrとは、要素内の値を展開するための関数になります。
例えば複数の要素に異なるcontentを設定したい時は、

<li data-text=“1つ目のテキスト”>これはサンプルです</li>
<li data-text=“2つ目のテキスト”>これはサンプルです</li>

このようなHTMLに対して、

li:after
　　content: attr(data-text) "";
}

上記のようにスタイルシートを記述すると、一つのCSSにまとめることができ大変便利です。

◆まとめ

今回ご紹介したCSS関数以外にも様々なCSS関数があります。
CSS関数をうまく使うことで、より創造的にCSSを操作することが可能になります。

ネット上でも様々なCSS関数の情報も得られますので、ぜひ自分に必要なCSS関数を学び、取り入れみてください。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞

© 2024 forthewin.co,.ltd.