この章では、CSS の応用的な使い方について学びます。前編では、カスタムプロパティとアニメーションについて紹介します。これらの機能を使いこなせば、より効率的で表現力豊かなコーディングができるようになります。
1. カスタムプロパティ（CSS 変数）で効率化
カスタムプロパティとは、CSS の値を格納できる変数のことです。カスタムプロパティを使うと、値を一元管理できるため、コードの保守性や可読性が向上します。
-- から始まる変数名
カスタムプロパティは、-- で始まる名前で定義します。値には、色、サイズ、フォント名など、あらゆる CSS の値を指定できます。
css
:root {
--main-color: #0077CC;
--base-font-size: 16px;
--base-font-family: Arial, sans-serif;
}:root は、HTML のルート要素（<html>）を表す擬似クラスです。:root にカスタムプロパティを定義することで、スタイルシート全体でその変数を使うことができるようになります。
var() 関数で変数を使う
カスタムプロパティの値を使うには、var() 関数を使います。
css
h1 {
color: var(--main-color);
font-size: var(--base-font-size);
font-family: var(--base-font-family);
}
.button {
background-color: var(--main-color);
font-size: var(--base-font-size);
font-family: var(--base-font-family);
}この例では、<h1> と .button のスタイルに、それぞれカスタムプロパティの値を適用しています。
使い回しで楽々！
カスタムプロパティの最大のメリットは、値を一元管理できることです。例えば、サイトのメインカラーを変更したい場合、カスタムプロパティの値を変更するだけで、その色を使っているすべての要素にスタイルが反映されます。
css
:root {
/* メインカラーを青から赤に変更 */
--main-color: #CC0000;
}もしカスタムプロパティを使っていなかったら、<h1> や .button など、すべての箇所のカラーコードを変更しなければなりません。カスタムプロパティを使えば、そのような手間を省くことができ、修正漏れなどのミスも防げます。
2. アニメーションで動きをつけよう
CSS アニメーションを使うと、要素の色やサイズ、位置などを滑らかに変化させることができます。アニメーションは、ウェブサイトに動きを加え、ユーザーエクスペリエンスを向上させるために効果的です。
transition でなめらかに変化
transition プロパティを使うと、要素のスタイルが変化したときに、その変化をアニメーションさせることができます。
css
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 0.5s ease-in-out;
}
.box:hover {
width: 200px;
}この例では、.box に transition: width 0.5s ease-in-out; を指定しています。これは、width プロパティの値が変化したときに、0.5 秒かけて変化をアニメーションさせるという意味です。ease-in-out は、アニメーションの変化の仕方（イージング）を指定しています。
.box:hover は、.box にマウスカーソルが乗ったときのスタイルを指定しています。ここでは、width を 200px に変更しているので、.box にマウスを乗せると、幅が 0.5 秒かけて 200px に変化します。
animation で複雑な動きを実現
animation プロパティを使うと、より複雑なアニメーションを定義することができます。animation プロパティでは、キーフレームを使ってアニメーションの開始から終了までの変化を指定します。
css
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s ease-in-out infinite alternate;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(50px);
}
}この例では、.box に animation: move 2s ease-in-out infinite alternate; を指定しています。これは、move という名前のキーフレームアニメーションを 2 秒間隔で実行し、ease-in-out のイージングを適用し、無限に (infinite) 往復 (alternate) させるという意味です。
@keyframes move で、move アニメーションのキーフレームを定義しています。キーフレームでは、アニメーションの進行状況をパーセンテージで指定し、その時点でのスタイルを記述します。この例では、0%（開始時）に translateX(0)（移動なし）、50%（中間）に translateX(100px)（右に 100px 移動）、100%（終了時）に translateX(50px)（右に 50px 移動）を指定しています。
キーフレームって何？
キーフレームとは、アニメーションの途中の状態を定義したものです。@keyframes ルールを使って、キーフレームに名前を付けて定義します。
css
@keyframes animation-name {
from {
/* 開始時のスタイル */
}
to {
/* 終了時のスタイル */
}
}
@keyframes animation-name {
0% {
/* 開始時のスタイル */
}
50% {
/* 途中のスタイル */
}
100% {
/* 終了時のスタイル */
}
}from と to は、それぞれアニメーションの開始時（0%）と終了時（100%）を表します。0% から 100% の間の任意のパーセンテージで、途中の状態を細かく指定することもできます。