Webページでプロフィール画像やアイコンを円形にしたいと思ったことはありませんか？ 実はCSSのborder-radiusを使えば、かんたんに実現できます。この記事では、初心者の方にもわかりやすく、画像を丸く表示する方法を解説します。 border-radiusとは？ border-radiusは、要素の角を丸くするCSSプロパティです。画像に使用すると、角のない「丸い見た目」を作ることができます。 画像を円形にする基本 以下のように、画像に対してborder-radius: 50%;を指定すると、正方形の画像がまんまるに表示されます。 コピー <img src="example.jpg" class="circle-image" alt="サンプル画像"> コピー .circle-image { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } ポイント解説 widthとheightは同じ値にして「正方形」にすること border-radius: 50%で完全な円形に object-fit: coverで画像が引き伸ばされず中央でトリミングされる 応用：枠線や影をつける より目立たせたいときは、枠線や影を追加してみましょう。 コピー .circle-image { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.2); } よくあるミス 画像の縦横サイズが異なる → 楕円になる object-fitを指定しない → 画像が引き伸ばされることがある おわりに 円形画像は、プロフィールやチーム紹介ページなどでよく使われます。 border-radiusを活用すれば、CSSだけで見た目を整えることができます。ぜひ試してみてください！ 次回は「ホバーで画像がふわっと拡大するアニメーション」など、動きを加えるテクニックも紹介予定です！
