PhpMyBorder で角丸レイアウトを作る
角丸のレイアウトを作りたい場面は非常に多い。で。div で角丸にしたいボックスの上下に画像を付けたり mozilla 系だと content プロパティに :before と :after 要素を付けたりと方法は色々ある。ちなみに私はこんな感じで指定。
.itemTop{ background:url("./images/item_top.gif") left top no-repeat; height:10px; } .itemMiddle{ background:url("./images/item_middle.gif") left top repeat-y; } .itemBottom{ background:url("./images/item_bottom.gif") left top no-repeat; height:10px; }
これだと固定幅にしか適応できないけどソースがシンプルになるしボックスのタイトルを画像にしたりと色々と応用が利く。対応ブラウザも幅広い。もっと簡単にしたいと云う訳でこんなクラスがありました。
使い方はダウンロードした phpMyBorder2.class.php を include_path が通っている場所に置いて
< ?php require_once 'phpMyBorder2.class.php'; $pmb = new PhpMyBorder(); echo $pmb->begin_round('260px', 'DDDDFF', '0066FF'); ?> 角丸レイアウトだよ。わー。 < ?php echo $pmb->end_round(); ?>
とするだけ。おー。簡単にできた。ソースを見ると1段ごとに幅の違う枠を置いているのね。分かり辛いけどこんな感じ。
□□□■■■■■■■■■■■□□□←1段目 □□■■□□□□□□□□□■■□□←2段目 □■□□□□□□□□□□□□□■□←3段目 ■□□□□□□□□□□□□□□□■←以下コンテンツ