HPBUILD

プロフィール画像やアイコンを丸く表示したいと思ったことはありませんか？ CSSのborder-radiusを使えば、画像を簡単に円形にすることができます。 本記事では、画像を丸く見せるための基本テクニックと、見た目を整えるコツをわかりやすく紹介します。 border-radiusとは？ border-radiusは、HTML要素の角を丸くするための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;で画像を歪ませずに中央トリミング 枠線や影をつけて装飾する 円形画像は、見た目が単調になりがちです。borderやbox-shadowを加えると、より目立つデザインになります。 コピー .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); } 影の色や枠線の太さは、サイトの雰囲気に合わせて調整しましょう。 よくある失敗例と対処法 画像が楕円になる → 横幅と高さが不一致のままborder-radius: 50%を適用している可能性があります。正方形にしましょう。 画像が引き伸ばされる → object-fit: cover;を忘れずに指定します。 枠線だけ丸くならない → 親要素でなく<img>タグ自体にborder-radiusをつけてください。 応用：ホバーでアニメーションを加える ユーザーが画像の上にマウスを乗せたときに、少し拡大する演出をつけるとインタラクティブになります。 コピー .circle-image { transition: transform 0.3s ease; } .circle-image:hover { transform: scale(1.05); } ちょっとした動きがあるだけで、より現代的な印象になります。 まとめ border-radius: 50%で画像をまん丸にできる 画像は正方形＋object-fit: coverで整える 枠線や影をつければより洗練されたデザインに ホバーで拡大などの演出も可能 おわりに CSSだけでアイコンやプロフィール画像を美しく丸く表示することができるborder-radiusは、初心者にもおすすめのプロパティです。 Webサイトの印象をぐっとよくしてくれるテクニックなので、ぜひいろいろな場面で活用してみてください。 次回は、「画像の角を少しだけ丸くする方法」や「円形画像に文字を重ねる方法」など、さらに発展的な表現も紹介予定です！