ウェブデザインでは、魅力的な視覚効果が全体の印象を左右します。魅力的で記憶に残るユーザー体験を生み出す上で、画像の存在は決して無視できません。

それでは、普通の画像から魅力を引き出すにはどうすればいいのでしょうか？そこで登場するのが、画像のスタイリング、つまりCSSです。CSSのパワーを自在に操ることで、創造力を解き放ち、画像を印象に残る要素に大変身させることができます。

この記事では、CSSを用いた画像スタイリングのポイントをご紹介します。ウェブデザインのスキルを次のレベルへと引き上げるコツや例に迫ります。

HTMLで画像を追加する方法

画像をスタイリングする前に、まずHTMLドキュメントに画像を追加する必要があります。これには、<img>タグを使います。<img>タグは空要素（他に閉じタグを必要としません）です。src属性があり、表示したい画像のURLまたはファイルパスを指定します。

<img src="image.jpg" alt="Description of the image">

画像の絶対URLや相対ファイルパスを指定することができます。

<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">

alt属性は代替テキストと呼ばれています。アクセシビリティに不可欠です。<img>タグには、オプションとして二つの属性も付与できます。widthとheightです。これらの属性で、画像のサイズをピクセル単位で指定できます。

<img src="image.jpg" alt="Description of the image" width="300" height="200">

しかし、特定の画像サイズを維持する特別な必要がない限り、widthとheight属性の使用は避けるのが一般的です。代わりに、CSSを使って画像の大きさを制御することができ、これにより、レスポンシブデザインが可能になります。

img {
  height: 200px;
  width: 700px;
}

レスポンシブ画像のスタイリング

width ・height属性で特定の値を適用すると、画像が歪むなど、望ましくない結果を招く可能性があります。特に、指定されたサイズが画像の元の縦横比と一致しない場合に問題となります。

画像がゆがんで表示されている
画像がゆがんで表示されている

このような問題を回避し、画像の適切な比率を維持するために、画像のレスポンシブスタイルが効果を発揮します。画像をレスポンシブ対応にすることで、あらゆるスクリーンサイズに応じてきれいに表示することができます。これはレスポンシブウェブデザインにとって非常に重要です。

レスポンシブ化には、画像の最大幅を制限するmax-widthプロパティを使用できます。

img {
  max-width: 100%;
  height: auto;
}
レスポンシブにした画像
レスポンシブにした画像

また、メディアクエリを使えば、さまざまなデバイスの種類に応じて画像のスタイルを変更することができます。画面サイズや向き、その他の機能に基づいて特定のCSSルールを適用可能です。例えば、以下のようになります。

@media screen and (max-width: 600px) {
  .my-image {
    max-width: 50%;
  }
}

object-fitを使用し縦横比を維持し縮小を避ける

画像に特定の幅と高さを指定するケースがあります。そのような場合には、object-fitプロパティを利用して、指定したサイズ内での画像の動作を制御することができます。

object-fitプロパティを使うことで、画像の縦横比を維持しながら親要素内に収まるように指定可能です。このプロパティは、次のような複数の値を取ることができます。

  • fill：この値は、画像を伸ばしたり縮めたりしてコンテナにぴったり合わせるもので、歪みを引き起こす可能性があります。
  • contain：この値は、アスペクト比を維持したまま、切り抜きなしでコンテナ内に収まるように画像を比例的に拡大縮小します。画像全体がコンテナ内で見えるようにするため、必然的に空白ができる可能性があります。
  • cover：この値は、アスペクト比を維持したまま、コンテナを覆うように画像を比例して拡大縮小します。コンテナ全体を確実に埋めるために、画像の端が切り取られる可能性があります。
  • none：この値は、縮小や拡大、切り抜きなどを適用せず、画像は元のサイズを維持します。そのため、コンテナからはみ出す可能性があります。
一般的なobject-fitの例
一般的なobject-fitの例

以下は、 object-fitプロパティの使用例です。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

CSSで角丸画像を作る

画像に角を丸くすることで、よりソフトで魅力的な画像にすることができます。

CSSでは、border-radiusプロパティを画像に適用することで、この効果が得られます。

角丸画像の作り方は以下の通りです。

img {
  border-radius: 10px;
}

上の例では、border-radiusプロパティを10pxに設定しています。この値をお好みで調整し、角の丸みをコントロールできます。remやパーセンテージといった単位を使用できます。

角丸画像
角丸画像

CSSで円形画像を作る

画像を完全な円形にするには、border-radiusプロパティを用いながら、幅と高さを同じ数値にします。

円形画像を作成する具体的な方法は以下の通りです。

img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

上の例では、border-radiusプロパティを50%に設定することで、画像の幅または高さの半分にまで曲線を適用し、円形を作成しています。

clip-path属性も使うことができます。これは、要素のクリッピングパスを定義し、特別な形状を作成するのに便利です。

以下は画像を円形に切り抜く例です。

img {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
}

CSSで画像を中央に配置する

画像をコンテナの中央に配置するのは、ウェブデザインでは一般的です。これを実現する方法はたくさんあります。1つは、画像のdisplayプロパティをblock に設定し、margin: 0 autoを適用することで、画像をコンテナ内で（水平方向を基準に）中央に配置することができます。

img {
  display: block;
  margin: 0 auto;
  width: 700px;
}
画像が中央に配置されている
画像が中央に配置されている

