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

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

ちょっと素敵だったので備忘録。CSS
で見出しを水平線で囲むテクニック
です。本とかでよくある表現方法です
が、これを画像を使わず実装しよう、
というもの。クロスブラウザで動作
しますので汎用性もありますね。

これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。

demo

こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。

CSS

  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で囲ってテキストだけ元の位置に戻す・・なるほど。僕がcss苦手だから思いつきませんでしたｗ

html

<h1><span>Kachibito</span></h1>

普通に書くだけ。

jQueryを使う

spanが含まれていないような既存サイトに導入したいのであればjQueryでspanを入れてあげればいいですね。

  $(document).ready(function() {
      var h = $('h1'),
          htext = $(h).text(),
          full = '<span>' + htext + '</span>';
      $(h).html(full);
    });