前回までは文字だけでwebページを作成しcssをコーディングして装飾しましたが、画像もwebページ、特にホームページを作成する上で必要不可欠な要素となりますので使い方を覚えましょう。文書をマークアップという章ですが、画像も使っていきます。外部ファイル（HTMLファイルの記述にはない、読み込んで使うファイル）の使い方も一緒に勉強しましょう。
使用する画像を保存する
今回使う画像は以下に用意してますので保存してお使いください。ちなみに下の画像はイラストAC様よりダウンロードしました。無料で画像を提供してくださっているAC様は数も多く質もよく商用利用もOKなのでとてもオススメです。皆様も画像が欲しい場合はぜひ利用してください。
写真素材なら「写真AC」無料（フリー）ダウンロードOK
無料イラストなら「イラストAC」
img要素で画像を読み込む
では、これらの画像をsample.htmlに表示するよう記述していきますが、その前にsample.htmlと同じフォルダ（階層）にimagesというフォルダを作成し、そのimagesフォルダに3つの画像を保存してください。フォルダを作成し画像が保存できましたらsample.htmlを編集で開いてください。
<body>
<h1>犬種人気ランキング</h1>
<p>犬の人気のある種類をランキング方式でお届けします。あなたの買っているペットは何位かな？</p>
<h2>犬の人気ランキング</h2>
<h3><strong>１位</strong>チワワ</h3>
<img src="images/076757.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;">
<p>昔CMでも話題になったチワワが第一位です。可愛いですもんね。人気の理由は割愛します。</p>
<h3><strong>２位</strong>トイプードル</h3>
<img src="images/2138128.jpg" alt="トイプードルの写真" title="トイプ" style="width: 200px;">
<p>ぬいぐるみみたいな可愛さですね。私も飼いたいです。人気の理由は割愛します。</p>
<h3><strong>３位</strong>ロングコートチワワ</h3>
<img src="images/2118049.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;">
<p>やっぱり可愛いですね。でもチワワに含めていいですよね。人気の理由はやっぱり割愛します。</p>
</body>
body要素以外は省略してあります。body要素内に上記のコードを記述してください。すると画像が以下のように表示されたでしょうか。下の画像ではチワワしか見えてませんが、下にトイプードルの画像たちが表示されていればOKです。
下のように画像が表示されない場合は、画像の保存場所やhtmlの記述ミスがありますので、コードや画像保管場所を見直してください。
外部ファイルを参照するために
ここで覚えていただきたいのがimg要素を使用するための記述です。画像データはこのhtmlの外部にあるため、その外部ファイルを読み込まないと表示されません。画像のみならず、外部ファイルを使用する場合はファイルの場所を示す記述をするということを理解しておいてください。img要素の中にはsrc=””という箇所がありましたが、この中には画像のパスを記述します。パスとはその画像やファイルがどこにあるのか、道のりを示します。また、パスの書き方は相対パスと絶対パスという2つあり、それぞれの説明は以下の通りです。
相対パス
今そのファイルがいる場所を基準にして、目的のファイルがどこにあるのかを示します。皆様が記述したコードではこの相対パスで記述しております。
絶対パス
ルートディレクトリと呼ばれる階層構造の最も上にある階層、頂点から目的のファイルまでの道のりを示した書き方。
なんだか専門的で難しいかもしれませんが、慣れれば簡単です。要はファイルまでの道のりを示せば良いだけです。
今回の場合ですとsample.htmlと同じ場所にいるimagesフォルダの中に画像がいますので、相対パスで書く時は”image/075757.jpg”と記述すれば良いのです。同じ階層にいる時は単にそのフォルダやファイル名を記述すれば読み込んでくれます。場所が違うとファイルも見つからないので道のりであるフォルダを示してあげます
画像が読み込めなかった時の代替テキスト
上の画像が読み込めなかった時のエラーが表示されている横に、文字が表示されていますね。img要素の中に alt=”チワワの写真”と記述されていて、その文字が表示されているのが分かります。alt=””で画像が見れない人のために何の画像かを文字で伝える役割を担っています。
画像の大きさを指定する。
img要素の中に style=”width: 200px;”と記述されていますね。ここで画像の大きさを指定します。もちろんcssでも指定することができますが、今回はhtmlでもstyle=””で指定できることを伝えたかったので、htmlに記述しています。
widthというのは横幅を指定しているのですが、高さは指定しておりません。その理由は、widthを指定するだけで勝手に縦横の比率を保持して対応した高さに変換してくれるのです。もちろん高さもheightというプロパティで指定できますが、比率が狂うと画像の見栄えが悪くなるのでここではwidthだけ指定しています。
まとめ
- img要素で画像が表示できる
- 外部ファイルはパスを記述して読み込み、使用する
- パスには相対パスと絶対パスがある
- 画像が読み込めない時用にaltで代替テキストを用意する
- htmlでもcssのようにスタイルを指定できる
- widthを指定すると画像の元々の比率を保持して高さを決定してくれる
コメント