【超基本】CSSで長方形の画像の角を丸くしたり、丸くくり抜いて正円にしてみよう

こんにちは、Webプログラマー見習いのトムです（いつまで見習いなんでしょう＾＾；

さて今回はCSSを使い、Webサイトで頻繁に見かける画像の角を丸くする手法について解説します。単に角を丸くするだけだと面白くないので、画像を丸くくり抜いて正円（真円）に変形させる方法についても併せて解説していきます。

今回のポイント・・・画像の角を丸くするにはborder-radiusを指定する。正円にくり抜くには一工夫が必要

長方形の画像の角を丸くするコード
画像を丸くくり抜いて正円にするコード

長方形の画像の角を丸くするコード

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Image test</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wapper">
    <div class="imagebox-00">
      <h1>元画像</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>

    <div class="imagebox-01">
      <h1>border-radius:50pxを指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>

    <div class="imagebox-02">
      <h1>border-radius:200pxを指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>

    <div class="imagebox-03">
      <h1>border-radius:50%を指定　→　楕円</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>

</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

h1 {
  margin: 20px 0;
}

.wapper {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.imagebox-01 img {
  border-radius: 50px;
}

.imagebox-02 img {
  border-radius: 200px;
}

.imagebox-03 img {
  border-radius: 50%;
}

実行結果

See the Pen Circle_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

元画像のサイズは800×400です。CSSを見て頂ければわかりますが、全て”border-radius”の指定で角を丸くしています。imagebox-01と02は、それぞれ50px、200pxとピクセル(px)指定することで、数字に相当するピクセル数分、角の丸くするエリアの大きさが変化します。ちなみに200px(=画像の縦400pxのちょうど半分)の指定により画像の両サイドは半円の形になります。今回使用した画像ですと200pxを超える数字を指定しても形は変わりません（ピクセル指定ではこれ以上、角は丸められないということです）。

一方、imagebox-03の指定はピクセル指定ではなくパーセント指定です。50%の指定により画像の縦も横も50%の部分（=ちょうど真ん中部分）から角が切り取られ、楕円形になります。「画像を楕円形にしたければ、border-radius:50%に指定」、と覚えておきましょう。

画像を丸くくり抜いて正円にするコード

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Image test</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wapper">
    <div class="imagebox-00">
      <h1>元画像</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>

    <div class="imagebox-04">
      <h1>中心をくり抜いて正円</h1>
      <img src="https://drive.google.com/uc?export=view&id=1SreVAdAYSyrd4ebMd1C6z6EtjeuXaWDl">
      <hr>
    </div>
  </div>

</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

h1 {
  margin: 20px 0;
}

.wapper {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.imagebox-04 img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}

実行結果

See the Pen Circle_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

コードのポイントは以下の通りです。

Widthを400px、heightも400pxを指定し画像を正方形に変形させる（heightは元々400pxですが、widthの指定だけだとheightは画像の縦横比を維持して縮小しますので、heightの指定もしないといけません）
border-radiusに50%を指定する　→　これで正円になります。
object-fit:coverを指定し、表示される画像の縦横比を維持する（800×400という文字の縦横比が元画像から変わっていないことが確認できます）
object-position:center centerで、元画像の真ん中(縦も横もcenter)を変形後の画像の中心にする。

以上により、元画像の真ん中をくり抜いて、正円に変形させることができました。

以上、CSSで長方形の画像の角を丸くしたり、丸くくり抜いて正円にするコードについて解説しました！