CSSを使用した写真の円形表示方法

1. ボーダーラジウスを使用する方法:

   .circle-image {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   overflow: hidden;
   }
   .circle-image img {
   width: 100%;
   height: auto;
   }

   この方法では、.circle-image クラスに border-radius: 50% を設定し、画像を円形に表示します。overflow: hidden は、画像が円形の範囲内に収まるようにするために必要です。

2. マスク画像を使用する方法:

   .circle-image {
   width: 200px;
   height: 200px;
   -webkit-mask-image: url(circle-mask.png); /* マスク画像のパス */
   mask-image: url(circle-mask.png);
   }
   .circle-image img {
   width: 100%;
   height: auto;
   }

   この方法では、.circle-image クラスに -webkit-mask-image と mask-image を設定し、指定したマスク画像を使用して写真を円形にクリップします。マスク画像は透明な円形の形状を持つPNG画像である必要があります。

3. CSSのパディングを使用する方法:

   .circle-image {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   overflow: hidden;
   padding: 10px;
   background-color: white;
   box-sizing: border-box;
   }
   .circle-image img {
   width: 100%;
   height: auto;
   border-radius: 50%;
   }

   この方法では、.circle-image クラスに padding を追加し、円形の境界線を作成します。background-color プロパティを使用して、余白の部分を白色で塗りつぶします。box-sizing: border-box を設定することで、パディングの分だけボックスのサイズが変わらないようにします。

これらの方法を使用すると、CSSを活用して写真を円形で表示することができます。どの方法が最適かは、デザインの要件や好みによって異なる場合があります。