画像を使わずCSSのみで見出しをレイアウトしてみる｜ Director's Cut

画像を使わずCSSのみで見出しをレイアウトしてみる

2010年05月18日

とか、このサイトのような

とか。

どうやっているかというと、とっても簡単です。
HTML側は

1	<h2 class="midashi">見出し</h2>

classやIDをつけてもつけなくてもいいですが、ここでは「midashi」というクラスをつけます。

まず、

の見出しはCSSに下記を記述します。

1
2
3
4
5

h2.midashi {
border-left: 7px solid #333333;
border-bottom: 7px solid #333333;
padding: 0.5em 0.5em 0 0.5em;
}

ちなみに、

の場合は

1
2
3
4

h2.midashi {
border-left: 7px solid #333333;
padding: 0.5em 0.5em 0 0.5em;
}

でできます。

要は、borderを左と下に描き、左を太くし、上下と左側のpaddingを調整すればいいだけです。

[...] This post was mentioned on Twitter by 近藤　信幸. 近藤　信幸 said: 画像を使わずCSSのみで見出しをレイアウトしてみる http://is.gd/ceb08 [...]
Tweets that mention 画像を使わずCSSのみで見出しをレイアウトしてみる｜ Director's Cut – art project team Blog - -- Topsy.com