HPBUILD

Webサイトに画像を載せるだけでは、少し物足りなく感じることもありますよね。 CSSを使えば、画像にちょっとした装飾を加えて、ぐっと見栄えを良くすることができます。 画像を丸く切り抜く プロフィール画像やアイコンなどに使えます。 .circle-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; } 画像に影をつける 浮き上がったような立体感が出せます。 .shadow-img { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 画像に枠線をつける 全体のデザインにメリハリが出ます。 .border-img { border: 3px solid #3498db; padding: 4px; background-color: #fff; } 応用：丸くて影付きの画像 複数の装飾を組み合わせることもできます。 .circle-shadow-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } まとめ CSSの装飾は、画像の印象をぐっと引き立ててくれます。 ユーザーの目を引きたいときや、写真をきれいに見せたいときに、ぜひ試してみてください！

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だけで見た目を整えることができます。ぜひ試してみてください！ 次回は「ホバーで画像がふわっと拡大するアニメーション」など、動きを加えるテクニックも紹介予定です！