★HTML+CSS 見出しのデザインサンプル

  • このエントリーをはてなブックマークに追加

h1にスタイルをつけるというサンプルで例を紹介しています。

単色背景

単純に背景に色を付けて、視認性を高めた見出しのサンプルです。パディングなどは全く設定していません。背景が例えば赤いときは白い文字など可読性の高い色を選択する必要があります。黒のままだと滲んでしまい見づらくなります。

h1{
color: rgba(255,255,255,1);
background: rgba(255,0,0,1);
}

単色下線

単色の下線を引いた見出し。デフォルトの文字だけだと、見出しは、その文字の表示されている範囲だけ見出しということを認識しなければいけない。ブロック要素なので、幅いっぱいに色を付けたり、あるいはこの例のように線を引く事によって、前後のメリハリを高めます。背景をつけるよりも洗練されます。

h1{
border-bottom:solid 0.2vw rgba(90,90,90,1);
}