擬似要素を活用するための最低限のルール
えびこです!🍤
今日苦戦したこと、擬似要素です!
擬似要素とは
CSSでHTMLもどきを作れる要素。
SEO対策の為に、関係ない要素をHTMLに書いて汚したくない時に有効。
よく出てくる要素は以下4つ?
- ::before
- ::after
- ::first-letter
- ::first-line
使い方
1. CSSスタイルシートにてタグ名、id名、class名の直後に書く。
#ebiko:after {}
2. contentを指定する。
#ebiko:after {
content: "ちゃん";
}
contentを空欄でもいいから指定してあげないと、表示されない。
幅や高さを調整したい時
幅や高さをいじりたい時、このまま入力してもインライン要素だから効果がない。
display: blockやinline-blockの指定が必須。
位置を調整したい時
やったことないけど、タグをposition: relative;指定して、擬似要素にposition: absolute;を指定すれば自由に調整できる。
:(コロン)の数
CSS2ではコロン1個、CSS3ではコロン2個が決まり。
CSS3未対応のブラウザのためにコロン1個にしておくのが無難。ゆくゆくはCSS3対応ブラウザが増えていき、コロン2個になる。
有効な活用方法
このページ、Tech Academy最終課題制作中にも非常にお世話になったので引用!(ハショリ)
今模写しているサイトは、ロゴや、メッセージを書いた画像はHTMLに書いていて、各セクションのアイコン(画像)挿入には擬似要素が使われています。
background-image、すごく苦手意識を持っているんですが、頻繁に使われているので我慢して勉強しないとですね。
まとめ(個人的に今後活用していきたい場面)
HTMLに書くべきことを擬似要素で書かない、ということを心がけていればよさそう。
1文字目の色を変えたり、大きくしたりするのにわざわざspanタグで挟んでCSSでデザイン指定していたんですが、擬似要素を積極的に使っていけばもっとスッキリしたコーディングができるようになるのかな?
見出しのアイコンにも積極的に活用して、慣れたいですね。
今日もまたひとつ勉強になりました〜〜
参考にさせていただいた記事: