HPBUILD

Webサイトに画像を載せるだけだと、ちょっと物足りなく感じることってありませんか？ そんなときに役立つのが、CSSによる画像の装飾テクニックです。ほんの少し手を加えるだけで、ぐっと見た目が洗練され、プロっぽく仕上がります。 画像を丸く切り抜く プロフィール画像やスタッフ紹介などでは、丸い写真がよく使われます。border-radius: 50%で簡単に丸くできます。 コピー .circle-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; } 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; } paddingとbackground-colorを組み合わせることで、額縁のような見た目にもできます。 応用：丸くて影付きの画像 複数の装飾を組み合わせれば、より印象的な見せ方ができます。たとえば、丸く切り抜いた上で影を加えた例はこちら。 コピー .circle-shadow-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 初心者が気をつけたいポイント 装飾しすぎない：影・枠・丸形をすべて使うと逆にゴチャつく可能性も 画像サイズを明示：ブラウザのレイアウト崩れ防止のためwidthとheightは明示するのが安心 スマホ表示に対応：レスポンシブ対応としてmax-width: 100%;などの工夫も必要 おわりに CSSを使えば、画像にほんの少し手を加えるだけで、デザイン性をぐっと高めることができます。とくにプロフィール写真や製品写真など「見た目の印象が重要」な場面では、これらの装飾が大きな効果を発揮します。 次回は、filterを使った色調補正や、ホバー時のアニメーションといった、さらに発展的なテクニックも紹介していきますのでお楽しみに！

プロフィール画像やアイコンを丸く表示したいと思ったことはありませんか？ 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サイトの印象をぐっとよくしてくれるテクニックなので、ぜひいろいろな場面で活用してみてください。 次回は、「画像の角を少しだけ丸くする方法」や「円形画像に文字を重ねる方法」など、さらに発展的な表現も紹介予定です！