- 2006-09-27 (水)
- コーディング
phpspot開発日誌さんの「CSSの小技集、20個」の記事の「角丸」のサンプルはあまり良くないと思います。
問題のサンプルは「Rounded corners in CSS」に載っています。
まず
と
のような2枚の画像を用意します。
そしてCSSで下記のソースの<h2>にkm-ue.gif、class="roundcont"にkm-sita.gifを背景画像として指定したら同じものが作れると思います。
km-sita.gifはbackground-positionを100%かbottomに指定します。
もちろん横幅は固定だし、見出しを入れる必要はありますが。
<div class="roundcont"> <h2>KADOMARU</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. (略)</p> </div>
他のサンプルは問題ない(と思う)ものが多かったけど、CSSの角丸は人気(?)なだけに特に気になりました。はてブの登録数が500を超える人気の記事ですから、2003年の古い手法が流れるのはちょっと……。あれだったらテーブル使ってるのとあんまり変わらないような。
- Newer: ムームー同士のドメイン移管
- Older: Sleipnir専用WebDeveloper?