[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。

CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。

サイトのキャプチャ

Time-saving CSS techniques to create responsive images
by Adrien Zaganelli


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

画像に適した方法で実装しよう

今、金曜日の17時だとします。あなたは仕事を終わらされなければなりません。しかし、手元にある画像はレイアウトに適していません。
そんな時に使えるCSSのテクニックがあります!

よく知られたテクニックで、一度は試したことがあるでしょう。
しかしこの方法は、最適ではありません。

画像を配置するのにbackgroundプロパティを使用するのは非常に便利で、もちろん機能します。ただし、コンテンツではない画像やテキストを置換する画像など特定の場合にのみ適した実装方法であることを忘れないでください。

画像を配置するこれからのテクニック

backgroundプロパティのようなテクニックが、img要素でも利用できるとしたら便利だと思いませんか?
そこでobject-fitプロパティの登場です! 画像だけでなく、動画にも利用できます。

これで先ほどと同じようになります。
ポイントはobject-fitプロパティに「cover」を指定するだけです。

注意点は何かありますか?

残念ながら、object-fitはIEやSafariの古いバージョンでは機能しませんが、ポリフィルが利用できます。

object-fitのサポートブラウザ

object-fitのサポートブラウザ

実際の動作は、下記デモをご覧ください。

See the Pen Responsive images #2 by Adrien Zaganelli (@adri_zag) on CodePen.

IEでも機能する、Netflixで使用されているテクニック

IEで機能しないテクニックは使えないと思うかもしれません。心配しないでください、次に紹介するテクニックはIEでも機能し、私のお気に入りです。

親要素のpaddingプロパティに画像の比率をパーセントで定義し、子要素である画像には「position: absolute;」にしてサイズを100%で指定します。
参考: How To - Aspect Ratio

少し複雑に見えますか?
コンセプトを一度理解すれば、このテクニックはシンプルで簡単です。Netflixをはじめ、広く使用されています。

Netflixで使用されているコード

Netflixで使用されているコード

実際の動作は、下記デモをご覧ください。

See the Pen Responsive images #3 by Adrien Zaganelli (@adri_zag) on CodePen.

簡単な方法

あなたはすでにこれを知っているかもしれません。

レイアウトがあまり複雑でないなら、ほとんどの場合に機能します。

See the Pen Responsive images #4 by Adrien Zaganelli (@adri_zag) on CodePen.

パフォーマンスを考慮した方法(上級)

パフォーマンスとは、ロード時間を意味します。例えば大きなヒーローイメージはパフォーマンスを台無しにして、特にスマホでページ表示をゆっくりと感じさせます。

最近のモダンブラウザでは、ページの幅に応じて画像のソースを変更できることを知っていますか? srcsetはそのためにできました。
参考: srcsetのサポートブラウザ

画像を配置する際、<img>はHTML5の<picture>タグと組み合わせることができます。

実際の動作は、下記デモをご覧ください。

See the Pen Responsive images #5 by Adrien Zaganelli (@adri_zag) on CodePen.

レスポンシブ対応の画像を実装する時の流れ

  1. 画像がコンテンツの一部でない場合は、「background-image」を使用する。
  2. IEを気にしない場合は、「object-fit」が便利。
  3. Netflixで使用されているpadding付きコンテナのテクニックは、IEでも機能します。
  4. ほとんどの場合、CSSで「height: auto;」を記述しておく。
  5. ロード時間を速くしたい場合は、「srcset」を使用するとデバイスに適しいた画像ファイルを読み込みます。

sponsors

top of page

©2018 coliss