先回は、ホームページに画像を読み込む方法について解説いたしました。 今回はその続きとして、CSS側から画像を呼びだす方法について解説したいと思います。
目次
CSS側から画像を呼びだす理由
その大きなものが、画像の表示の際に「background-size: cover;」を使用できる点にあると思います。レスポンシブWebデザインを前提にサイトを作成する際、画像の表示部分が画面幅によって変化するケースが多くなります。
その際に、無理にその領域に合うように画像が引き伸ばされたりすることなくきれいに表示されるためには、この「cover」が非常に便利なのです。
もっとも先回ご紹介したようにHTML側から画像を呼びだす形が一般的なのかもしれませんが、いろいろな制約があり、記述も長くなるため筆者はこの「CSS側から画像を呼びだす」方法を多用しています。
CSS側から画像を呼びだす方法
１．画像を配置したい部分のHTMLに<div>を使用し領域を作る
例えば以下のように記述できます。今回はclass名を「topimage」としています。
HTML
|
1 2 3 4 |
<div class="header"> <div class="topimage"> </div> </div> |
２．CSS側でその画像の領域の範囲を指定する
いま作成したclass「topimage」に対して幅と高さを記述します。 今回は「ヘッダー部分」に画像を重ねたいので以下のように記述します。
CSS
|
1 2 3 4 |
.topimage{ width: 100%; height: 300px; } |
３．画像を背景として呼びだす
画像は「img」フォルダの中に保管しているので、それを呼び出します。
その際は以下のように記入します。
CSS
|
1 |
background: url('ファイル名/画像名.jpg') ; |
この記述を先のCSSに追記すると以下のようになります。
CSS
|
1 2 3 4 5 |
.topimage{ width: 100%; height: 300px; background: url("img/topimage.jpg"); } |
この場合の注意点なのですが、画像を呼び出すパスは、CSSファイルと画像ファイルがどのような位置関係（階層）で保存されているかにより異なりますので、注意しましょう。
A. 画像がCSSと同じ階層にある場合
|
1 |
background: url("topimage.jpg"); |
B. 画像が上の階層にある場合（上の階層に戻る場合※）
|
1 |
background: url("../フォルダ名/topimage.jpg"); |
C. 画像が下の階層にある場合
|
1 |
<img src="./フォルダ名/画像のファイル名"> |
※ 通常、HTMLよりも画像ファイルが上の階層に保存されるということはないと思います。しかしよくある形としてHTMLと同じ階層にCSSフォルダとimgフォルダが存在し、その中にそれぞれCSSファイルと、画像ファイルが保管されるというものがあります。
その場合、CSSファイルから画像ファイルへのパスは「同じ階層」ではあるものの、フォルダが異なりますので、呼び出す場合には一度上の階層（HTMLやimgフォルダがある階層）へ戻り、その後でimgフォルダから画像ファイルを指定するという形をとる必要があります。
それで「../」は一つ上の階層に戻るというイメージで覚えておかれると良いと思います。
４．background-size：coverを記述して画像を指定の領域に表示させる
この記述を行なうことによって、画像が指定の領域の中で画像自体は引き伸ばされることなく、全体を覆うように自動的に表示されるようになります。 HTMLから画像を呼びだす際に使用した「object-fit」と同じような働きをします。
これを追記すると以下のようになります。
CSS
|
1 2 3 4 5 6 |
.topimage{ width: 100%; height: 300px; background: url("img/topimage.jpg"); background-size: cover; } |
５．background-position:で焦点を調整する
これを記述することによって、画像の表示領域が変化した場合の焦点位置を調整できます。（つまり画像の表示領域が変化しても、その焦点が常に中央に表示されます）
例えば、人物の顔を表示したいときなどは、その顔の中心に焦点を指定しておくことができます。これはHTML側で画像を呼びだす際に使用した「object-position:」と同じような役割を果たします。
一例として background-position: 50% 10%; と記述した場合、焦点は左右方向ではセンター、上下方向では上部10％ということになります。
これを追記するとCSSは以下のようになります。
|
1 2 3 4 5 6 7 |
.topimage{ width: 100%; height: 300px; background: url("img/topimage.jpg"); background-size: cover; background-position: 50% 10%; } |
６．動作確認
以下のように表示できていれば問題なく設定できています。ブラウザの幅を変化させても画像の表示がいい感じに保持されていることと思います。
なお、このCSS側から画像を呼びだし「background-size：cover」を使用する方法は、どのブラウザにも対応していますので、「Internet Explorer」などでも問題なく動作します。
７．補足（サンプルコード）
以下にサンプルとなるコードを記しておきますので参考になさってください。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>はじめてのホームページ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <div class="topimage"> </div> </div> <div class="main"> <div class="main-contents"> メインコンテンツ </div> <div class="right-navi"> 右側のカラム </div> </div> <div class="left-navi"> 左側のカラム </div> <div class="footer"> ここにはフッターメニューが入ります </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
body{ background-color: lightyellow; } .header { height: 300px; /* background-color: yellow; */ } .topimage{ width: 100%; height: 300px; background: url("img/topimage.jpg"); background-size: cover; background-position: 50% 10%; } .footer{ height: 200px; background: black; color: #fff; clear: both; } .main-contents, .left-navi, .right-navi { height: 400px; } .main-contents { background-color: red; color: #fff; float: left; width: 80%; } .left-navi { background-color: blue; color: #fff; width: 20%; float: right; } .right-navi { background-color: green; color: #fff; float: right; width: 20%; } .main{ width: 80%; float: right; } @media screen and (max-width: 600px){ .main, .left-navi,.main-contents, .right-navi{ width: 100%; } } |
まとめ
CSSから画像を呼びだし表示するためには
１．divを使用して領域を作成し、その「背景」（background）として画像を指定する。
２．「background-size：cover」と「background-position:」を指定し、画像をいい感じに表示領域に配置する。
でした。
