Commit Lab

このエントリーはリライトされています。そちらも併せてご覧ください。
XHTML+CSS – CSS Spriteで表現する角丸2

ネタ元は有名所コリスさんのこれ
コリス CSS 一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
そのネタ元はコリスさんの方から見れる。

私は最近DesignWalkerさんのエントリーを読んでからCSS Spriteに興味がありまして、自分の仕事の中で可能であればコッソリしこんでます。これ系のテクニックってよく使いながらも、総称のようなものを知らなかったので、知って目からうろこというかなんというか。でもこれ複数人でコーディングする場合は混乱を招く可能性があるんでそこは注意を。

これも有名所DesignWalkerさん。CSS Spriteの簡単な説明と利点。
DesignWalker CSS Spriteを活用しよう

でまぁ今回のネタについてはコリスさんを読んでいただくとして、これをテストしてみました。まず、Demo2をダウンロードして試した感想としては「こりゃ凄い！」という驚き。無駄なタグがない！。ありそうでなかった発想に脱帽。僕のようにjavascriotがまったく使えない人間でも、スライスしてDivをテーブルレイアウトの様に配置しなくても簡単に実現できる所が良いです。(他にもやり方ありますけどね)とりあえず日本語向けにCSSをカスタマイズしてみた。

Demo

こんな感じです。何処かで見たことがあるというか、はてな丸パクリですが、まぁお遊びということでお許しください。fontは僕の好みでh2のみメイリオです。で、これに使ってる画像はこれ一枚です。

実サイズの画像(448バイト)
画像次第でサイズを落とすことも可能でしょう。

で、ここで「やったー出来た出来た」と喜んでいたんですが、コリスさんのコメントを見るとどうやらIE5.5では崩れるらしい。まぁぶっちゃけ「Ie5.5は無視しよっかな・・・」と思ったんですが、とりあえず問題はPを背景として使うから生じるんだから、pのwrapを作って背景を指定すれば崩れないなと。(wrapper+inner否定派の方ごめんなさい)

で、Pを包んだ結果がこれ。

Demo2 ついでに画像も入れてみた。

Demo2の主なCSS

body, div, address, p, h2 { margin: 0; padding: 0;}

body { font: 100%/1.231 Arial, Helvetica, sans-serif;}

.contentbox {
width: 350px;
background: url(画像) no-repeat left bottom;
padding-bottom: 15px;
margin: 0 auto;
}

.contentbox h2 {
width: 320px;
background: url(画像) no-repeat left top;
padding: 0 15px;
font-family:"メイリオ";
color: #fff;
font-size:108%;
font-weight:bold;
line-height: 2;
height: 35px;
}

.contentbox p {
width: 318px;
background: url(画像) repeat-y right top;
padding: 10px 16px 0 16px;
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 85%;
}

Demo2のhtml

<div class="contentbox">
<h2>タイトル</h2>
<div class="IE55"><img alt="" />

文章

</div>
</div>

IE5.5用にdivが一つ増えてる。もっと良い方法があるかも。

これならIE5.5でも崩れずに表示可能です。ただしIE Testerの5.5でしか確認してないんで、実機では不明。いけるかな？で、例のごとくソースが殴り書きなんで整理整頓せれてなくて汚いです。これだけの手間で角丸が使えてフレキシブルなら、常用できるテクニックだと思うんだけどどうでしょうか。