「疑似要素って何？」
「疑似要素はわかるけど､どう使えばいいかわからない」
こういった悩みにお答えします｡
疑似要素とは
疑似要素とは､HTML要素を追加することなく､CSSで疑似的にHTML要素(「:before」「:after」)を追加して装飾などをする方法です｡
HTMLの文書構造に直接関係ない装飾やアイコン､図形などを疑似要素を使って表現することでHTMLが見やすくすることができます｡
h2:before{
content: "●";
}
p:after{
content: "「";
}
p:after{
content: "」";
}
- メリット
- HTMLソースがきれいになる
- 画像を使わず実現できるデザインの幅が広がる
- 修正がしやすくなる
- デメリット
- CSSを書く量が増える
- 入力ミスが増える
疑似要素でよくあるミス
疑似要素を使うとCSSの記述量が増えるので､自然と入力ミスが増えます｡
「ちゃんとCSSを書いたはずなのに疑似要素がなぜか表示されない」
という場合は､以下､書き忘れがないか確認してみてください｡
- 「 :before 」「 :after 」を書き忘れる
- 「 content: ""; 」を書き忘れる
- 「 display: block; 」「 display: inline-block; 」を書き忘れる
疑似要素のおもな使い方
アイコン
図形
図形を作成する場合は疑似要素を使い､「 content: "" 」とすることで図形を作成することができます｡
「 :before 」「 :after 」はどちらでもかまいません｡
両方を使うことでもっと複雑な画像を実現できます｡
See the Pen 図形 by hashi84 (@hashi84) on CodePen.
- 四角形
- 四角形は､疑似要素にwidth､height､background-colorを指定することで表現できます｡
- 丸
- 丸は､四角形をつくった疑似要素に「 border-radius: 50%; 」を指定することで表現できます｡
楕円にする場合はborder-radiusの数値を変更します｡
- 矢印
- 矢印は､四角形を塗りつぶさず2辺にborderを指定します｡
このままだと矢印が斜めを向いているので､「 transform: rotate(45deg); 」など角度を変えることで上下左右を向かせることができます｡
- 直角三角形
- 直角三角形は､borderを使います｡
borderのtop､bottom､left､rightのうち2つが交差する部分が斜めに切り替わることを使って表現します｡
色のついたborderと透明なborderを指定することで三角形になります｡
直角三角形の向きや長さはborderで指定するプロパティや長さ変更しながら指定していくとうまくいくところが見つかります｡
- 二等辺三角形
- 二等辺三角形も､直角三角形と同じでborderを使います｡
borderのうち3つを使い､2つを透明にすることで二等辺三角形になります｡
向きや長さは実際にやりながら調整していけばいいのでなんとなく覚えておけば大丈夫です｡
装飾
装飾はおもに見出しなどで使います｡
日本語と英語をあわせて書くようなデザインのときは､HTMLタグをどうすればいいか悩むことがあるかもしれませんが､日本語をHTMLに書いて､英語を疑似要素に書くとすっきりします｡(日本向けのサイトの場合)
See the Pen 見出し by hashi84 (@hashi84) on CodePen.
HTMLにdata属性「data-text」､CSSに「 attr( data-text ) 」とすろことで､属性に指定したテキストを疑似要素として取得､表示させることができます｡
ページタイトルなど疑似要素に使うテキストが違って数が多い場合は､これでCSSを書く量が少なくなります｡
連番
まとめ
疑似要素について紹介しました｡
画像を使わず疑似要素を使うことで､HTMLソースの可読性がよくなり､読み込み速度も速くなるのでSEOにも好影響が期待できます｡
