先回、レスポンシブに対応した「３カラム」レイアウトのページを作成しました。 今回はそのページに画像を読み込んでホームページを作成してみましょう。
ホームページに画像を表示する方法
ホームページに画像を表示する方法は大きく分けて2つの方法があります。
それは１）HTML側に画像を呼び出す方法と、２）CSS側で画像を呼び出す方法（次回）です。
１．HTML側に画像を呼び出す方法
HTML側で画像を呼び出す場合、以下のように記述します。
<img src="画像へのパス" alt="代替テキスト">
この画像へのパスは以下のように指定できます。その画像を呼び出すHTMLファイルと画像のファイルがどのような位置関係にあるかによってファイル名の指定方法が異なりますので注意しましょう。
A. 画像が同じ階層にある場合
<img src="./画像のファイル名">B. 画像が上の階層にある場合（※）
<img src="../画像のファイル名">C. 画像が下の階層にある場合
<img src="./フォルダ名/画像のファイル名">※このようにHTMLファイルよりも画像ファイルが上の階層にあるという状況はあまりないと思いますが、このパスの指定方法は他の部分でも同様ですので念のため載せておきます。
alt=”代替テキスト”の部分には、その画像に関する説明を簡潔に記しておきます。これは目の不自由な肩のための読み上げ機能のために使用されます。また、この表記はGoogleでのSEO対策としても必要な項目として挙げられていますので、適切な説明を入れておくと良いと思います。
２．CSS側で画像を呼び出す方法（この方法は次回解説いたします）
この場合、HTML側には<div>などでタグを振っておき、そのタグに対してCSS側で「背景」として画像を呼び出します。
この方法について詳しくは次回解説させていただきたいと思います。
では早速HTML側で画像を呼び出してみましょう。
ホームページに画像を入れてみよう（HTMLから呼び出す方法）
先回までで作成した「3カラム」レイアウトのヘッダー部分の背景を画像にしてみましょう。
１．新たに「img」フォルダを作成し画像を入れる
フォルダの名前は何でも構いませんが、今後のことも考え今回は「img」というフォルダをHTMLファイルと同じ階層に作成し、その中に画像を入れることにします。
その場合の画像の拡張子（.png .jpgなど画像ファイル名の後についているもの）も確認しておきましょう。今回は「.jpg」を使用します。似たものとして「.jpeg」もありますのでご注意ください。
※ 画像名も自由に付けていただいて構いません。以下の通り行うためにはご自分のPCに保管されている画像の名前を「topimage.jpg」としておいてください。
２．HTML側でその画像を呼び出す
その際には以前作成した<class=”header”>の部分に以下のように追記してください。
<div class="header">
<img src="./img/topimage.jpg" alt="ページトップに表示される東京の夜景の写真">
</div>
３．CSS側で画像の高さと幅を指定する
そのまま画像を呼び出すと、その画像のサイズのままブラウザー上で表示されます。 この画像を「ヘッダー」の中にうまく収まるように、高さを「ヘッダー」と同じく、幅は横いっぱいに「100%」で指定してみましょう。
.header img{
width: 100%;
height: 300px;
}
念のため、まとめてサンプルコードを以下に記入しておきます。
HTML
<!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">
<img src="./img/topimage.jpg" alt="ページトップに表示される東京の夜景の写真">
</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
body{
background-color: lightyellow;
}
.header {
height: 300px;
background-color: yellow;
}
.header img{
width: 100%;
height: 300px;
}
.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%;
}
}
４．動作確認
以上のようにすると画像が「ヘッダー」の中に表示されていると思います。
なんとなくホームページらしくなってきたでしょうか？
しかし… このままでブラウザの幅を広げたり狭めたりしてみてください。 そうすると、画像は無理やり縦横に引き伸ばされることになります。これでは少し見栄えが良くないですね。
これが生じる原因としては、このページ全体をレスポンシブWebデザインにしているからです。この設定方法については前回ご説明しましたが、このレスポンシブWebデザインを採用することによって、それぞれの「カラム」のサイズが固定ではなく、表示する画面幅によってパーセントで変化することになります。
そのため、そこにそのまま画像を張り付けてしまうと、画像が縦横に引き伸ばされたような形になってしまうのです。
では、この画像をうまく表示されている範囲の中で縦横比を変えることなく拡大や縮小が行われるようにするためにはどうしたら良いのでしょうか？
次回はその点について解説したいと思います。
まとめ
画像をページ内で表示するためには、
１．<img src=”./フォルダ名/画像のファイル名”>でHTMLから画像を呼びだす
２．CSS側で画像の高さと幅を指定する
でした。