[未完成版]ウェブサイト（ホームページ）作成講座4-3

この講座で、このページに初めて来られた方へ。本講座の目次があります。

画像を入れてみよう！

今回は画像を挿入してみましょう。

今回は前回の続きですので、前回アップロードしたファイルを用意してください。

• 親子丼の画像

そして、この画像ファイルをダウンロードします。右クリックして保存を押せば出来ます。

できたら、このファイルを「ウェブサイト作成講座」フォルダに保存するんですが、後々ファイルが増えてくると困るので画像と文書を分けて保存するようにしましょうか。

「ウェブサイト作成講座」フォルダの中に「images」というフォルダを作ってください。

その中に今ダウンロードしたoyakodon.jpgをぽいぽいっと放り込んでください。[基本ファイル操作編を後々開講予定]

それではreciepe1.htmlに、この完成した親子丼の写真を入れてみたいとおもいます。

いきなり画像挿入のタグを書いてしまいましょう。

<img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120">

このタグを見て次の２つの事を疑問に思った人はもう既にHTML一級建築士です。

• あれ、開始タグだけなの？　終了タグは？
• このimgってのはブロックレベル要素なの？　それともインライン要素なの？

とりあえず、この辺りの疑問から解説していきましょう。

まず、imgタグですが、これは開始タグだけ書きます。気持ち悪いですね。まあ、</img>を省略しているって考えで間違ってないです。img要素は画像を表してるだけなので、それで囲む文字列は存在しませんからね。こんな感じでタグで囲む部分が存在しないから、開始タグだけ書く要素を空要素（からようそ）といいます。本来タグで囲むはずである部分が空（から）なので空要素です。

次に、img要素がブロックレベル要素かインライン要素かということに関しては、これはインライン要素です。ですから、実際にHTMLに書くときは

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>

こんな漢字で適当なブロックレベル要素に含めてやる必要があります。

今回は画像を段落として使いましたが、画像を並べて箇条書きにしたい場合なんかは

<ul>
 <li><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"><li>
</ul>

とすれば良いです。まあ、迷ったときはp要素でいいでしょう。

img要素の属性の解説

いよいよ、img要素の属性についてです。このうちalt属性ですが、これは絶対に書かなくてはいけない重要な属性なんですけれれども、説明が長くなるので最後に紹介します。

src属性

src属性は表示させる画像がどこにあるのかを指定します。src属性を書いておかないと、パソコンはどの画像を表示させていいか分からなくなっちゃうので必ず書いておかないといけません。

今回の例でいうとsrc="images/oyakodon.jpg"と、src属性の値がimages/oyakodon.jpgとなっていますね。

ここでの「/」は「～フォルダの」という意味です。今回「oyakocon.jpg」を「images」フォルダに入れたので「imagesフォルダのoyakodon.jpg」という画像を挿入してますよ、と言ってるわけです。忘れず書くようにしましょう。

また、リンクのときもそうだったんですが、他のサイトの画像を表示させたいときはsrc属性の値にURIを入れるといいです。Petanko.orgのバナーだったら

<img src="http://shed.petanko.org/banner/banner1.png" 
alt="Petanko.org" width="88" height="31">

こんな感じですね。さり気なくsrcの属性値以外のところも色々変わってますけど、後で説明しますので今は気にしない気にしない。

そんでもって、これはHTML自体とは関係ないのですが、他の人が作った画像や他のサイトの画像をこのように自分のサイトで表示させること（一般的には直（「じか」もしくは「ちょく」）リンクと呼ばれています）はマナー違反や場合によっては法律違反（具体的には著作権法違反）になり得ます。

ほとんどのサイトさんでバナー意外のが画像ははしたらダメよという方針をとっています。Petanko.orgでもバナー意外の画像は他のサイトからは表示出来ないように設定しています。

中にはバナーも直リンクしないように書いているサイトさんもありますが、この場合はバナーを保存して（右クリックでできます）自分のウェブサイトのフォルダに入れて利用してくださいということです。

直リンクしてもいいよとも、直リンクしたらだめとも書いてないサイトのバナーはどうすればいいかということは、ケースバイケースで分かりませんね。保存しておけば安全ということに間違いはありませんが......。

width属性とheight属性