CSSで透過画像を作成する

CSSを使って、画像に透過効果を適用することができます。opacityプロパティを使用すると、画像を含む要素の透明度を制御可能です。

1は完全に不透明であること（つまり「完全に見える」状態）を表し、0は完全な透明（つまり「見えない/透明」）を表します。

img {
  opacity: 0.5;
}

上のコードでの画像の不透明度は0.5に設定されており、半透明になっています。希望の透明度になるように不透明度の値を調整できます。

画像の透明度（不透明度）を調整した結果
画像の透明度（不透明度）を調整した結果

画像にテキストを配置する

画像上にテキストを配置すると、視覚的に魅力的で情報量の多いデザインを作成できます。画像の上にテキストを配置するには、CSSポジショニングとz-indexを組み合わせて使用します。

以下はその例です。

 // HTML
<div class="image-container">
  <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="ボストンの町並み" >
  <div class="image-text">Kinstaにようこそ</div>
</div>

// CSS
.image-container {
  position: relative;
}


.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

上のコードでは、image-container divが、画像とテキストオーバーレイの両方のコンテナという役割を果たしています。position: relativeプロパティがコンテナに適用され、位置決めの基準として機能します。次に、image-textクラス、position: absoluteを使用してコンテナ内のテキストの配置を決めます。この際に、top、left、transformプロパティにより中央が指定されています。z-indexプロパティにより、テキストが画像上に表示され、さらに色、フォントサイズ、フォントウェイトでテキストの外観をカスタマイズしています。

色やフォントサイズ、フォントの太さなどで外観を自由に調整可能です。

画像の反転ミラー効果を作成する

画像を反転させることで、ウェブデザインに面白い視覚的要素を加えることができます。鏡面効果を作りたい場合でも、画像を垂直方向や水平方向に反転させたい場合でも、CSSにはこの効果を実現する簡単な仕組みが用意されています。

水平方向の反転

画像を水平方向に反転させるには、transformプロパティとscaleX()関数を使用します。scaleX(-1)により、画像を水平方向に反転させることができます。

img {
  transform: scaleX(-1);
}

垂直方向の反転

画像を垂直方向に反転させるには、transformプロパティをscaleY()関数とともに使います。scaleY(-1)を指定すると、画像が縦軸方向に反転します。

img {
  transform: scaleY(-1);
}

斜め方向の反転

斜め方向に反転させるには、transform プロパティにscaleX()関数とscaleY()関数を組み合わせます。

img {
  transform: scaleX(-1) scaleY(-1);
}

上のコードでは、画像が水平方向と垂直方向の両方で反転します。

水平、垂直、斜めの画像反転
水平、垂直、斜めの画像反転

画像にフィルタを適用する

フィルタは画像の見た目を変え、特別な視覚効果を作り出すことができます。CSSには、画像に適用できるさまざまなフィルタプロパティが用意されており、明るさ、コントラスト、彩度などを調整可能です。

画像にフィルタを適用するには、filterプロパティを使います。このプロパティはさまざまなフィルタ関数を受け付け、それぞれ画像の要素を変更します。

img {
  filter: brightness(150%);
}

上のコードでは、brightness(150%)関数を画像に適用しています。これにより、画像の明るさが150%増加します。

よく使われるフィルタ関数

よく使われるフィルタ関数を紹介します。

  • brightness()：画像の明るさを調整
  • contrast()：画像のコントラストを調整
  • saturate()：画像の彩度を変更
  • grayscale()：画像をグレースケールに変換。
  • blur()：画像にぼかし効果を加える
  • sepia()：画像にセピア調の効果をかける

さまざまなフィルタ機能や値を試して、好みの視覚効果を実現することができます。また、複数のフィルタを組み合わせることで、より複雑な調整を行うことが可能です。

画像にホバーオーバーレイを追加する

画像上のホバーオーバーレイは、ウェブサイトにインタラクティブかつ視覚的な面白さを追加するのに便利です。画像上のカーソルに反応する、カラーオーバーレイやテキストキャプションなどのオーバーレイ効果を適用できます。

CSSには、ホバーオーバーレイを実装するテクニックが豊富に用意されています。要素の特定のプロパティを対象とし、画像にカーソルが重なった時の変化をスムーズに実装できます。

// HTML
<div class="image-container">
  <img src="image.jpg" alt="Description of the image">
  <div class="overlay"></div>
</div>

// CSS
.image-container {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
  opacity: 1;
}

上のコードでは、.image-container要素が画像と.overlay要素をラップしています。オーバーレイは最初は透明（opacity: 0）で、画像全体を覆います。.image-containerにカーソルを合わせると、.overlayの不透明度が1になり、オーバーレイの色が表示されます。

background-colorと不透明度のプロパティを調整することで、オーバーレイをカスタマイズできます。

まとめ

CSSを使って画像をスタイリングすることで、創造性が広がり、ウェブページに視覚的な魅力を追加したり、インタラクティブ性を高めたりすることができます。

なお、CSSで画像をスタイリングする際には、アクセシビリティ、応答性、パフォーマンスを常に念頭に置くようにしてください。

あなたが最もよく使うCSS画像スタイルは何ですか？または、最も興味のあるものはどれでしょうか？以下のコメント欄でお聞かせください。

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.