HTML 【 画像 】 ~ img要素の書き方

■表示された写真は自身で撮影したものです。■被写体のパーツモデルはストックフォト許諾済みです。

文章だけのサイトは、なんだか堅苦しくて地味な印象になりますが、そこに写真やイラストなどの画像が入ると、一気にWebサイトらしく華やかになります。
また、サイトの特徴を表すためにも、画像の存在は重要です。
今回は、HTMLで画像を表示させるための書き方を紹介します。

目次

1.画像を表示させよう
 1.1 img要素
 1.2 画像の用意
 1.3 画像を保存するフォルダ
 1.4 画像を表示する位置の指定
2.画像とテキストを横並びで表示させよう
 2.1 CSSの指定
 2.2 画像とテキストの間隔を指定
 2.3 float指定の解除
3.画像とSEOとの関係をおさえておこう

1.画像を表示させよう

1.1 img要素

HTML文書の本文に画像を表示させたい場合は、「 img要素 」を使います。
img要素は、imgタグ( <img> は終了タグはありません )を使って、下のように書きます。

<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>

srcは、「 source(ソース)」の略です。ソースとかエスアールシーと読みます。
widthは幅のことで、heightは高さのことです。
altは、「 alternate text(代替テキスト)」の略です。オルトと読みます。
属性に使用する値( ” ” 内に書く内容 )は、次の通りです。

 URL    :画像ファイルの住所(ファイルの置き場所への行き先)
 幅     :画像の左右のサイズ(普通はピクセル単位で指定)
 高さ    :画像の天地のサイズ(普通はピクセル単位で指定)
 代替テキスト:画像が表示されない時に表示される画像の説明文

img要素には、上で出てきた属性の他に「 usemap属性 」と「 ismap属性 」があります。
これは「 イメージマップ 」を作る時に使う属性です。
ここでは使用しませんが、他にも属性があるということだけ覚えておいて下さい。
また、幅や高さのサイズ指定は、省略することができます。
表示させたい画像ファイルの高さや幅を変える必要がなければ、書かなくて大丈夫です。

▲目次へ戻る

1.2 画像の用意

まずは画像を用意します。
ファイル形式は、GIF、JPEG、PNGです。
お好きな画像を用意してみて下さい。
適当な画像がない場合は、検索サイトで「 画像 フリー 」などで検索してダウンロードしましょう。
colmun_image1012_03
この画像のサイズは、 横240px、縦160pxです。
高さや幅の単位は、「 ピクセル( px )」、「 em(フォントの高さを1とする相対値)」、「 % 」などで指定します。
ここでは、一般的に使用されているピクセル( px )を使います。
画像ファイルの名前は「moon.jpg」にしました。お好きな名前を付けて下さい。

▲目次へ戻る

1.3 画像を保存するフォルダ

画像ファイルを「 image 」というフォルダを作って、その中に入れます。
画像ファイルを保存するフォルダの名前は、一般的に「 image 」や「 img 」という名前にします。
ルールがあるわけではありませんが、フォルダをこのような名前にすると、画像ファイルがここにあるということがわかって便利だからです。
自分以外の人が作ったサイトの画像を編集する時などでも、imageとかimgとかの名前がついたフォルダの中を探せば、たいてい画像ファイルを見つけることができます。
ここでは下のように、「 image 」フォルダの中に「 moon.jpg 」という画像ファイルを置きます。
colmun_image1012_04

▲目次へ戻る

1.4 画像を表示する位置の指定

画像をHTMLに配置するとき、URL( その画像ファイルが置いてある場所 )が重要です。
このURLが間違っていると、画像は表示されません。
さっそく画像をHTML上で配置してみましょう。
HTMLファイルを下のように編集します。
colmun_image1012_05
●「 src= 」は、画像の格納場所( URL )をブラウザに指示しています。
フォルダ名とファイル名の間を「 /(スラッシュ)」で区切っているのを覚えて下さい。
URLの書き方には、絶対URLと相対URLがありますが、ここでの表記は相対URLです。
※絶対URLと相対URLについては、HTML入門 【 URL 】 ~ 絶対パスと相対パスを参照して下さい。

●「 alt= 」は、画像が表示されないブラウザ用に、画像の代わりに表示する文字を入れます。
音声ブラウザでもこの代替テキストを読み上げるので、ここは必ず入れておきましょう。

●「 width= 」と「 height= 」は、画像のピクセルサイズを指定します。
このピクセルサイズ指定は省略しても大丈夫です。

ファイルを保存して、ブラウザで表示を確認してみましょう。

