タイトル改造

CSSの実験も兼ねて、タイトルをいじってみました。こういう角丸のデザインはtableを使うとかなり簡単に出来るわけですが、CSSとなると結構ややこしいかも・・・と思ったので、とりあえずやってみようかと。意外に簡単な罠。

考え方自体はEasy CSS drop shadowsで、これの「大きさ的にかなり余裕のある画像をベースとなるブロックの背景画像にする」を応用したものです。といってもCSSのコードはかなり違ってしまってますが。言葉にすると、

ベースとなる角丸の画像を作成
ベースとなるブロック要素に、その画像の真ん中の繰り返し部分と右端を連結した背景画像を指定
前面に位置するブロック要素にその画像の左端の部分のみを背景画像に指定

と、こういうことになります。わかりにく。

CSSのコードはこんな感じ。

div#header {
  margin:12px 0;
  color:#333333;
  background-color:transparent;
  background-image:url("../images/titlebg_rb.png");
  background-repeat:no-repeat;
  background-position:right bottom;
}

div#header h1 {
  background-image:url("../images/titlebg_rt.png");
  background-repeat:no-repeat;
  background-position:right top;
}

div#header h1 a {
  padding:18px;
  display:block;
  width:auto;
  height:72px;
  overflow:hidden;
  background-image:url("../images/titlebg_lt.png");
  background-repeat:no-repeat;
  font-size:2.5em;
  text-align:center;
  letter-spacing:8px;
}

div#header h1 > a {
  height:36px;
}

div#header h1 a:link,
div#header h1 a:visited,
div#header h1 a:hover,
div#header h1 a:active {
  color:#333333;
  background-color:transparent;
  text-decoration:none;
}

div#header h2 {
  margin:0 0 12px 0;
  padding:6px;
  background-image:url("../images/titlebg_lb.png");
  background-repeat:no-repeat;
  height:37px;
  overflow:hidden;
  font-size:1.5em;
  text-align:center;
  letter-spacing:2px;
}

div#header > h2 {
  height:24px;
}

ベースとなる画像を4つに分割し、div#headerでタイトルの下端及び右下端の画像、h1で上端及び右上端の画像、h1 aをブロックにしてで左上端の画像、h2で左下端の画像をそれぞれ背景に指定しています。下端及び右下端の画像と上端及び右上端の画像はブラウザの横幅によって必要な幅が変わってしまうので、~~1280~~2560pixelの横幅になっています(=ブラウザの幅が~~1600~~3200pixelとかだと途中で切れる)。h1 > aとdiv#header > h2はMozillaやOperaとInternet Explorerでheightの解釈が違うのを回避するため。また、div#header h1 aとdiv#header h2に指定してあるoverflowは、文字サイズを変えた時もタイトル自体の高さが変化しないようにするためです。

HTMLマークアップに依存する(h1内にaがないと実現するのは難しい)アレなCSSの書き方ですが、作ってる分にはオモシロカッタです。