HTMLタグを入れ子にせずにCSSで左罫線付きの見出しを作る方法

リニューアル中なのにすっかりリニューアルを終えた気分になっているうかです、こんにちわ。

さて、今回このブログをリニューアルして見た目が大分変ったんですが、その中で「見出し」をCSSで装飾したので、それについて書こうと思います。

css nite

このページの右側・サイドバーの見出しをご覧いただきたいんですが、

  • 背景色が指定されている
  • その内側に隙間を入れて左側に罫線を表示させる

というこの見出しについて、HTMLタグを入れ子にする場合HTMLタグを1つしか使わない場合、2通りの作り方をご紹介。

HTMLタグを入れ子にした場合の見出しの作り方

<h3 class="heading"><span>見出し見出し見出し</span></h3>
.heading {
	padding:5px;
	background:#6699cc;
}
.heading span {
	display:block;
	padding-left:5px;
	border-left:solid 5px #ffffff;
	color:#ffffff;
	font-weight:bold;
}

サンプル

見出し見出し見出し

解説

HTMLタグは「heading」というclass名を付けた親要素(上の例ではh3タグ)に、

  • paddingで内側の余白を指定
  • backgroundで背景色を指定

子要素となるspanタグは、

  • displayでボックス要素に変更
  • padding-leftでボックス左内側に余白を指定
  • border-leftで左側に5pxの罫線を指定
  • その他、親要素に指定した背景色に合わせて文字の色や太さを調整

します。

問題点

この方法の問題点は「HTMLタグを入れ子にする」ことにあります。

サイドバーなど固定部分であればリニューアルのついでに入れ子にすればいいんですが、記事本文の見出しとなると全ての記事の手直しが必要になります。(実際、このブログの本文中の見出しはh3タグ単一なので、上記の方法を取ろうとすると全ての記事の見出しにspanタグを追記する必要があります。)

さすがにこれは面倒すぎる…ということで思いつたのが、次の「HTMLタグを1つしか使わない方法」です。

HTMLタグを1つしか使わない場合の見出しの作り方

<h3 class="heading">見出し見出し見出し</h3>
.heading {
	padding:5px 5px 5px 15px;
	background:#3399cc;
	position:relative;
	color:#ffffff;
	font-weight:bold;
}
.heading:after {
	width:100%;
	height:80%;
	content:'';
	position:absolute;
	z-index:1;
	left:5px;
	top:10%;
	border-left:solid 5px #ffffff;
}

サンプル

見出し見出し見出し

解説

HTMLを入れ子にする場合との大きな違いは、入れ子にしたspanタグの代わりに、CSSの疑似要素:afterを使用していることです。

この:afterは、要素の後に補助的な要素を表示させるためのもので、これに罫線を指定して上記サンプルのように表示させています。

本体となる部分(.heading)は、

  • paddingで内側の余白を指定(左側のみ罫線を表示させるスペースをとるため、それを加味したサイズを指定)
  • after要素の位置の基準とするため、positionでrelativeを指定
  • backgroundで背景色を指定
  • その他、親要素に指定した背景色に合わせて文字の色や太さを調整

疑似要素:afterで表示させる部分は、

  • widthで幅を指定
  • hegihtで高さを親要素=100%よりも小さいサイズ%指定
  • 親要素からの絶対値に配置されるようpositionabsoluteを指定
  • 親要素の上に被せて配置されるようz-indexに「1」を指定
  • leftで罫線の左からの位置を指定
  • hegihtで指定した高さの半分の値をtopで指定
  • border-leftで疑似要素左側に罫線を指定

HTMLタグを入れ子にする場合とくらべ、CSSは少々複雑になりますが、全ての記事を修正する必要はありません。

+++++

記事本文中の見出しは、ある程度目立たせ「区切り」であることを直感的に分かってもらう必要があります。かといって、過度に目立つと全体的なデザインのバランスが悪くなり、本文がかえって読みづらくなったりもしますので、ほどよいデザインを考えてあげる必要があります。

上の例では、見出し背景に濃い色を指定し文字を白で表示するようにしていますが、見出しの背景を薄いグラデーションにして周りをborderで囲ってあげたりすると、比較的シンプルなデザインの見出しが作れるかもしれません。

その作り方は…またいずれ。