hr要素を文字で入れ替える

HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。

Demo: Swap HR Element with Character(s)

単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。

hr {
  margin: 2em auto;
  border: none;
  position: relative;
  clear: both;
  width: 100%;
  height: 48px;
  background-color: transparent;
  box-sizing: content-box;
}

hr要素の装飾はブラウザによって様々なので、とりあえずborderプロパティやbackground-colorプロパティあたりをつぶし、挙動をなるべく統一させます。それから擬似要素を簡単に重ねられるようにpositionプロパティの値をrelativeにして、位置調整を楽にするためにwidthプロパティやheightプロパティも指定しておきます。

実際に区切り線として描画されるものの実体は擬似要素に指定された文字になります。

hr:before {
  display: block;
  position: absolute;
  width: 100%;
  height: 48px;
  line-height: 48px;
  content: "\2022\00a0\2022\00a0\2022";
  color: rgb(51, 51, 51);
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 48px;
  text-align: center;
}

センタリングするにはwidthプロパティで100%を指定すれば親である見えないhr要素と幅が揃うので、その上でtext-alignプロパティを使うのが一番簡単です。縦方向のセンタリングにはline-heightプロパティの値をheightプロパティの値と揃えるという古からある手法を使うと良いでしょう。あとは好きなフォントと文字で区切り線を作るだけです。

contentプロパティの値は普通に日本語や絵文字系を書くと、CSSファイルの文字コードに気を使わなければならないので、なるべくならコードで直接指定したほうが良いでしょう。文字のコードを調べるには、Windowsなら文字コード表というOS標準のアプリケーションを、OS Xなら文字ビューアというアプリケーションが使えます。なお、半角スペースを普通に入力すると消えたりするので、代わりに\00a0のnon-breaking spaceを利用するのが良さそうです。

デモのようにDive Into HTML5の花柄区切り線とかもこんな感じで比較的簡単にいけます。このサイトではニョロマルニョロみたいな感じにしてみました。colorプロパティでrgba()を使って透過させたり、色々やってみてます。CSSトランスフォームなどを使って変形させてみたりしても面白いでしょう。CSSアニメーションなどを利用するのはさすがにうっとうしいと思いますが。オーナメントのフォントをWebフォントとして利用したりすれば、もっと柔軟でエレガントな区切り線にできるかもしれませんね。