魔法の「あと付け」テクニック！CSS擬似要素「::before」と「::after」の世界へようこそ
こんにちは！CSSの世界へようこそ。
コードを書いていると、「ここにちょっとだけアイコンを置きたいな」「見出しの横に飾り線をつけたいな」と思うこと、ありますよね。
そんな時、わざわざHTMLファイルに `` なんて書いて増やしていませんか？ もちろん間違いではありません。でも、それだとHTMLがどんどん長くなって、何がなんだか分からなくなってしまいますよね。
実はCSSには、「HTMLを汚さずに、見えない魔法で装飾をペタッと貼り付ける」という、とっておきの裏技があるんです。それが今回紹介する「擬似要素（ぎじようそ）」、`::before` と `::after` です。
—
擬似要素は「架空の付箋」のようなもの
`::before`（ビフォア）と `::after`（アフター）は、その名の通り「前」と「後ろ」に何かを配置するためのものです。
イメージしてみてください。あなたは今、きれいにお皿（HTML要素）に料理を盛り付けています。でも、「ちょっとパセリを散らしたいな」とか「最後に旗を立てたいな」と思いました。
この時、お皿そのものを変える必要はありませんよね？ お皿の上に、ひょいっと「パセリ（::before）」や「旗（::after）」を置くだけ。
擬似要素とは、まさにこの「後からひょいっと置くトッピング」のことなんです。
1. `::before` は「中身の直前」
要素の中にある、一番最初の位置に「架空の要素」を作ります。
2. `::after` は「中身の直後」
要素の中にある、一番最後の位置に「架空の要素」を作ります。
—
「content」がないと、魔法は消えてしまう！？
ここだけは絶対に覚えておいてください。この魔法には、たった一つの「呪文」が必要です。それが `content` プロパティです。
「この擬似要素の中に何を入れるか？」をCSSに伝えないと、ブラウザは「え、何を作ればいいの？」と戸惑ってしまい、何も表示してくれません。
/ 呪文（content）がないと、::beforeは存在しないのと同じ！ /
.box::before {
/ 空っぽでもいいから、とりあえず書くのがルール /
content: “”;
/ ここでサイズや色を指定して、初めて姿が見えるようになります /
display: inline-block;
width: 10px;
height: 10px;
background: red;
}
「中身はいらないんだけど、飾りをつけたいな」という時は、`content: “”;` と書くのが業界の定石です。これさえあれば、あとは自由自在。背景色をつけたり、形を変えたり、いくらでも遊べます。
—
実践！見出しの横に「おしゃれな線」を引いてみよう
よくあるWebサイトの事例でやってみましょう。見出しの左側に、ちょこんと縦線を引くデザインです。
今日のおすすめレシピ
.title {
position: relative; / 線を配置するための基準になります /
padding-left: 15px; / 文字と線が重ならないように隙間をあける /
}
.title::before {
content: “”; / 魔法の呪文！ /
position: absolute; / 位置を自由に動かせるようにする /
left: 0; / 左端に配置 /
top: 5px; / 少し下にずらす /
width: 5px; / 線幅 /
height: 20px; / 線の高さ /
background-color: #ff9900; / おしゃれなオレンジ色 /
border-radius: 2px; / 少しだけ角を丸くして優しげに /
}
これだけで、HTMLをいじることなく、CSSだけで見栄えがグンとプロっぽくなりましたよね。
—
最後に：つまずいても大丈夫
最初は、「どこに表示されてるの？」とか「あれ、消えちゃった！」となることが本当によくあります。私も駆け出しの頃は、`content` を書き忘れて1時間悩んだこともあります（笑）。
擬似要素は「実体がないもの」を操作するので、最初は少し不思議な感覚かもしれません。でも、慣れてしまうと「HTMLを汚さずにデザインできる」という、この上なくスマートな武器になります。
もし迷子になったら、とりあえず `background-color: red;` をつけてみて、「あ、今ここに赤い四角がいるんだな」と位置を確かめてみてください。デバッグの基本は、可視化することですよ。
あなたのWeb制作ライフが、少しでもこの魔法で楽しくなりますように。またいつでも相談してくださいね！
コメント