気の赴くままに

仕事や収入は置いといて、信州に住みたいという思いのまま移住してみた人です

擬似要素を活用するための最低限のルール

 

えびこです!🍤

 

今日苦戦したこと、擬似要素です!

 

 

擬似要素とは

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個になる。

 

有効な活用方法

saruwakakun.com

このページ、Tech Academy最終課題制作中にも非常にお世話になったので引用!(ハショリ)

 

今模写しているサイトは、ロゴや、メッセージを書いた画像はHTMLに書いていて、各セクションのアイコン(画像)挿入には擬似要素が使われています。

 

background-image、すごく苦手意識を持っているんですが、頻繁に使われているので我慢して勉強しないとですね。

 

まとめ(個人的に今後活用していきたい場面)

HTMLに書くべきことを擬似要素で書かない、ということを心がけていればよさそう。

 

1文字目の色を変えたり、大きくしたりするのにわざわざspanタグで挟んでCSSでデザイン指定していたんですが、擬似要素を積極的に使っていけばもっとスッキリしたコーディングができるようになるのかな?

 

見出しのアイコンにも積極的に活用して、慣れたいですね。

 

 

 

今日もまたひとつ勉強になりました〜〜

 

 

参考にさせていただいた記事:

【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 & 確認方法 - Qiita

CSSの疑似要素とは?beforeとafterの使い方まとめ