このエントリーは前職で体験したことです。ではお楽しみ下さいませ。
お客さんからHPのページ追加の依頼があり、打ち合わせをしました。
弊社はデザイナーがいないのでほぼ、外注です。
たま～に、オイラはデザインをしますが、ストイック且つおもしろみのかけらもないサイトが出来てしまいます。
なにせ、オイラは根っからのHTMLコーダー如何にSEOに最適なコーディングをするかに命を燃やしています。こんな熱いこと言ってますが、DTDはtransitionalを選択している腰抜けです。
さて、今回の依頼でオイラの嫌いな角丸パーツが必要となりました。イラレ使って作るのも良いのですが、慣れないことをしてコストをかけたくないので角丸を簡単に作る方法をググってみました。
CSSと画像で吹き出しをつくる方法いろいろ | DesignWalkerのタネを発見
このエントリーに掲載されているXHTML Speech bubble commentsが一番しっくりくるパーツなので早速DLしました。
とっても親切なことにPhoto Shopデータまで入っています。
しかし、ＣSSを確認すると重大な問題が、 それはbeforeやａｆｔｅｒの疑似クラスを使用しているじゃありませんかぁ～。 これじゃあIE6、IE7じゃ使えねぇorz。 だからインターネットエクスプローラーは嫌いなんだよ(*｀Д´*)ノ
ということで、ＩＥ6で使用できる角丸CSSを作成してみました。 なるべくdiv厨にはなりたくないのですが、なかなか難しいです。
とりあえず、今回の案件ではこの形でしっくりするのでホット一安心。
CSS
p,dl,dt,dd{ //ブラウザーごとのデフォルトを初期化
color:#000;
font-style:normal;
font-weight:normal;
margin:0px;
padding:0px;
text-decoration:none;
}
.indent {
font-size:small;
margin-left:20px;
width:343px;
}
div{padding-top:0px;
margin:0px;
max-width: 383px;
background: url(images/head.gif) top left no-repeat;
}
dl.kado{
background: url(images/bottom.gif) bottom left no-repeat;
padding-top:20px;
padding-bottom:31px;
max-width: 383px;
width: 383px;
}
dl.kado dt{
background: url(images/main.gif) center left repeat-y;
}
dl.kado dd{
background: url(images/main.gif) center left repeat-y;
padding-bottom:11px;
}
HTML //もろもろ省略してます。
＜div＞
＜dl class="kado"＞
＜dt＞＜span class="indent"＞hogehogehogehoge＜/span＞＜/dt＞
＜dd＞＜span class="indent"＞hogehogehogehoghoge＜/span＞＜/dd＞
＜/dl＞
＜/div＞
ギュメは全角にしてます。