画像

ゲームを作成するときに、画像の取り扱いが重要であることは言うまでもありません。 HTML文書の中に画像を表示する方法を学習しましょう。

画像を表示するための要素

HTMLで画像を表示するためには、img要素を使います。この要素には終了タグは無く、従って子要素も持ちません。

表 3-13 : img要素の基本情報
開始タグ	終了タグ	分類	内容となるもの
必須	なし	インライン要素	なし

img要素で画像を表示するためには、src属性を付けて画像ファイルのURLを指定する必要があります。このように必ず付けなければならない属性のことを必須属性といいます。

img要素に指定できる主な属性を表にまとめておきましょう。

表 3-14 : img要素に指定できる主な属性
属性の書式	説明
src="画像のURL"	src属性はimg要素の必須属性で、画像のURLを指定します。
alt="代替テキスト"	画像が表示されない場合、代わりに表示される語句を指定できます。
width="幅"	画像を表示するときの幅をピクセル数で指定できます。画像そのものの幅より大きい場合は拡大して、小さい場合は縮小して表示されます。
height="高さ"	画像を表示するときの高さをピクセル数で指定できます。画像そのものの高さより大きい場合は拡大して、小さい場合は縮小して表示されます。

img要素のsrc属性に指定できる画像形式は次の表のようになります。画像の使用目的、品質とファイルサイズのバランスを考慮して、適切な画像形式を選ぶことが大切です。

表 3-15 : img要素のsrc属性に指定できる画像形式
画像形式	拡張子	特徴
JPEG	.jpg	写真を小さなファイルサイズで保存するのに適しています。フルカラー（1677万色）が使えます。
GIF	.gif	イラストを保存するのに適しています。256色しか使えません。透過可能。アニメーション可能。
PNG	.png	イラストを保存するのに適しています。256色でも、フルカラー（1677万色）でも保存できます。透過可能。

img要素で画像を表示する

img要素で画像を表示する例を見てみましょう。少し意外な感じがするかもしれませんが、img要素はインライン要素です。本文の一部として表示する場合は、p要素の中に入れるのが一般的です。

img_sample01.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>画像を表示する</title>
    </head>
    <body>
        <p>
            <img src="strawberry.jpg" alt="イチゴ" />
            320×240（もとのサイズ）で表示
        </p>
        <p>
            <img src="strawberry.jpg" alt="イチゴ" width="560" height="150" />
            560×150で表示
        </p>
    </body>
</html>

手順

「ch03」フォルダーの中に「img_sample01」フォルダーを作る。
「img_sample01」フォルダーの中に「img_sample01.html」を作る。
「img_sample01.html」のコードを入力し保存する。
「strawberry.jpg」を「img_sample01」フォルダーの中に保存する。
「img_sample01.html」をブラウザで開く。

「strawberry.jpg」を「img_sample01」フォルダーの中に保存するには、下の画像を右クリックして、[名前を付けて画像を保存...]を選択します。

strawberry.jpg

[名前を付けて保存]ダイアログで、保存する場所を選択して、[保存]ボタンをクリックします。 Aptana Studio 3のワークスペースの場所がデフォルトのままなら、保存する場所は次のようになります。

Windowsの場合
「ドキュメント > Aptana Studio 3 Workspace > js_game_pg_sample > ch03 > img_sample01」

図 3-31 : [名前を付けて保存]ダイアログで「strawberry.jpg」を保存する（Windows）

Macの場合
「書類/Aptana Studio 3 Workspace/js_game_pg_sample/ch03/img_sample01」

図 3-32 : [名前を付けて保存]ダイアログで「strawberry.jpg」を保存する（Mac）

「strawberry.jpg」を保存したところの様子は次のようになります。

図 3-33 : エディターで「img_sample01.html」を入力し、「strawberry.jpg」を保存した

「img_sample01.html」をGoogle Chromeで開いた様子は次のようになります。一つ目のimg要素では、width属性とheight属性を指定しないので、画像のもとのサイズで表示されています。一方、二つ目のimg要素では、「width="560" height="150"」と指定しているので、横には拡大され、縦には縮小されて表示されています。

図 3-34 : 「img_sample01.html」をGoogle Chromeで開いた

画像を利用する

画像を利用して、「昆虫図鑑」の続きを作ってみましょう。

「コウチュウ目」のページを作る

前節までに「昆虫図鑑」のトップページを作りました。ここでは、そのトップページからの枝分かれとなる「コウチュウ目」のページを作ってみます。ただし、トップページからのリンクを作成する方法については、この節では解説しません。

li要素はブロックレベル要素、インライン要素、テキストのいずれも子要素として持つことができます。もちろん、img要素もli要素の子要素となることができます。

beetles.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>コウチュウ目 - 昆虫図鑑</title>
    </head>
    <body>
        <h2>カブトムシの仲間（コウチュウ目）</h2>
        <p>
            カブトムシの仲間は、からだ全体がかたい前ばねや皮ふでおおわれているので、
            コウチュウ（甲虫）目と呼ばれます。
            コウチュウ目にはクワガタムシやコガネムシも含まれます。
        </p>
        <ul>
            <li>
                <img src="160_120.jpg" alt="カブトムシ" /><br />
                カブトムシ
            </li>
            <li>

            </li>
        </ul>
    </body>
</html>

手順

「pb_insects」フォルダーの中に「beetles.html」を作る。
「beetles.html」のコードを入力し保存する。
「160_120.jpg」を「pb_insects」フォルダーの中に保存する。
「beetles.html」をブラウザで開く。

「160_120.jpg」を「pb_insects」フォルダーの中に保存するには、下の画像を右クリックして、[名前を付けて画像を保存...]を選択します。

160_120.jpg

Windowsの場合
「ドキュメント > Aptana Studio 3 Workspace > js_game_pg_sample > ch03 > pb_insects」

Macの場合
「書類/Aptana Studio 3 Workspace/js_game_pg_sample/ch03/pb_insects」

「160_120.jpg」を保存したところの様子は次のようになります。

図 3-35 : エディターで「beetles.html」を入力し、「160_120.jpg」を保存した

図 3-36 : 「beetles.html」をGoogle Chromeで開いた

「カブトムシ」のページを作る

ここまで来たら、「コウチュウ目」のページからの枝分かれとして、「カブトムシ」のページも作ってみましょう。カブトムシについて詳しく説明するためのページですので、画像も大きいものを使います。しかし、このコードについては、新たに解説するべきことは特にありません。

kabutomushi.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>カブトムシ - 昆虫図鑑</title>
    </head>
    <body>
        <h3>カブトムシ</h3>
        <p>
            <img src="640_480.jpg" alt="カブトムシ" />
        </p>
    </body>
</html>