【CSS】見出し（Hタグ）のデザイン方法が少しずつ分かってきた｜解説・実験等

　CSSでの見出しのデザイン方法が少しずつ理解出来てきたのでメモ。

「before」と「after」

　↑この文の前後に文字等を入れたい場合、

　↑このようなCSSを書くと「span」の前後に「 content:"";」に書いた文字や画像を表示させることが出来る。

　画像を表示させたい場合は「 content:url(画像のURL);」と記述する。

明日は晴れるよ

　↑「class="jikken1"」で括った部分の前後全てに文字を挿入できるので、使いこなせれば便利になりそう。

「position」

　「position」を使うと表示させる位置をずらすことが出来る。

　これについては以前記事を書いたのでそちらを参照していただけるとありがたい。
　

　応用すると線や背景等のデザインを好きな位置に表示させることが出来る。

上の2つを組み合わせて見出しデザインを作る

サンプル1

　↑「.sample:before」の「content:"";」内には何も書かず、幅・高さ共に10pxの赤い四角形を表現した。「position」には上・左共に5pxずらした位置に表示するように記述。

　「.sample:after」には「before」と同じような感じで青の四角形を表現。「position」には下・右共に5pxずらした位置に表示するように記述。

　「.sample」部分は「padding」を付けて「.sample:before」「.sample:after」で作った四角形に文字が重ならないようにした。あとは分かりやすいように背景色と文字のサイズを変更している。

サンプル1の結果

見出しサンプル1

サンプル2

　↑「.sample2:before」は上から12px、左から5pxの位置に赤の四角形、「.sample2:after」は上から15px、左から8pxの位置に青の四角形を置き、2つの四角形が少し重なるようにしてみた。

サンプル2の結果

見出しサンプル2

　↑「.sample2:after」で作った四角形の方が上に来るようだ。

サンプル3

　↑「.sample3」に「border」で赤い枠を作って「.sample3:before」で細い長方形を表示してみた。

サンプル3の結果

見出しサンプル3

サンプル4

　↑「.sample4」に青い背景色を付けて文字を白にした。

　「.sample4:before」で上部に白い点線、「.sample4:after」で下部に白い点線を付けてみた。

サンプル4の結果

見出しサンプル4

サンプル5

　↑「.sample5:before」で高さ100％の赤の長方形を上・左共に10pxの位置、「.sample5:after」で高さ100％の青の長方形を下・右共に10pxの位置に表示させてみた。

サンプル5の結果

見出しサンプル5

　↑赤長方形は下、青長方形は上に突き出るデザインが出来た。

まとめ

　今回のサンプルは全て「span」で表現しましたが、

　↑こんな感じで「hタグ」にも使用することが可能。

　「before」「after」と「position」を少し理解するだけで、CSSでのデザインの幅が一気に広がりそうです。