背景画像を上手く使えば、Webで伝えたいイメージを画像とテキストの両方で一気に伝えることができます。
今回は、CSSの属性 background-image を使用して、背景に画像を表示する方法を学習しましょう。
今回の学習内容
背景画像を使用した例
多くのWebサイトで背景画像を使用した例を確認することができます。
画像とテキストを同じコンテナ内に表示することで、商品やサービスのイメージを画像で伝え、テキストでキラーワードを設定することができます。
Hulu(フールー): 人気映画、ドラマ、アニメが見放題！【お試し無料】
動画配信を行う Hulu のヘッダーは 背景画像で多くの動画コンテンツが閲覧できるというイメージを視覚的に分かりやすく伝えています。
中央では、「２週間無料」「今すぐ無料でお試し」などユーザーに行ってほしい行動を案内しています。
Apple（日本）
Apple（日本）では、新商品の画像を背景に表示して、その商品の説明を簡潔に興味を持ちやすいように表示しています。
また、コンテナ全体の背景色を黒にし、読み込む画像は商品の部分だけにすることで、ネットワークに繋がりにくい環境でも商品のキラーワードは遅延せずに表示されます。
キラーワードを画像データとして保存するのはNG
背景画像を使用せずに、そもそも画像に文字を埋め込めばいいんじゃないの？
と思うかもしれませんが、この方法は Web では NG です。
チラシやフライヤーのような紙媒体のもの と Webで使用する画像 は似ているようで全く異なることを理解してください。
テキストの変更ができない
画像内の文字に変更が生じた場合、画像の更新はちょっと面倒です。
例えば、料金や期間が変更になった、あるいはキラーワードを変更したいなどの場合は、画像そのものを作り変えて対応 する必要があります。
一枚だけの画像を作り変えるなら、それほどの労力ではないかもしれません。しかし、Webサイトを閲覧する端末の画面サイズは 小さいものから大きいもの まで様々です。
この全てのサイズに対応する画像をテキストの変更だけで再作成なんて考えたくありませんよね。
- 画像を作り直すより、HTML を修正するほうが簡単です。
読みにくい
画像のテキストは画面サイズによって折返しもサイズ変更もできません。
また画像のテキストの解像度と HTML で表現したテキストの解像度では、圧倒的に HTML を使って表現したテキストの方がキレイに映ります。
本当に伝えたいテキストなのであれば、画像ではなく HTML で表現しましょう。
画像は重い
画像のサイズは非常に大きいです。
常に高速なネットワーク環境の下で開発していれば問題は無いようにみえるかもしれませんが、それは誤りです。
Webサイトにアクセスする環境によって画像が表示されるスピードはまちまちで、通常は画像よりテキストが先に読み込まれるため、画像はユーザーに見られない可能性も考慮しましょう。
このようなネットワーク環境の違いに考慮した開発は、デベロッパーツールを使用することで実現できます。
- 画像は重いので使用する場合は圧縮したものを使用します。
検索エンジンが画像内のテキストを収集できない
画像内の文言を検索エンジンなどのクローラー（Webサイトのデータを収集するボット）は取得しません。
つまり、重要なテキストを画像で設定していると、その検索キーワードで検索結果に表示されないことを意味します。
興味のあるユーザーに情報を届けるためにも、テキストは HTML で記述しましょう。
- 重要なテキストやワードを画像で表現するのはなるべく控えましょう。
背景画像を試してみよう
RAKUMAオンライン
今回はこのデザインの作成を目指したいと思います。
使用する画像は、ライオン 捕食者 危険 – Pixabayの無料写真で無料でダウンロードすることができます。
レイアウト設計
これは背景画像を作成するためのレイアウトを簡単に表現した例です。
このように予めレイアウトを考えてみると、コーディングをしやすくなると思います。
- この要素に背景画像を設定します。CSSで画像を読み込む場合は
background-image属性 を使用します。
background-image – CSS - 子要素には 見出し と ボタンボックス を作成します。このコンテナは縦横中央寄せしています。
Flexbox(フレックスボックス)のデモ – CSS応用 その２ - ボタンを横並びに表示します。
背景画像を表示する
CSSで要素に画像を読み込むために background-image属性 を使用します。
background-image: url('./images/lion-3576045_1920.jpg');
子要素に何も設定していない状態だと、要素の高さが0になっているので表示されません。その場合は、 height属性 を使用して 高さを宣言する必要があります。
この background-image属性 には複数の画像を カンマ（,） 区切りで設定することが可能です。
この際には左側で読み込んだ画像が右側の画像より上のレイヤに表示されます。
以下のページで試すことができます。
background-image – CSS
背景画像の表示サイズを指定する
background-size属性 を使用して、背景画像の寸法を設定します。
この属性には、画像サイズを設定することもできますが、contain や cover と値を設定することで、要素のサイズ内に収まるように画像が設定されたり、要素すべてに画像が表示されるように設定することができます。
背景画像のサイズを数値で指定した場合
background-size: 200px 100px;
背景のサイズを 横幅 縦幅 で指定できます。縦幅は省略することが可能で、画像が要素サイズより小さい場合は要素を埋めるように繰り返し表示されます。
背景画像にcontainを指定した場合
background-size: contain;
画像の縦横比を崩さず、画像ができるだけ大きくすべてが表示されるように要素のサイズに合わせて拡大、縮小して表示ます。要素の余白には画像を繰り返し表示します。
背景画像にcoverを指定した場合
background-size: cover;
画像の縦横比を崩さす、画像ができるだけ大きく表示されるように要素のサイズに合わせて拡大、縮小して表示します。
画面サイズや要素サイズに関係なく画像を要素全体に表示する場合は、cover を使用すると期待通りに表示してくれるかもしれません。
*containと違いがわからない場合は、画面のサイズを縮小して確認してみてください。
背景画像をリピートさせない
background-repeat属性 を使用して画像の繰り返しを制御することができます。
今回は画像を繰り返して表示する必要はないので、no-repeat を設定します。
background-repeat: no-repeat;
画像の表示位置を調整する
background-position属性 を使用して画像の表示位置を調整します。
以下のURLで値によって画像がどのように表示されるかを試すことができます。
background-position – CSS
背景画像のサイズを cover に設定している場合は、要素内で画像のどこを表示するかという設定になります。背景画像のサイズと要素のサイズが同等であれば違いは分かりませんが、例えば以下のように異なる場合は表示する場所を指定したい場合があります。
以下は、横幅 width を 300px に設定した場合です。
このままでは、この画像がなんなのかを伝えることはできないので、以下のように background-position属性 を設定します。
background-position: right center;
これで、小さい画面で表示した場合でも画像がライオンだと伝えることができますね。
背景画像に透過グラデーションを重ねる
背景画像の上に文字を表示させる場合、画像がそのままだと文字が読みにくい場合があります。
今回の場合画像の上にそのまま文字を表示させると次のようになります。
<div class="header">
<h1>RAKUMAオンライン</h1>
</div>
RAKUMAオンライン
なんて書いているのかほとんど読めませんね。
文字色を白に変えると読みやすくなるかもしれませんが、背景画像の上に透過グラデーションを重ねることで文字を見やすくすることができます。
これは、background-image属性 には複数の画像を設定でき、左側の画像が右側の画像より上のレイヤに表示されるという特徴と、linear-gradient() という CSSの関数 を使用することで実現できます。
この関数の結果は image型 となっており、background-image属性に設定することができます。
background-image: linear-gradient(to bottom, rgba(255, 152, 0, 0.7) 0%, rgba(33, 33, 33, 0.7) 100%), url('./images/lion-3576045_1920.jpg');
RAKUMAオンライン
背景色を指定する
例えば背景画像が表示されなかった場合で、かつ背景画像の上に表示される文字色が白色だとどうなるでしょう？
文字も白、背景色も白だと読むことはできません。
background-color属性 を設定して背景色には画像と近い色を設定しましょう。この背景色は背景画像の下側に設定されます。
background-color: #ff8f00;
imgタグ vs CSS background
今回は、CSSで背景画像を設定する方法について学習しましたが、imgタグを使用して背景を設定する方法もあります。
どちらも視覚的にはほとんど変わらないデザインを表現することが可能ですが、内面的にはいくつかの違いがあります。
検索エンジンの画像読み込み
検索エンジンのクローラーは画像そのものを読み込んでどんな画像かを判断するわけではありません。読み込むのは imgタグ の alt属性 に設定されているテキストです。
また、ユーザーの操作性（アクセシビリティ）向上ために有効なその他の属性を自由にタグに設定することができます。
SEOやアクセシビリティが必要な場合は imgタグ を利用しましょう。
-
imgタグならSEOやアクセシビリティに関係する情報を設定することができます。
読み込みパフォーマンス
画像のサイズは大きく、読み込む画像が多ければ、Webサイトのパフォーマンスが低下します。
CSS（特に外部スタイルシート）で画像を読み込む場合は、CSSを読み込んだ後に画像ファイルを読み込まなければなりません。
img タグの場合は htmlファイルが読み込まれたらすぐに読み込みを開始することができます。また、LazyLoad（遅延読み込み）を行うことが容易で、Google Chromeでは 遅延読み込みのための loading 属性がサポートされています。
-
imgタグのほうがJavaScriptで操作しやすいです。
設定可能なスタイル
CSSで読み込みを行った場合、今回学習した background-color属性、background-repeat属性、background-position属性 をはじめとする多くのスタイルを使用することができます。
-
背景画像は、
imgタグよりCSSの方が簡単に実装できます。
