CSSで罫線を角丸で表示する(1):FirefoxとSafariのCSS
エ・ビスコム・テック・ラボ
2008/01/11 07:00
今回はSafariとFirefoxが対応している、罫線の角を丸く表示するスタイルシートを検証する。
前回、前々回でブラウザと標準規格の動向を見てきたが、今回からは、Firefox 3やSafari 3が新しく対応したHTML/XHTMLやCSSを紹介していきたい。
最初に紹介するのは、Safari 3が新しく対応した、罫線の角を丸く表示するスタイルシートだ。角丸のデザインは、Webページではよく利用されているが、現状では画像を使って表現するしかなく、HTML/XHTMLソースも複雑になるといった問題がある。スタイルシートだけで設定する機能は制作者の多くが待望している機能の1つと言えるだろう。現在のところ、Safari 3とFirefoxが対応しているが、OperaやInternet Explorerは対応していない。
-webkit-border-radiusプロパティ
Safari 3が新しく対応した-webkit-border-radiusプロパティでは、半径を指定することで罫線の角を丸く表示する。たとえば、<div>に対して角の半径を「20px」と指定すると、次のように4つの角が丸く表示される。なお、<div>には太さ5ピクセルの青色の罫線を指定して、背景を水色で表示するように指定している。
div {
-webkit-border-radius: 20px;
border: solid 5px blue;
background-color: skyblue;
padding: 20px;
width: 100px;
}
<div> 今日はいい天気です。今日はいい天気です。今日はいい天気です。 </div>
上のサンプルでは、paddingプロパティで罫線の内側に20ピクセルの余白を入れているが、余白を入れずに罫線の角を丸くした場合、次のように文字がはみ出して表示される。
div {
-webkit-border-radius: 40px;
border: solid 5px blue;
background-color: skyblue;
padding: 0px;
width: 100px;
}
<div> 今日はいい天気です。今日はいい天気です。今日はいい天気です。 </div>
- 特集: FirefoxとSafariのCSS徹底検証 (21件)
- 今日のトップ記事
- 2日前
- 3日前
- 4日前
- 6日前
- 7日前
- ホワイトペーパー
- 話題のタグ
iPod touch
Eclipse
Linux
Firefox 3
仮想化
HTML
ライブラリ
Microsoft
Apple
イロハ
入門
Python
MySQL
ブラウザ
Leopard
C/C++
まとめ
Internet Explorer
開発環境
Mozilla
Ruby on Rails
Webアプリケーション開発
Ruby
Ajax
Java
PHP
PostgreSQL
JavaScript
Google
RIA
Apache
server
iPhone
Webデザイン
XHTML
Mac OS X
CSS
Flash
オープンソース
Safari
Database
リファレンス
Firefox
フレームワーク
Off Topic
SOA
Tips
Windows
Adobe
小技
話題のタグを見る »


MSもアドビも学生さんに開発ソフトを無償提供
「Economist」のトップページがリニューアル
あなたがプログラムを理解できない10の理由:第2回
新APIまもなく登場--Google Developer Day 2008の見所とは?
仮想化によるコスト削減を見える化:オンラインTCOカリキュレータ
-Simplify IT- ITをシンプルに 連載第2回
内部統制対策を実現するIT運用管理ツール
リスティング広告における競争優位性の維持