width属性の値にはその画像の幅の大きさを、height属性の値にはその画像の縦の大きさを書きます。画像ファイルにマウスを合わせた状態で右クリックして、「プロパティ」とかそういう感じの言葉を選べば見られます。手持ちのWindows Vistaでは「右クリック→プロパティ→「詳細」と書かれたウィンドウの上の方のタブ→「イメージ」で区分されたところの「幅」と「高さ」で見ることができます。

「大きさ88×31」みたいに書いてる場合もありますが、その場合、普通は「（幅）×（高さ）」という順番です。逆に書いてる場合はトラップです。

これらは出来る限り書いた方がいいのですが、どうしても分からなかったというような場合は書かなくても特に大きな問題はおきません。

また、ここに書く値は「表示させるときの大きさ」であって、元の画像の大きさと同じである必要はありません。実際にrecipe1.htmlに次のように書いて結果を見比べてみましょう。

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>
<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="180" height="240"></p>

後のほうが幅も高さも２倍の大きさで表示されたことが分かるでしょう。

alt属性

alt属性はimg要素を使うときには必ず書く必要があります。これには画像が表示されない場合、代わりに表示される文字列を書いておきます。

画像が表示されない場合というのは、主に次のような場合を想定できます。

• サーバ（ウェブサイトを見るときにアクセスする先のコンピュータ）が混雑していて画像をダウンロードできなかった。
• 携帯電話などで画像を非表示にしている。
• 視覚障碍者が音声読み上げソフトや、点字ソフトを使って読んでいる。

こういう人が利用する情報だと言うことを考えて、内容を書かないと行けないところがaltの難しいところです。

実際色々な流派がありますので、この辺は自分のサイトの利用者層を考えて適当な書き方をすればいいと思います。代表的な例だけ挙げましょう。

見出しに画像を使っている場合

<h1><img （略）></h1>とすることで画像を見だしとして利用することができます。受け将棋研究室なんかがその例ですね。そのような場合はどんなaltの属性値をつければいいでしょうか。

これに「タイトル画像」なんて書いてしまうと、利用者はずっとそのページのタイトルすら分からないわけです。ですから、alt="受け将棋研究室"とタイトルそのものを代わりに利用出来るようにしておくのがいいわけです。

「注意！」「注目！」などと書かれた画像を段落の最初に置いている場合

これはalt="注意："等と書くのがいいかと思います。

グラフの場合

これは読みづらいことを覚悟の上でalt="○○についてのグラフ。2000年:101件。2001年：96件。......"と書いて行くしか無いと思います。

さて、それでは今回の場合はどうでしょうか？　写真の場合は文字で情報を伝えるのが難しいので一筋縄ではいかないんです。

alt=""

本文に関係のない画像なんかはalt=""と書くことが一般的です。例えば、HTML的に好ましくない例ですが見出しの前後に飾りの画像をいれて居る場合なんかは、alt="見出し用飾り"なんて書かれても読みにくいだけですからね。今回の画像も「ええい、できあがり画像なんかただの飾りじゃい。無くても材料も作り方も必要事項は全部あるじゃないか」と思う方はaltの属性値が空になります。でもあんまりおすすめは出来ません。

alt="親子丼のできあがりの画像"

HTMLの仕様書にも使われた形ですので、一番標準な書き方ではないかと思います。携帯とかで、画像が非表示にしてる人も画像の情報を読んで見たければダウンロードできるといった点がメリットです。ただ音声ブラウザの人には不完全な情報しか伝わらないかもしれませんね。

alt="おいしそうな親子丼ができました。"

「この画像は一体何を表現したいんだろう？　そうだ、できあがった親子丼の美味しそうな様子を伝えたいんだ。」という発想に基づいて書かれたもの。音声読み上げのとき、違和感のない文章になるメリットがありますね。ただ、携帯で見た人は「なにこの画像？」って思ったり、冗長になるという問題があるかもしれません。

alt="親子丼のできあがりの画像：おいしそうな親子丼ができました。"

じゃあ、どっちも書いちゃおうじゃないかという発想です。さっきの場合より更に冗長になるという問題がありますね。

このくらいの知識あれば、割と自由に画像を入れられる事ができるのではないかと思います。また、

とすれば、画像から他のページにリンクを張ることも出来ます。このようなことをする場合、alt属性に適切な情報を入れて画像を見ることが出来ない人が迷わないように配慮する必要があるでしょう。また、この例のようにリンクのa要素にtitle属性を書いておくとリンク先について詳しい情報を記すことができるので利用すると便利になるかもしれません。