今回のポイント
今回は、ブラウザに画像を表示させる要素について解説します。
そして画像をクリックすると、指定した場所へリンクする方法から画像の大きさ調整までを解説していきます。
画像を表す要素（img要素）
画像を表す要素は表題にもありますが、img要素を使用します。
img要素の意味と役割
imageの略で画像を埋め込む役割を持つ
img要素のカテゴリ
- フロー・コンテンツ
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
img要素のコンテンツ・モデル
なし（空要素）
img要素を実際に記述してみる
画像フォルダと画像の準備
早速画像を表す要素を記述していきたいのですが、その前に画像を準備しておきましょう。
まずは以前の記事で解説したウェブページはhtmlフォルダを作成してその中に入れましょう。
※基本フォルダ名は任意ですが、半角英文字を使用するようにします。
以前の記事は、以下を参照して下さい。
そして今作成したフォルダ内へ画像フォルダを作成します。
※基本フォルダ名は任意ですが、半角英文字を使用するようにします。
イメージは、以下の図を参照下さい。
そしてこのフォルダ内に画像を保存して下さい。
※今回はlogo.jpgとして画像を保存しておきます。
img要素を記述する
それではindex.html内に以下の記事があったとします。
ぱくぱくのプロフィールはここ
この記事に画像ファイルを表す要素を記述します。
<p>
<img src=”images/logo.jpg”>ぱくぱくのプロフィールはここ</img>
</p>
まずはこの記事は段落なので、P要素を使って囲っています。
P要素についての解説記事は以下にあります。
そしてP要素内にimg要素を記述します。
それでは、少しこのimg要素について解説します。
img要素はそれだけではどの画像を表すのか分からない為、src（ソース）属性でどこのどの画像を使用するか指定する必要があります。
これは、リンクの記事でも解説した方法によく似ています。
リンクの記事については以下を参照して下さい。
これで画像を表示することが出来たはずです。
いかがですか？簡単ですが、劇的にウェブページの印象が変わるはずです。
そしてここで、alt属性も追加しておきましょう。
これは、もし目の見えない方が自分のウェブページを閲覧してもこの画像の意味を読み上げてくれると言った意味を持つ推奨された属性です。
それではalt属性を記述してみましょう。
<p>
<img src=”images/logo.jpg” alt=”ぱくぱくのプロフィール”>ぱくぱくのプロフィールはここ</img>
</p>
img要素にリンク先をつける
これまでの方法だけでは、画像が表示されただけで、画像をクリックしても何も起きません。
そこで今回はこの画像をクリックすることで他の記事へリンクする方法も解説しておきます。
img要素は以前解説したリンクを表すa要素内に記述することが出来ます。
リンクを表す要素については以下の記事を参照下さい。
それではリンクを表すa要素を記述していきます。
※ここではプロフィールを、profile.htmlに作成したと仮定して解説しています。
<p>
<a href=”profile.html”>
<img src=”images/logo.jpg” alt=”ぱくぱくのプロフィール”>ぱくぱくのプロフィールはここ</img>
</a>
</p>
いかがでしょう。以前学んだa要素がここで役立ちましたね。
画像の大きさを変える
ここでは画像の大きさを指定する属性について解説していきます。
まずは使用する属性と意味について以下にまとめておきました。
- width（ワイズ）属性 ：画像の幅を指定する属性
- height（ハイト）属性：画像の高さを指定する属性
それでは実際に記述してみましょう。
<p>
<a href=”profile.html”>
<img src=”images/logo.jpg” alt=”ぱくぱくのプロフィール” width=”240″ height=”80″>ぱくぱくのプロフィールはここ</img>
</a>
</p>
いかがでしょうか。この属性を使って画像の大きさを色々と変えてみて下さい。
また、この属性を使用することで若干ではありますが、ウェーブページの表示速度が向上すると言われています。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
