にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像の四隅(角)を丸くするCSS [イメージ]

ウェブ上に画像を掲載する場合、その画像の形は四角(長方形か正方形)です。でも、画像の角を落として四隅を丸くした状態で画像を表示したいと思うこともありそうです。SNSのプロフィール画像なんかでもよくありますよね。アップロードした画像は四角でも、実際の表示は丸形になっているという例が。

画像の角を丸くしたいときには、わざわざ画像の四隅を透過色で塗ってPNG/GIF形式の画像として作る必要はありません。スタイルシートを使えば、画像側を加工することなく画像の四隅を丸くする(角丸にする)こともできます。

画像の四隅を丸くした表示例

例えば、下記のような川の写真の四隅(角)を丸く表示したいとします。

元の画像:
写真

ちょっとだけ四隅を丸くした例は以下の通りです。

ちょっと角丸:
写真

完全に四隅を丸くした場合は以下の通りです。

もっと丸く:
写真

上記のどちらの例も、画像そのものを加工しているわけではありません。ただスタイルシートを適用することで、画像の四隅を丸く表示させています。

画像の四隅(角)を丸くするためのスタイルシート

画像の四隅を丸くするスタイルシートは、とても簡単です。
ボックスの枠線の角を丸くする際に使うborder-radiusプロパティを、画像(img要素)に対して適用するだけです。

例えば以下のようにCSSソースを記述します。

img {
	border-radius: 30px;
}

このように書くだけで、あらゆる画像の角が「半径30ピクセル」で丸くなります。
もちろん、ウェブページ上のすべての画像の角を一括で丸くしたくはないでしょうから、実際に使う際にはclass名を付加するなり何らかの方法で対象を限定する必要がありますが。

例えば、6個の画像を以下のようなHTMLソースで表示している場合、

<p class="sample1">
	<img src="photo1.jpg" alt="写真1">
	<img src="photo2.jpg" alt="写真2">
	<img src="photo3.jpg" alt="写真3">
</p>
<p class="sample2">
	<img src="photo4.jpg" alt="写真4">
	<img src="photo5.jpg" alt="写真5">
	<img src="photo6.jpg" alt="写真6">
</p>

以下のようにCSSソースを書くことで、画像1~3はちょっとだけ角丸に、画像4~6は完全に(?)側面を丸くできます。

p.sample1 img {
	border-radius: 35px; /* ちょっとだけ角丸 */
}
p.sample2 img {
	border-radius: 130px; /* 大きく角丸 */
}

このように、border-radiusプロパティは、border(枠線)を引いていない場合でも適用可能です。もちろん、borderプロパティを使って枠線を付加すれば、枠線と中身の両方が同じように角丸になります。

備考:画像に枠線を加えた上で、線も画像も四隅(角)を丸くする例

画像に枠線を加えた上で、線と画像の両方の角を丸くすると以下のように見せられます。

枠線付きの画像の角を丸くする例1:
写真

枠線付きの画像の角を丸くする例2:
写真

枠線付きの画像の角を丸くする例3:
写真

なお、画像に枠線を付加する方法については別の記事で解説します。

■関連記事:

《2016/04/01 11:07 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---