(画像挿入前)
colmun_image1012_06
(画像挿入後)
colmun_image1012_07
HTMLで書いた位置( 見出し <h1> の下 )に画像が表示されました。
画像が入ると、受ける印象が大きく変わるのがわかると思います。

▲目次へ戻る

2.画像とテキストを横並びで表示させよう

さきほどは、タイトルと本文の間に画像が表示されましたが、今度は、画像の横に本文のテキストが表示されるようにしてみましょう。

2.1 CSSの指定

画像と本文テキストを横並びに表示させたい場合は、CSS( スタイルシート )の中で画像の位置を指定します。
さきほど使ったHTMLファイルを開いて、<head> 部分に、下のように「 img {float:left;} 」 の指示を書いた CSS を書き込みましょう。

<style>
img {
float:left;
}
</style>

「 float 」は、CSSでとてもよく使うプロパティです。
「 float:left 」を指定された要素は左に配置され、HTMLでそれ以降に書かれた要素は、その右側に配置されます。
「 float:right 」なら、指定された要素は右に、それ以降の要素は左に配置されます。
下のようにimg要素に対する指定を追加します。
colmun_image1012_08
ファイルを保存して、ブラウザで表示を確認してみましょう。
colmun_image1012_09
画像の右側にテキストが表示されました。
ただ、画像とテキストがくっつきすぎていて不自然な感じがしますね。

▲目次へ戻る

2.2 画像とテキストの間隔を指定

今度は、同じくCSSを使って、画像とテキストとの間を少し離してみましょう。
下のように、img要素のCSSに右側のマージンを指定します( margin-right:20px; )。
colmun_image1012_10
「margin」プロパティを使えば、要素にマージンを指定して、隣接する要素との間隔を作ることができます。
ファイルを保存して、ブラウザで表示を確認してみましょう。
colmun_image1012_11
画像とテキストとに間隔ができて、見やすくなりました。

▲目次へ戻る

2.3 float指定の解除

「 float 」を指定すると、新たに「 float指定はここで終わり 」という指定をしない限り、それ以降の要素は永遠に「 float 」が有効な状態になります。
そこで、float指定を効かせたくない要素には、float指定を解除しなければいけません。
float指定の解除は、「 clear:left 」や「 clear:right 」と書きます。
また、「 clear:both 」は、右も左も、とにかくfloatを解除しますので便利です。これだけ覚えておいてもいいかもしれません。
ここでは、2番目の段落( <p> )からは写真の右側に表示されないように、2番目の段落の <p> に「 clear:both 」を指定して、floatを解除してみます。
ついでに、画像の下に間隔ができるようにも指定しました(「 margin-bottom:20px; 」)。
colmun_image1012_12
ファイルを保存して、ブラウザで表示を確認してみましょう。
colmun_image1012_13
指定した通り、2番目の段落からは画像の下の方にテキストが表示されました。
「 margin-bottom:20px; 」の指定のおかげで、画像の下の方にも間隔ができています。
「 float 」は、CSSの中で、レイアウトに影響を及ぼすことが多いプロパティです。
今後、レイアウトがおかしくなってしまったような場合には、まず一番にこの「 float 」指定を確認するといいと思います。
「 clear 」の書き忘れなどが原因の場合がよくあります。
「 float 」を使う時には、「 clear 」を書くのを忘れないようにしましょう。

※ここでは、<p> 要素に直接CSSを指定していますが、別にCSSファイルを作って、そこに「 clear:both 」のクラスを定義しておき、<p> 要素に呼び出す方法が一般的で便利です。

▲目次へ戻る

3.画像とSEOとの関係をおさえておこう

検索エンジンは、画像の情報をどのように認識しているのでしょうか。
実は、画像そのものは「 点の集まり 」程度にしか見られていません。
そこで、画像についてもSEO対策を考える場合には、検索エンジンが「alt属性」と「ファイル名」の二か所を見ている点に注意する必要があります。
(SEOとは、検索サイトでキーワード検索をした時に、検索結果としてそのサイトがより上位に表示されるための工夫のことです。)

■alt属性
alt属性は、画像が表示されない場合の「 代替テキスト 」として紹介した属性です。ここにキーワードとなるような文字を入れると、SEO対策となります。

<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>
                          ↑
                    ここにキーワードを入れる

■ファイル名
ファイル名は、さきほど「 image 」や「 img 」という名前のフォルダに画像ファイルを保存するという説明をした際に「 moon.jsp 」という画像ファイルの名前を出しましたが、この名前のことです。
画像を、「 1.jsp 」「 2.jsp 」などと命名せず、キーワードーとなるような文字を使って名前を付けると、SEO対策となります。

▲目次へ戻る