[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック

サイト構築 -CSS

Post on:2011年11月4日

sponsorsr

紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。

Centered Heading Overlaying a Horizontal Line with CSS

[ad#ad-2]

下記は各ポイントを意訳したものです。

実装のポイント
Method 1: 疑似要素
Method 2: 隣接兄弟セレクタ
Method 3: 線形グラデーション
Method 4: 最後にjQueryを使ったメソッド
全部のデモ

実装のポイント

実装するにあたり、下記の点に留意します。

画像は使用しない。
余分なHTMLは使用しない。
Scalable: フォントのサイズを大きくしても調整される。
Fluid: 可変。
JavaScriptは使用しない。

Method 1: 疑似要素

見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央に重なるようにします。

CSS

h1:before {
	content: "";
	display: block;
	border-top: solid 1px black;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	z-index: 1;
}

h1 span {
	background: #fff;
	padding: 0 20px;
	position: relative;
	z-index: 5;
}

デモ

デモページ

欠点

疑似要素を使用しているため、IE6/7では機能しません。また、装飾用にspanタグを使用しており、これは良くない方法です。

Method 2: 隣接兄弟セレクタ

見出し要素の後にp要素を配置するものとして、「h1+p」で水平線を配置します。ポイントはネガティブマージンとパディングを同じ値にすることです。
見出しの後の要素が不明な時はユニーバルセレクタを使い、「h1+*」と指定します。

CSS

h1+p {
	border-top: solid 1px black;
	padding-top: 40px;
	margin-top: -40px;
}

デモ

デモページ

欠点

このセレクタはIE6では動作しません。そして、この方法でもまだ余分のspanタグを必要とします。
IE6への対応、セマンティックということを気にしないのであれば、この方法が一番よいでしょう。

Method 3: 線形グラデーション

線形グラデショーンを使う方法では、h1要素に直接スタイルを記述します。上下を背景色と同じにし中央に水平線を描きます。
グラデショーンがテキストの背後のエリアを覆うようにspanタグを必要とします。

CSS

h1 {
	background: -moz-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
	background: -ms-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #ffffff), color-stop(50%, #000000), color-stop(51%, #000000), color-stop(52%, #ffffff), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
	background: -o-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
	background: linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
}

※Webkit用の古い記述も含まれています。

デモ

デモページ

欠点

この方法はspanタグの利用とIE6-9が非サポートである点です。

Method 4: 最後にjQueryを使ったメソッド

ここまでの方法は全てspanタグを挿入するものでした。そのspanタグをjQueryで挿入してみます。

CSS

var myHeading = $('h1'),
    myHeadingText = $(myHeading).text(),
    myFullText = '<span>' + myHeadingText + '</span>';

$(myHeading).html(myFullText);