css 角丸

デザイン五輪書

分かりやすい図解入り!CSSで角丸を設定する方法

読了までの目安時間:約 10分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

分かりやすい図解入り!CSSで角丸を設定する方法

CSSでボックスを角丸にする

角丸でサイトの雰囲気が変わる?!

サイト内のコンテンツの角が直角だと、訪問者にシャープでお堅い印象を与えてしまいます。
サイトにもよるでしょうが、訪問者に柔らかくて優しい印象を与えたい場合、コンテンツの角を角丸に変更するのも良いかもしれません。

角丸が与える印象

そこで今回は、CSSでボックスを角丸に変更する方法をご紹介します。

なお、テーブルの角を丸める場合はコツが必要ですので、CSSでテーブルタグをデザインするをご覧下さい。

▲もくじへ戻る

border-radiusプロパティの設定方法

ボックスの四隅を角丸にするCSS

では早速、ボックスの四隅の角を角丸に変更するCSSを使用してみましょう。
使用するCSSはborder-radiusプロパティです。

border-radius:角丸の半径

HTMLとして、以下を記述します。

<p>角丸を設定する</p>

そして、CSSとして、以下を記述します。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	border:solid 2px #ccc; /* 罫線 */
	border-radius:10px; /* 角丸 */
}

すると、半径10pxで角を丸めた罫線が表示されます。

10pxで角を丸める

「角丸の半径」の数値を変更すると、角丸の丸みも変更されます。

border-radiusの設定

ちなみに、以前は、border-radiusプロパティを使用する際はベンダープレフィックスが必要でしたが、現在は必要ありません。

▲もくじへ戻る

罫線の内側のライン

CSSで角丸の設定を行う際は、罫線の太さを考慮する必要があります。
「角丸の半径」の設定が「罫線の太さ」の設定以下になる場合、罫線の内側のラインが直角になってしまいます。

角丸の罫線の内側のライン

これは一体どう言う事かと言うと、border-radiusプロパティで設定した「角丸の半径」から「罫線の太さ」を引いた残りの長さが、罫線の内側ラインの半径になるのです。

角丸の罫線の内側ラインのサイズ

この値が0以下になった時、罫線の内側ラインが直角になってしまいます。
この点を考慮しつつ、設定を行いましょう。

▲もくじへ戻る

border-radiusプロパティの詳細設定

CSSで四隅の角丸を個別に指定する

border-radiusプロパティは、四隅の角丸の半径を異なる値で指定する事が出来ます。

border-radius:左上の角丸 右上の角丸 右下の角丸 左下の角丸

border-radiusの個別設定

では、実際に先ほど指定したCSSを書き換えて、四隅を異なる値で角丸指定してみましょう。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	border:solid 2px #ccc; /* 罫線 */
	border-radius:10px 25px 5px 15px; /* 角丸 */
}

角丸を個別で指定する

四隅の異なる角丸が作成されました。

▲もくじへ戻る

角丸の個別指定方法の種類

四隅の角丸を個別に指定する方法として、あと二種類の指定方法があります。
合わせて覚えておきましょう。

border-radius:左上の角丸 右上の角丸と左下の角丸 右下の角丸

角丸を個別で指定する方法

これを参考に、CSSを以下のように書き換えます。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	border:solid 2px #ccc; /* 罫線 */
	border-radius:10px 25px 5px; /* 角丸 */
}

すると、角丸が以下のように設定されます。

角丸を個別で指定した結果

もう一つの指定方法は以下のようになっています。

border-radius:左上の角丸と右下の角丸 右上の角丸と左下の角丸

角丸を個別で指定

これを踏まえ、CSSを書き換えます。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	border:solid 2px #ccc; /* 罫線 */
	border-radius:10px 25px; /* 角丸 */
}

すると、四隅の角丸が以下のようになりました。

角丸の個別指定結果

▲もくじへ戻る

border-radiusで楕円形の角丸を指定

楕円形の角丸の指定方法

border-radiusプロパティで作成出来る角丸は、正円形のものだけではありません。
楕円形の角丸を指定する事も出来ます。

楕円形の角丸の指定方法は、角丸の横方向の半径と縦方向の半径を異なる値で設定する事で作成出来ます。

縦横方向の半径

border-radius:横方向の半径 / 縦方向の半径

では、実際にCSSを書き換えて、楕円形の角丸を指定してみましょう。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	border:solid 2px #ccc; /* 罫線 */
	border-radius:10px / 25px; /* 角丸 */
}

すると、楕円形の角丸が表示されました。

楕円形の角丸が設定された

▲もくじへ戻る

border-radiusプロパティが丸くするもの

borderとは言うものの・・・

border-radiusプロパティはborderと言う名が付くものの、実は、罫線の角を丸くしているだけではありません。
罫線だけでは無く、ボックスの角も丸くしてくれています。
ですから、背景や画像の角を丸くしたい用途でborder-radiusプロパティを使用する事も出来るのです。

では実際に、CSSでボックス内の背景に色を付け、更に、罫線の設定を削除してみましょう。

p{
	width:110px; /* 横幅 */
	padding:15px; /* 内側余白 */
	background:#ccc; /* 背景 */
	border-radius:10px / 25px; /* 角丸 */
}

ボックスに罫線が表示されていないにも関わらず、角丸になりました。

border-radiusでボックスの角を丸める

つまり、border-radiusプロパティによってボックスの角が角丸になった事を表しています。

border-radiusプロパティは単に罫線を角丸にするだけでは無く、こうした使用方法もあるのです。
border-radiusプロパティを使いこなせば、例えば、CSSを駆使して絵を描く事だって出来ます。
興味のある方は、スシ食いねェ!border-radiusプロパティで寿司を握る!?をご覧下さい。

▲もくじへ戻る

まとめ

汎用性の高いborder-radiusプロパティ

今回は、CSSでボックスを角丸に変更する方法をご紹介しました。
その適用範囲が罫線に限定されない所がポイントで、border-radiusプロパティの汎用性は広いです。

使い勝手も良いですから、ぜひ、使用方法を覚えて下さい。
ベンダープレフィックスが不要になりましたので、以前と比べれば、随分と覚えやすくなったと思います。

    おさらい
  • 角丸は柔らかくて優しい印象を与える。
  • border-radiusプロパティの指定方法。
  • 角丸の罫線の内側ラインの半径。
  • border-radiusプロパティで四隅の角丸を個別指定する方法。
  • 楕円形の角丸の作成方法。
  • border-radiusプロパティでボックスを角丸にする。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ : 

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る