css before/after 画像

CSS3擬似要素before/after活用術：純CSSで美しいアイコンを作成

近年、WebデザインにおいてCSSの重要性はますます高まっています。特に、CSS3から導入された擬似要素`:before`と`:after`は、HTMLの構造を変更することなく、要素の前後にコンテンツを挿入できるため、装飾やレイアウトの自由度を飛躍的に向上させてくれます。

本記事では、`:before`と`:after`擬似要素に`content`、`border`、`transform`などのプロパティを組み合わせることで、画像を一切使用せずに、美しく、実用的なアイコンをCSSだけで作成する方法を解説します。具体的なコード例も交えながら、その仕組みと活用方法を詳しく見ていきましょう。

1. 擬似要素before/afterとは

`:before`と`:after`は、要素の前後にコンテンツを挿入することができるCSSの擬似要素です。これらは、HTMLの構造に影響を与えることなく、装飾やレイアウトを実現する際に非常に役立ちます。

1.1. 基本的な使い方

`:before`擬似要素は要素のコンテンツの前に、`:after`擬似要素は要素のコンテンツの後に、それぞれコンテンツを挿入します。これらの擬似要素を使用するには、以下の点に注意する必要があります。

`content`プロパティを指定する必要があること
必ず親要素に`display`プロパティを設定する必要があること（例：`display: block;`）

1.2. contentプロパティ

`content`プロパティは、`:before`および`:after`擬似要素に挿入するコンテンツを指定するために使用します。テキスト文字列、画像、または生成されたコンテンツを指定することができます。


.example::before {
  content: "Before";
}

.example::after {
  content: "After";
}

2. borderプロパティで基本図形を描画

CSSの`border`プロパティは、要素の境界線を設定するために使用されます。`:before`や`:after`擬似要素と組み合わせることで、三角形、円形、正方形などの基本図形を表現することができます。

2.1. 三角形の作成

三角形を作成するには、`border`プロパティで異なる色の境界線を設定し、`width`と`height`プロパティで要素のサイズを調整します。


.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

2.2. 円形や正方形の作成

円形や正方形を作成するには、`width`と`height`プロパティで要素のサイズを正方形に設定し、`border-radius`プロパティで角を丸めます。円形の場合は`border-radius`の値を50%に設定します。


.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

.square {
  width: 100px;
  height: 100px;
  background-color: red;
}

3. transformプロパティで図形を変形

`transform`プロパティは、要素を回転、移動、拡大縮小など、さまざまな方法で変形するために使用されます。`:before`や`:after`擬似要素に適用することで、より複雑な図形を作成したり、アニメーション効果を加えたりすることができます。

3.1. 回転（rotate）

`rotate()`関数は、要素を指定した角度だけ回転させます。角度は度数（deg）で指定します。


.rotated-element {
  transform: rotate(45deg);
}

3.2. 移動（translate）

`translate()`関数は、要素を水平方向と垂直方向に移動させます。移動量はピクセル（px）やパーセント（%）で指定します。


.translated-element {
  transform: translate(50px, 100px);
}

3.3. 拡大縮小（scale）

`scale()`関数は、要素を拡大縮小します。倍率を数値で指定します。1より大きい値は拡大、1未満の値は縮小を表します。


.scaled-element {
  transform: scale(1.5);
}

4. 实例演示：制作精美图标

ここでは、具体的なアイコンを例に、`:before`、`:after`、`border`、`transform`などのプロパティを組み合わせてどのように実現するかを詳しく解説します。

4.1. ハートマーク


.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

4.2. 矢印


.arrow {
  position: relative;
  width: 100px;
  height: 50px;
}

.arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 100%;
  border: solid transparent;
  border-width: 15px 15px 0 0;
  border-right-color: black;
  transform: translateY(-50%);
}

4.3. 検索アイコン


.search-icon {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid black;
}

.search-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 2px;
  background-color: black;
  transform: translateY(-50%) rotate(-45deg);
}

5. まとめ

本記事では、CSS3の擬似要素`:before`と`:after`を活用して、画像を使用せずに美しいアイコンを作成する方法を解説しました。`content`、`border`、`transform`などのプロパティを組み合わせることで、多種多様な形状やエフェクトを実現できます。

`:before`と`:after`擬似要素を利用するメリットは以下の点が挙げられます。

画像を減らすことでページの読み込み速度を向上させることができる。
CSSだけでスタイルを制御できるため、メンテナンスや変更が容易になる。
ベクター画像のように、解像度に依存せずに美しく表示することができる。

CSSの擬似要素は、Webデザインの可能性を広げる強力なツールです。今回紹介したテクニックを参考に、ぜひご自身のWebサイトでも活用してみてください。