CSSを使用して画像を円形にする方法


  1. border-radiusを使用する方法:

    .circle-image {
    border-radius: 50%;
    }

    この方法では、画像の要素にcircle-imageというクラスを追加し、そのクラスに対してborder-radiusプロパティを50%に設定します。これにより、画像が円形に表示されます。

  2. clip-pathを使用する方法:

    .circle-image {
    clip-path: circle(50% at center);
    }

    この方法では、clip-pathプロパティを使用して円形のクリッピングパスを作成します。circle()関数を使用し、半径を50%に設定します。at centerは、クリッピングの中心を要素の中心に配置するための指示です。

  3. サイズと位置を調整する方法:

    .circle-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    }

    この方法では、widthheightプロパティを使用して画像のサイズを指定します。object-fit: cover;は、画像を要素にフィットさせるための指示です。また、border-radiusプロパティを50%に設定することで、円形に表示されます。

これらの方法を試して、画像を円形に表示することができます。適切な方法を選択し、デザインに合わせてスタイルを調整してください。