画像を使わずに見出しを水平線で挟むCSS小技 - かちびと.net

ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 h1 { border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px; } h1 span { position: relative; top: -24px; padding: 0 20px; background:white; } borderを使って実装。h1にborderを付けて位置を下げ、span

[mosha]

お、CSSいーね。

[shields-pikes]

これそんなに大した技か？ そもそもタイトルをラインで挟むデザインなんて頻繁にするか？ やるとしてもハイフンでよくないか？ なんかお前ら脊髄反射でブクマしてないか？

[morishitatakahiro]

ｃｓｓ

[hashi256]

css

[MshrKato]

ちょっと裏技感

[hisaodehateb]

画像を使わずに見出しを水平線で挟むCSS小技

[dgwingtong]

画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net

[warriorking]

画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net

[like_futsal]

css テクニック

[google-house2]

ぶくま

[akinalover]

なるほど｡こぅ言うのはちょこちょこ覚えていかなきゃついていけなくなりそう｡

[m-hand]

使える小技！