|
HTML5＋CSS3 |
CSS3編
|
| Lesson 04 | border-radiusで 角丸のタブをつくる |
|||
| 制作・文 | 高村香奈子（株式会社アークフィリア） |
 |
これまでは何かと実装に手間がかかっていた角丸表現。簡単に角丸を実装することができるborder-radiusを使用して、角に丸みのあるデザインのタブをつくってみよう。 |
01
手軽に角丸の表現が実装できるborderradius 。策定段階であるCSS3の仕様では、border-radius の正式な記述は【1-1】のようになる。これは左上の角を半径10ピクセル丸くした例だ。現在、Firefoxなどのmozilla系ブラウザに対応する場合は、ベンダープレフィックス-moz-を付けた【1-3】のかたちになる。正式な記述とは順番などが少し異なるので注意しよう。
SafariやGoogle Chromeなどのwebkit系ブラウザの場合は、正式な記述に-webkit-を付けるかたちになるが、最新版のSafari とGoogle Chrome ではborder-radius が正式採用されているため、ベンダープレフィックスは不要になった【1-3】。
なお、IE9はCSS3の仕様に準拠する予定だ。各ブラウザで正式採用となった際のために、ベンダープレフィックスなしのborder-radiusもあわせて記述しておくとよいだろう。
【1-1】これだけで角丸が実装される
【1-2】topleftの記述位置が正式なコードと異なる
【1-3】古いバージョンのwebkit系ブラウザに対応させる場合は接頭辞を記述する
02
【2-1】のように、4つの角を均一な半径の角丸にする場合は、ボックス要素（この場合は<p>）に対して半径の値をひとつ指定すればよい【2-2】【2-3】。適用したブロック要素の枠線、背景画像ともに角丸の表示になる。
【2-1】4つの角を半径20ピクセルの角丸にした
【2-2】ボックス要素に対しスタイルを適応させる
【2-3】白い背景色と緑色の2ピクセルの枠線を指定
03
4 つの角それぞれに対して半径の値を指定することもできる【3-1】【3-2】【3-3】。半径の値を記述する順番は「左上 右上 右下 左下」となる。また、すべてを指定しないことで特定の部分のみ角丸にすることも可能だ。
4つの角すべてに対して指定をする場合は、コードの量が多くなってしまうので、ショートハンドで記述をするとよいだろう【3-4】。
【3-1】4つの角それぞれに違う半径の値を指定すると、面白いかたちになる
【3-2】【2-3】のクラスsampleを利用して、半径の値だけをクラスdifferentで上書きする
【3-3】位置の指定は左上、右上、左下、右下の順番で記述する
【3-4】それぞれ一行で指定をすることができる
04
border-radiusを使用して、上部のみ角丸になっているタブのかたちをつくってみよう【4-1】。HTMLは【4-2】。タブの部分は<ul>で記述する。
次にCSSを記述していく。<a>をブロック要素にして、border-radiusで左上と右上のみ半径10ピクセルを指定している【4-3】。
今回は枠線は指定せずに、背景色のみの指定でシンプルなデザインにした。このように特にborderを指定しなくても角丸は適用される。また、マウスオーバー時にタブの色が濃くなるように「a:hover」で背景色を指定した【4-4】。
【4-1】コンテンツが入るボックス要素とくっつけることでタブを表現
【4-2】タブに入る文字を<a>で囲む
【4-3】左上と右上のみ角丸指定をしているので、底辺はそのまま直角になる
【4-4】色を変えると操作感がアップする
05
次に上左右の半径の値を変えて、右側だけ大きくカーブを描いたタブをつくってみる【5-1】。この場合はタブの高さに合わせて、右上の半径の値を指定した【5-2】。
このように、これまでは画像を必要としていたデザインも、border-radiusを使用すると簡単に実装することができる。
【5-1】このような凝ったかたちのタブを表現することも可能
【5-2】やわらかい印象にするために左上にも若干丸みを持たせた
06
ボックス要素のborderの種類を破線や点 線、二重線などに変えても角丸は適用さ れるので、効果的に使ってみたい。 ブラウザによって角の部分の点線がつな がったようになってしまうなど、表示が若 干異なる場合があるので注意しよう 【6-1】。
【6-1】上からFirefox、Safari、Google Chrome
＞＞目次に戻る
