スポンサーリンク

CSSを使って画像を丸く表示する方法

2018年12月19日HTML・CSS

  • 2020年2月23日
    「丸で囲んだ文字」を追記しました。

左の画像(スマホの方は上の画像)は四角い画像をCSSを使って丸く表示させています。

今回はCSSを使って画像をこんな風に丸く表示する方法をご紹介します。

※こちらでスタイシートの書き方を解説していますので参考にしてください。

スポンサーリンク

画像を丸く表示

画像が正方形の場合

画像が正方形なら画像を丸く表示させるのは簡単です。

<img>に『border-radius:50%;』を指定して画像を丸くします。

HTML
<img src="image.png" alt="きらり">
CSS
 img {
    border-radius: 50%;  /*角を丸くする指定*/
    width: 100px;  /*横幅*/
    height: 100px;  /*縦幅*/
}

border-radiusはボックスの角を丸くするものです。
『border-radius:50%;』と指定することで画像を丸く表示することができます。

『width(横幅)』と『height(縦幅)』は同じ大きさにしてください。同じにしないと丸になりません。

画像が長方形の場合

画像が長方形の場合、上のやり方だと縦横比が崩れてしまいます。

➡︎

横長の画像を上記のやり方で丸く表示すると、画像が横に潰れてしまいます。
縦長の画像は上下に潰れてしまうのです。

これはwidthとheightで同じ値を指定し長方形の画像を無理やり正方形にしているためです。

きらり

きらり

widthとheightを長方形のままにするとどうなるんだろう?

画像の横幅と縦幅を変えずにborder-radius:50%;と指定すると、横長の画像は上記のような楕円形になります。
縦長の場合は縦の楕円形になってしまうという訳です。

では次で長方形の画像を縦横比を崩さず丸く表示する方ほを紹介します。

長方形の画像を縦横比を崩さず丸く表示する方法

HTML
<p class="image-circle"></p>

※pではなくdivでもOKです。

CSS
.image-circle {
    background-image:url('Image.png');  /*画像のURL*/
    width:120px;  /*表示する横幅(縦幅と同じ値)*/
    height:120px;  /*表示する縦幅(横幅と同じ値)*/
    border-radius:50%;  /*丸く表示*/
    background-position:center;  /*背景画像の位置*/
}

表示する画像を背景として設定することによって縦横比を維持したまま表示させることができます。

カスタマイズ

カスタマイズという程ではありませんが角丸に表示したり枠線をつけたりすることができるのでご紹介します。

border-radiusの値を変更

上ではborder-radius:50%;と指定して丸く表示させています。
このborder-radiusの値を変えると四角い画像の角を丸くすることができます。

CSSborder-radius: 値 ;

値は数値px(ピクセル)やem(エム)、%(パーセント)で指定してください。(上のサンプルは border-radius:0.5em; と指定しています。)

 指定方法
  • 値1つ・・・・上下左右
  • 値2つ・・・上下 左右
  • 値3つ・・・・上 左右 下
  • 値4つ・・・上 右 下 左

値を変えると こんな風に両端を丸くする こともできます。(これは border-radius:30px; で指定しています。)

枠線を付ける

画像に枠線を付けることができます。

CSSに以下を追加してください。

CSSborder: 線の太さ 線種 色 ;

《指定例》border:2px solid gray;

2020年2月23日 追記

丸で囲んだ文字

画像だけではなく文字を丸く囲むこともできます。

1 ←サンプル

HTML
<span class="circle_moji">1</span>
CSS
/*--------------------
  丸で囲んだ文字
--------------------*/
.circle_moji{
display:inline-block;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ff6893;
    color:white;
    text-align:center;
    line-height:20px;
}

枠線を付ければ 1 こんな風に丸で囲んだ文字もできます。

最後に

四角と丸とでは画像の印象も変わります。

角張った四角より丸みをつけた方が柔らかく感じるのではないでしょうか。
ただし、表示させる画像によっては丸くすると見づらくなる場合もあります。

border-radiusは画像だけではなく、divなどのボックスでも使えます。

四角と丸を使い分けて記事を飾ってみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM