HTMLの「おまけ」を魔法のように操る！`::before`と`::after`でデザインを格上げしよう
こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めたばかりの頃、「ここにもう一つ小さなアイコンを置きたいな」とか「文字の横にちょっとした飾りを付けたいな」と思ったことはありませんか？
普通なら「新しく``タグを追加して、そこに画像を入れるか…」と考えがちですが、実はHTMLの構造を汚さずに、CSSだけで「おまけ」を付け足す魔法のようなテクニックがあるんです。それが、今回ご紹介する疑似要素（ぎじようそ）、`::before`と`::after`です。
これを使えるようになると、HTMLはスッキリしたまま、デザインの表現力がグッと広がりますよ。さあ、一緒に見ていきましょう！
—
`::before`と`::after`ってなに？
料理に例えるなら、「トッピング」のような存在です。
HTMLという「お皿の上のお料理（メインコンテンツ）」には手を触れずに、CSSという魔法で「パセリを添える（::before）」とか「仕上げのソースをかける（::after）」といった装飾ができるイメージですね。
- `::before`: 要素の「直前」に何かを差し込む。
- `::after`: 要素の「直後」に何かを差し込む。
「あくまで添え物」なので、HTMLのコードを複雑にすることなく、デザインの幅を広げられるのが最大のメリットです。
—
まずはコードで体験してみよう
難しく考えず、まずは簡単なコードを見てみましょう。例えば、「重要だよ！」と伝えたい``タグの左右に、装飾を入れてみます。
/ 重要テキストの周りに装飾を添える /
strong::before {
content: “★”; / これが一番大事！「中身」を指定します /
color: #ff9900; / オレンジ色に /
margin-right: 5px; / 少しだけ隙間を空ける /
}
strong::after {
content: “★”;
color: #ff9900;
margin-left: 5px; / 文字の右側に少し隙間を /
}
たったこれだけで、HTML側には`
重要事項
`としか書いていないのに、画面上では「★重要事項★」と表示されるようになります。不思議で楽しいですよね！
—
ここだけは注意！アクセシビリティの落とし穴
さて、ここで一つ、プロとして絶対に伝えておきたい「大切なルール」があります。
`::before`や`::after`で表示した文字やアイコンは、「CSSで付け足したもの」であって、HTMLの一部ではありません。
もし、あなたがこの疑似要素を使って「★」というマークを表示させたとして、視覚障害をお持ちの方が利用する「スクリーンリーダー（画面読み上げソフト）」は、この★を読み上げてくれないことが多いんです。
つまずかないためのポイント
1. あくまで「装飾」に使う: 文字の強調や意味を持つアイコンを`content`で入れるのは控えましょう。あくまで「見た目の飾り」として使うのがベストです。
2. 意味のある情報はHTMLへ: もし「ここをクリックしてね！」という重要なアイコンを表示させたいなら、CSSに頼らず、HTML内に``として記述するか、適切なタグを使うようにしてください。
「見た目はCSS、意味はHTML」という役割分担を意識すると、どんな人にとっても使いやすい優しいWebサイトになりますよ。
—
現場でよく使う「ちょっとした応用」
最後に、Web制作の現場でよく見かけるテクニックを一つご紹介します。``タグ（リンク）の横に、小さな矢印を付ける方法です。
/ リンクの右側に矢印を付ける /
a.link-more::after {
content: ” →”; / 矢印を表示 /
font-weight: bold;
color: #007bff;
}
これだけで、サイト全体に統一感のある「もっと見る」ボタンが作れます。いちいちHTMLで矢印を書かなくて済むので、修正もCSS一括で終わります。便利ですよね！
—
最後に：小さな積み重ねが「プロの仕上がり」になる
最初は「CSSの中に`content`を書くなんて不思議だな」と思うかもしれません。でも、この`::before`/`::after`を使いこなせるようになると、HTMLがぐっとシンプルになり、メンテナンスもしやすい「綺麗なコード」が書けるようになります。
まずは、自分のブログや練習用のページで、文字の横に小さな飾りを付けるところから始めてみてください。つまずいたら、いつでもここに戻ってきてくださいね。
あなたの書くコードが、誰かにとって心地よい体験になりますように。応援しています！
コメント