「あとから文字を付け足す魔法」：::beforeと::afterの正しい使い道と注意点
Web制作を始めたばかりの頃、「見出しの横にちょっとしたアイコンを置きたい」「装飾のために文字を足したい」と思ったことはありませんか？
そんなとき、HTMLをいじらずにCSSだけで文字を挿入できる`::before`（ビフォア）と`::after`（アフター）は、まさに魔法のようなツールです。でも、この魔法には「ちょっとした落とし穴」があることをご存知でしょうか。
今日は、この便利な擬似要素（ぎじようそ）と、アクセシビリティの観点から絶対に知っておいてほしい「読み上げ」の話を、肩の力を抜いて一緒に見ていきましょう。
—
そもそも「擬似要素」って何？
言葉が難しく聞こえますよね。でも、考え方はとてもシンプルです。
例えば、お気に入りのノートに「付箋（ふせん）」を貼るシーンを想像してみてください。ノート本体（HTML）に書き込まれた文字はそのままに、ひょいっと新しい情報を付け加える。これが`::before`と`::after`の正体です。
- `::before`：要素の「中身の直前」に付箋を貼る
- `::after`：要素の「中身の直後」に付箋を貼る
これらを使うと、HTMLを汚さずにデザインの幅をぐっと広げることができるんです。
さっそくコードで試してみましょう
まずは、見出しの横に「NEW!」という文字を足す例を見てみましょう。
/ 見出しの直後に「NEW!」を付け加える /
h2::after {
content: ” NEW!”; / これが魔法の呪文！ここに入れた文字が表示されます /
color: #ff6b6b; / ちょっと目立つ赤色に /
font-size: 0.8em; / 少し小さめに /
margin-left: 10px; / 見出しとの間に少し隙間を /
}
たったこれだけで、HTMLのソースコードを触ることなく、ブラウザ上には「見出し NEW!」と表示されます。便利ですよね！
—
ここが重要！「読み上げ」とアクセシビリティの話
ここからが本題です。Webの世界には、目の不自由な方が使う「スクリーンリーダー（画面読み上げソフト）」という、とても大切な道具があります。
実は、`content`プロパティを使ってCSSで挿入した文字は、「装飾」とみなされることが多く、必ずしも読み上げられるとは限らないんです。
なぜ「読み上げ」が大事なの？
もし、あなたが大切な情報を「装飾」としてCSSで書いてしまったら、スクリーンリーダーを使っている方にはその情報が届きません。
- 良い例： デザイン上のアクセント（「NEW!」や「アイコン」など、なくても意味が通じるもの）
- 悪い例： 本文中の重要なキーワードや、価格、日付などの「コンテンツそのもの」
もし「絶対に読んでほしい情報」なら、CSSでごまかさず、素直にHTMLに書き込むのが一番の正解です。「HTMLは骨格、CSSは服」。骨格であるべき情報を服の中に隠してしまうと、誰かにとってのWeb体験が損なわれてしまう可能性がある、ということですね。
—
安全に使うためのヒント
「じゃあ、使わないほうがいいの？」と不安にならなくて大丈夫ですよ！以下のルールを意識するだけで、グッとプロフェッショナルなコーディングになります。
1. 「飾り」に徹する：
アイコンや区切り線、ちょっとしたラベルなど、「読めなくても意味は通じるけど、あると綺麗」なものに使いましょう。
2. 意味のある情報はHTMLへ：
「重要：」のような注意書きや、価格などの数字は、必ずHTML（`p`タグや`span`タグなど）に書きましょう。
3. `aria-hidden=”true”`を検討する：
もし装飾のために使った要素が読み上げられてしまい、逆に邪魔になる場合は、HTML側で「これは読み上げなくていいですよ」という合図を送る工夫をすることもあります。
—
まとめ：魔法は「おもてなし」のために
`::before`と`::after`は、Web制作を始めたばかりの方にとって、最初に出会う「ちょっと高度なテクニック」です。これを使いこなせると、デザインの自由度が劇的に上がります。
ただ、私たちの作るWebサイトは、どんな人にとっても使いやすいものであるべきです。
「これはデザインのための飾りかな？ それとも、誰かに絶対に伝えないといけない大切な情報かな？」
そう一歩立ち止まって考えるだけで、あなたのコードは「ただ動くもの」から「誰かに優しいもの」へと変わっていきます。
焦らず、少しずつで大丈夫です。まずは小さなアイコンの装飾から、CSSの魔法を楽しく試してみてくださいね！
もし分からないことがあれば、いつでもまた聞きに来てください。一緒に一つずつ解決していきましょう！
コメント