見出しの文字数と背景の長さをそろえる１

ふつーに見出しタグ（H*）に背景を設定すると、

と、背景が文字の無いところまで設定されてしまうのを

のように文字数に合わせて設定するテクニックです。

すぐに思いつくのはwidthを設定すること。もちろんこれでもいいんだけど、

このように長い見出しだと３行とかになっちゃいます。文字数に合わせてクラスを作るのも大変だし・・・。

そこで登場するのが、displayというプロパティとinlineという値です。
下のソースのようにスタイルシートを設定すれば・・・

h6{
    font-size:medium;
    background-color:#FFCCB0;
    display:inline;
}

このように文字数に合わせて背景をつけてくれます。

今回使ったdisplayというのは、ブロック要素とインライン要素の切り替えを行うプロパティです。値にinlineをとればインライン要素、blockをとればブロック要素として、本来のタグの性質にかかわらず振舞うことができます。

今回は本来ブロック要素である見出しタグをインライン要素として振舞わせてみました。

使いこなすための＋α

見出しタグがインライン要素として振舞っているので、うっかりすると

のようになってしまいます。

これを避けるためにはdivタグを合わせてつけてあげればOKです。

<div><h6>見出しでーす</h6></div>

こんな感じです。

そうすると

のようにちゃんと改行してくれます。