creatersnest125

デザインの幅が広がる!CSS3で角丸を表現できるようになろう!


昔のWebデザインでは、角丸を表現するのに画像を利用したCSSが使われていました。
そのため、たった1pxのずれでも目立つので、修正に大変手間がかかっていたものです。

しかし昨今のCSS3では、画像を使わずに角丸ができるようになったのは画期的です!
さまざまなサイトをみていると、タブが丸みをおびていたり、
コメントや吹き出しなどもやわらかな印象を与えてくれますね。

角丸を使って、オリジナリティのあるWebサイトを作りましょう。

とにかく角を丸くしてみよう

まず、下のHTMLとCSSファイルを用意します。

[sample.html] [style.css] このsample.htmlをブラウザー(今回はChromeを使用)で表示すると、このような状態です。

ブラウザーで表示されたP要素

当たり前ですが角は丸くありませんね。

角を丸くするには、cssにborder-radiusというプロパティを使います。

このプロパティで、角丸の半径の値を指定します。
値は「20px」のようにピクセルで表します。

style.cssを開き、p要素の最後のほうに追加して上書き保存をしましょう。

再度sample.htmlを開く、または更新してみましょう。

全てのコーナーが20pxの角丸に

どうでしょう。簡単ですね!

この角丸の半径を視覚化してみると、下の図のような感じです。

全ての角丸と半径の関係

指定した半径でできた円の弧が、角丸になっているのがわかりますね。

コーナーそれぞれの角丸サイズを変えてみよう

上記の説明では、すべてのコーナーが同じサイズの角丸になりますが、
それぞれ違うサイズの角丸にすることもできます。

コーナーごとに指定する方法は、2通りあります。

それぞれのプロパティで指定する

各コーナーを表すプロパティは以下の通りです。

左上:border-top-left-radius
右上:border-top-right-radius
右下:border-bottom-right-radius
左下:border-bottom-left-radius

例として、最初に使用したstyle.cssを変更してみましょう。
border-radiusを入れている1行のみ変更します。

sample.htmlをブラウザーで確認すると、

左上だけが角丸になっている矩形

左上のコーナーが20pxの角丸になっていることが確認できますね。

それぞれのプロパティでも試してみましょう。
style.cssのソースを、さきほど変更した下に追加していきます。

sample.htmlで確認すると、

全てのコーナーが違うサイズの角丸矩形

各コーナーが違うサイズの丸みがついているのがわかります。

border-radiusで値を一括指定する

border-radiusで、値を一度に指定することもできます。
border-radius:左上 右上 右下 左下;という順序になります。
(値同士の間は半角スペース)

一括指定した角丸の説明

図のように値の順序に決まりがあるので、点線の流れで覚えるとわかりやすいです。
もし角丸に指定しないコーナーがある場合は「0」にします。(例:20px 0 15px 50px)

ちなみに、値を2つだけ指定すると「左上と右下 右上と左下」、
3つ指定すると「左上 右上と左下 右上」という指定になります。
どのように表示されるかは、ご自身でぜひ試してみてくださいね。

その他の指定方法も見てみよう

他にも値の指定する方法があります。
指定の仕方にバリエーションがあると、応用として使えます。

値をパーセント(%)で指定する

ピクセルで指定するのではなく、パーセント(%)を使って指定することもできます。

幅と高さそれぞれにパーセント値を掛けた結果がそれぞれの半径となり、
長方形を元にした場合は楕円の角丸になります。

style.cssを変更して試してみましょう。

sample.htmlを確認してみると、

角丸が楕円の矩形

角丸の部分が、楕円の円弧になっているのがわかりますね。

では、思い切ってborder-radiusを100%にしてみるとどうなるでしょうか。
style.cssのborder-radiusを100%にして上書き保存します。

sample.htmlを確認してみると、

きれいな楕円になった矩形

どうでしょう!まるで図形のような楕円形ができました。
これを、幅・高さが同じ要素に対して行うと、正円を描くこともできます。

正円になった矩形

 

楕円の角丸にする指定方法(スラッシュの利用)

パーセント指定のところで角丸を楕円にしてみましたが、
もちろん水平方向(幅)、垂直方向(高さ)ごとにそれぞれ半径の違う指定を
することができます。

border-radius:水平方向 / 垂直方向;という指定で行います。

style.cssを下のように変更します。

sample.htmlを確認すると、

スラッシュを使った角丸矩形

水平方向(幅)に対しては小さく、
垂直方向(高さ)に対しては大きな角丸になりましたね。
もちろんこの指定でもそれぞれのコーナーごとに指定することも可能です。

例)border-radius:20% 10% 0 50% / 100% 50% 0 20%;

まとめ

border-radiusはこれまで、まだ実装されていないブラウザーに対して
「ベンダープレフィックス」をつける(-moz-や-webkit-など)必要があると
言われてきましたが、昨今の最新ブラウザーではほとんどが対応しているようです。

逆に、ベンダープレフィックスをつけると認識されないこともあるので
気をつけましょう。

今回はp要素を使って試しましたが、div要素やul・li要素、table要素などでも
角丸を指定できますので、オリジナルの表現を見つけてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article写真が動く!?Photoshopでシネマグラフを作る方法