[18-1] CSS3で、ボックス要素を角丸にしよう(border-radius)

1つの角だけ丸くするCSSプロパティ
border-top(またはbottom)-left(またはright)-radius が抜けていましたので追加しました。

(この↑リンクをクリックして記事内を移動できます。)
例えば右上だけ半径10pxの角丸にしたいなら border-top-right-radius:10px; でOK。

また、この記事にはベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、 border-radiusプロパティにはもう不要ですので記事からすべて削除しました。(2015年2月追記)

前回までのHTML5で作ったサンプルを、CSS3で見た目をブラッシュアップしていきましょう。
今日は、ボックス要素の角を「角丸」にしてみよう。(border-radius は IE8までは未対応です)

CSSプロパティ border-radius

本日のサンプルのダウンロードはこちら

★左のサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample18set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

角丸の指定をしよう

サンプルではこのように、
<header><nav><article><aside><footer>や h1、h2要素などのブロックに角丸の指定をしています。

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

header, article, aside, nav, footer, header h2, article h1, aside h1 {
	border-radius: 10px;
}

ここでは角丸の半径を10pxにしています。
前にグラデーションのところで、「moz(mozilla)系」と「webkit系」のブラウザがあると紹介していますが、ここではOperaのベンダープレフィックスも加えています。
ベンダープレフィックスの後に標準型を書きます(5行目)。

正円にすることもできます。
ボックスを正方形にして、1辺の半分のサイズを半径として指定すれば、まんまるになるわけです。

article h1 div#ball{
	width:26px;
	height:26px;
    border-radius:13px;
}

ここでは、26pxの正方形に半径13pxの角丸を指定しています。
下記↓のパーセント指定なら border-radius:50%; にするだけ。計算不要でもっと簡単です。

数値でなくパーセント(%)でも指定できます

1辺に対するパーセンテージで指定する事もできます。

%指定でキレイな楕円形が簡単に!

上のサンプルのCSSの指定はこれ。

#samp1 {
    border-radius:50%;
}

水平方向の辺と垂直方向の辺、どちらに対しても50%の半径という指定ですから、このように長方形はキレイな楕円になります。(正方形は正円に。)
正円や楕円形を作る時は、この50%の指定のほうが手っ取り早いですね。

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

どの角も同じ半径の円で指定するだけでなく、4つの角を別々に指定する事もできます。

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

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

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

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

図説するとこういう事です。

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

こんなことや、

下だけ角丸〜

こんなこともできます。

左上だけ角丸〜

いずれも、角を丸くしたくない部分だけ「半径 = 0px」にしてやればいいっていう理屈です。
たとえば、最初の「下だけ角丸〜」のCSSは下記のとおりです。

#samp3 {
	border-radius: 0 0 30px 30px / 0 0 30px 30px;
}

半径が同じで正円なら、同じコトを2回書かずに、下記のように省略して書くこともできます。

#samp3 {
	border-radius: 0 0 30px 30px;  /*「下だけ角丸〜」はコレでOK*/
}

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

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

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

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


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

border-top(またはbottom)-left(またはright)-radiusでもっと簡単に

楕円で角丸を指定することは、まず無いよね。
正円で指定するなら、角丸にしたい角だけを指定するシンプルな方法もあります。

これは半径30pxにした例です。
左上の角だけ丸くする = border-top-left-radius:30px;
右上の角だけ丸くする = border-top-right-radius:30px;
右下の角だけ丸くする = border-bottom-right-radius:30px;
左下の角だけ丸くする = border-bottom-left-radius:30px;

こっちのほうが、数字の羅列が無くて、シンプルで編集しやすいですね。

上だけ角丸〜
左だけ角丸〜

「左だけ角丸〜」のCSSソースです。

#samp4 {
	/*左下の指定*/
	border-bottom-left-radius:30px;
	/*左うえの指定*/
	border-top-left-radius:30px;
}

CSSソースを見ていただいてわかるように、2つ以上の角を角丸にしたい場合は、このプロパティは角の数だけ書くことになります。上の「数字の羅列」のプロパティだと1行で済むので、私は羅列のほうをよく使います。まあ好みの問題です(笑)。

次回予告

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

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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

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

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

千田さん。コメントありがとうございます!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.