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);
}

CSSを使えば、画像にほんの少し手を加えるだけで、デザイン性をぐっと高めることができます。とくにプロフィール写真や製品写真など「見た目の印象が重要」な場面では、これらの装飾が大きな効果を発揮します。

次回は、filterを使った色調補正や、ホバー時のアニメーションといった、さらに発展的なテクニックも紹介していきますのでお楽しみに！