[18-1] 要素を角丸にしよう(border-radius)

最終更新日:2017年10月18日  (初回投稿日:2011年07月25日)

今回から数回に渡って、CSS3 の新しいプロパティを使ってみましょう。
まずは、要素の角を「角丸」にする border-radiusプロパティです。

CSSプロパティ border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
参考:CSS Backgrounds and Borders Module Level 3 | 5.1. Curve Radii: the ‘border-radius’ properties
本日のINDEX
  1. CSS の新しいプロパティで装飾したサンプルファイル
  2. 角丸を指定する box-shadowプロパティ
    1. 正円は、border-radius:50% で簡単に
    2. 4つの角を別々に指定する事もできます
    3. 角丸は一部だけにする事もOK
    4. 角丸は正円でなく楕円でもOK
  3. 角丸にしたい角だけを指定するプロパティ

2017年10月:サンプルファイルを変更しました。それに伴い本文も編集しました。

2015年02月:1つの角だけ丸くするプロパティが抜けていましたので追加しました。
● 2015年02月:この記事には ベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、もう不要と判断し記事から削除しました。

CSS の新しいプロパティで装飾したサンプルファイル

前回までの [17-1] 〜 [17-6] までで時々登場したサンプルファイルとほぼ同じ HTMLで、 CSSだけ変えてみたサンプルです。
(クリックで別ウィンドウでサンプルが開きます)

このサンプルでは、CSSの「角丸ボックス」「ボックスシャドウ」「テキストシャドウ」「線形グラデーション」「円形(放射状)グラデーション」を使っています。

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

角丸を指定する box-shadowプロパティ

サンプルファイルでは、グローバル・ナビゲーション部分の <ul>要素や、 <section>要素、<aside>要素に、角丸の指定をしています。

サンプルのCSSはこんなかんじ。ここでは角丸の半径を12pxにしています。

article > section, aside {
	border:1px solid #ddd;
	border-radius:12px;
	box-shadow:0 2px 5px #eee
	}

角丸は、
border-radius: 数値(単位付き)
border-radius: パーセンテージ(要素の幅や高さに対する)

が基本形です。
「数値」や「パーセンテージ」は、半径 です。
「数値」での単位は、px(ピクセル)、em、rem などが使えます。
「パーセンテージ」は、要素自身の幅や高さに対してのパーセンテージです。

正円は、border-radius:50% で簡単に

1辺に対するパーセンテージを「50%」にすれば、楕円形が簡単にできます。

%指定でキレイな楕円形が簡単に!
#sample {
    border-radius:50%;
}

要素の幅と高さ、どちらに対しても50%の半径という指定です。

ボックスを正方形にすれば、正円も簡単。

正円
#sample {
    background-color:#aec3ee;
    margin:1em 0px;
    line-height:100px; /*高さの指定(テキストを上下のセンターにできます)*/
    width:100px;       /*幅の指定です*/
    text-align:center;
    border-radius:50%
}

サンプルファイルでは、見出し要素 <h3> のアタマに装飾として正円を置いています。

#mainContent h3::before {
	content:"";
	display:inline-block;
	vertical-align:text-top;
	width:1.2em;  /*幅の指定です*/
	height:1.2em; /*高さの指定*/
	margin-right:.1em;
	border-radius:50%; /*正円に*/
	/*以下略*/
}

ここでは、疑似要素「::before」を使っています。
擬似要素「::before」や「::after」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

こうして生成したコンテンツを、border-radius:50%で正円にして、display:inline-block で <h3>内のテキストと並べています。

CSSの「円形グラデーション」を使って 二重丸にしていますが、この解説は [18-4] で。

4つの角を別々に指定する事もできます

4つの角を別々に指定できます。

4つの角を異なる半径で指定

CSSの指定はこのようになります。

#sample {
	border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;
}

ピクセルの指定が「10px 20px 30px 40px / 10px 20px 30px 40px」と、8個並んでます。
これは、まず水平方向の半径を、左上から時計回りに指定して、
「/(スラッシュ)」で区切り、次に垂直方向の半径を同じく左上から時計回りにしています。

角丸は一部だけにする事もOK

角を丸くしたくない部分だけ「半径 = 0」にすれば、一部だけ角丸も可能です。

左上だけ角丸〜
#sample {
	border-radius:30px 0 0 0 / 30px 0 0 0;
}
下だけ角丸〜
#sample {
	border-radius:0 0 30px 30px / 0 0 30px 30px;
}

「/(スラッシュ)」の前後が同じなら、同じコトを2回書かずに、省略して書くこともできます。

#sample {
	border-radius: 0 0 30px 30px;
}

角丸は正円でなく楕円でもOK

水平方向と垂直方向の半径を別々に指定するので、楕円でもいいわけですよ。
(まー、楕円の角丸はちょっとイビツで、あまり使わないかもですけど。)

角丸を楕円に
#sample {
	border-radius: 10px 20px 30px 40px / 20px 30px 20px 20px;
}

図説するとこういう事になってます。

角丸にしたい角だけを指定するプロパティ

楕円で角丸を指定することは、まず無いですよね。
正円での指定なら、4つの角それぞれを指定するプロパティもあります。

左上の角だけ正円にする = border-top-left-radiusプロパティ
右上の角だけ正円にする = border-top-right-radiusプロパティ
右下の角だけ正円にする = border-bottom-right-radiusプロパティ
左下の角だけ正円にする = border-bottom-left-radiusプロパティ

右上だけ角丸〜
#sample {
	border-top-right-radius:30px;
}
左だけ角丸〜
#sample {
	border-bottom-left-radius:30px;
    border-top-left-radius:30px;
}

こっちのほうが、数字の羅列が無い
ですが、2つ以上の角を丸くするときは、プロパティを複数書かなきゃなので、 border-radiusプロパティのほうがラクな場合もあります。
ケースバイケースで使い分けよう。

次回予告

いかがでしたか? 意外に簡単に角丸指定できちゃいますね。
このプロパティができる前は、角丸の画像を背景に貼っていたので、とても便利!

次回はCSSで、ボックスにシャドウをつけてみましょう。
これも簡単で、とっても便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スライドショーで使用しました

初めまして。
楕円形のCSSで、スライドショーを作りました。
簡単なスライドなのに、形が丸くなると、すごく新鮮で驚きました。

またいろいろと勉強しに伺います。
よろしくお願いします。

Re: スライドショーで使用しました

千田さん。コメントありがとうございます!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.