[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック
Post on:2018年8月28日
何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。
CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。
Time-saving CSS techniques to create responsive images
by Adrien Zaganelli
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 画像に適した方法で実装しよう
- 画像を配置するこれからのテクニック
- IEでも機能する、Netflixで使用されているテクニック
- 簡単な方法
- パフォーマンスを考慮した方法(上級)
- レスポンシブ対応の画像を実装する時の流れ
画像に適した方法で実装しよう
今、金曜日の17時だとします。あなたは仕事を終わらされなければなりません。しかし、手元にある画像はレイアウトに適していません。
そんな時に使えるCSSのテクニックがあります!
1 2 3 4 |
.myImg { background-image: url("my-image.png"); background-size: cover; } |
よく知られたテクニックで、一度は試したことがあるでしょう。
しかしこの方法は、最適ではありません。
画像を配置するのにbackgroundプロパティを使用するのは非常に便利で、もちろん機能します。ただし、コンテンツではない画像やテキストを置換する画像など特定の場合にのみ適した実装方法であることを忘れないでください。
画像を配置するこれからのテクニック
backgroundプロパティのようなテクニックが、img要素でも利用できるとしたら便利だと思いませんか?
そこでobject-fitプロパティの登場です! 画像だけでなく、動画にも利用できます。
1 2 3 4 5 |
.myImg { object-fit: cover; width: 320px; height: 180px; } |
これで先ほどと同じようになります。
ポイントはobject-fitプロパティに「cover」を指定するだけです。
注意点は何かありますか?
残念ながら、object-fitはIEやSafariの古いバージョンでは機能しませんが、ポリフィルが利用できます。
実際の動作は、下記デモをご覧ください。
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
1 2 3 4 5 6 7 8 9 10 11 |
.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } |
少し複雑に見えますか?
コンセプトを一度理解すれば、このテクニックはシンプルで簡単です。Netflixをはじめ、広く使用されています。
Netflixで使用されているコード
実際の動作は、下記デモをご覧ください。
See the Pen Responsive images #3 by Adrien Zaganelli (@adri_zag) on CodePen.
簡単な方法
あなたはすでにこれを知っているかもしれません。
1 2 3 4 5 6 |
img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; } |
レイアウトがあまり複雑でないなら、ほとんどの場合に機能します。
See the Pen Responsive images #4 by Adrien Zaganelli (@adri_zag) on CodePen.
パフォーマンスを考慮した方法(上級)
パフォーマンスとは、ロード時間を意味します。例えば大きなヒーローイメージはパフォーマンスを台無しにして、特にスマホでページ表示をゆっくりと感じさせます。
最近のモダンブラウザでは、ページの幅に応じて画像のソースを変更できることを知っていますか? srcsetはそのためにできました。
参考: srcsetのサポートブラウザ
画像を配置する際、<img>はHTML5の<picture>タグと組み合わせることができます。
1 2 3 4 5 |
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg"> </picture> |
実際の動作は、下記デモをご覧ください。
See the Pen Responsive images #5 by Adrien Zaganelli (@adri_zag) on CodePen.
レスポンシブ対応の画像を実装する時の流れ
- 画像がコンテンツの一部でない場合は、「background-image」を使用する。
- IEを気にしない場合は、「object-fit」が便利。
- Netflixで使用されているpadding付きコンテナのテクニックは、IEでも機能します。
- ほとんどの場合、CSSで「height: auto;」を記述しておく。
- ロード時間を速くしたい場合は、「srcset」を使用するとデバイスに適しいた画像ファイルを読み込みます。
sponsors