画像の練習

［ＨＰを作ろう！］　☆第１２回☆ こんにちは、ＴＨ６９です。前回は背景の画像の表示についてやったんですけど、分かって頂けたでしょうか？もし分かりにくい点やうまく行かないという事がありましたら、メールもしくはＴＨ６９掲示板への書き込みで、ご質問下さいね。フリーの画像サイトにもいろいろあり、完全にフリーで使わせてくれるサイトもあれば、リンクが条件のサイトやメールを送らないといけないサイトなどもあります。私の場合は、なるべく完全にフリーのサイトの画像を使うようにしています。ただ、面倒臭いだけなんですけどね（笑）。そういうサイトも幾つか見つかりましたので、また紹介したいと思います。では、第１２回を始めましょう。今回はいよいよ画像の表示についてです。これをマスターすれば、デジカメの写真やイラストなどの画像を、ＨＰに載せる事ができるようになります。自分でＨＰを作る時には絶対に必要になりますので、確実にマスターして下さいね。まず、前回と同じように［素材集］のページを表示させておいて下さい。（表示させたらオフラインにしても大丈夫です）［素材集］のページに『Welcome』と『Mt.Cook』の画像がありますので、それを自分のパソコンに保存しましょう。［homepage］フォルダの中の［gazou］フォルダに保存します。前回やったので大丈夫だとは思いますが、分からなかったら復習して下さいね (^ ^; 保存する時には、半角英数で名前をつけるのを忘れないようにして下さい。『Welcome』は［welcome.gif］で、『Mt.Cook』は［mt_cook.jpg］で保存します。［mt_cook.jpg］の『_』は、アンダーバーと言って、［shift］キー＋［ろ］キーで入力できます。ファイルの名前には『.』は使えないので、区切りを入れたいときなどに使います。保存できたら、一応ファイルを開いて確認して下さいね。特に『Mt.Cook』は JPG ファイルですので、拡張子の記入には注意して下さい。次に、練習用に新しくページを作ります。メモ帳を開いて次の設定で作ってみて下さい。１）タイトルは『画像の練習』です。２）背景色は黄色(#ffff00)、文字色は青(#0000ff)にします。３）ベースフォントサイズは"３"にします。４）ページの名前は『test2.html』にして［homepage］フォルダに保存します。以上の設定で新しいページを作って下さいね。出来たでしょうか？下に例としてＨＴＭＬを書いておきますので、参考にして下さい。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～画像の練習～～～～～～～～～～～～～～～～～～～～～～～～～～～～～では、［homepage］フォルダを開いて［test2.html］を開いて下さい。開いたら、背景が黄色のページが表示されますね。これから、そこに画像を表示させる練習をしましょう。上のＨＴＭＬのの次（下）に『

』と記入して下さい。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～画像の練習

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～のようになりますね。それでは、上書き保存して、ページの更新ボタンを押して下さい。どうなりましたか？ページの左端に『WELCOME TO MY HOMEPAGE』の画像が表示されませんでしたか？表示されれば成功です。表示されない時は、もう一度ソースが正しいかどうか確認して下さい。それでも駄目な場合は、画像が［homepage］フォルダの中の［gazou］フォルダに保存されているかどうか、また、画像の名前が正しいかどうか、拡張子が合っているかどうかなどを確認して下さいね。それでも駄目な時は、ご質問下さい…。次に、もう一つの画像『Mt.Cook』を表示させてみましょう。先ほど入力した

の次（下）に『

』と記入して下さい。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～画像の練習

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～のようになりますね。できたら、上書き保存して、更新して下さい。どうなりましたか。２つの画像が横に並んで表示されたでしょうか？下に書いたのに、どうして？　と思われた方はいらっしゃいませんか。これは、以前
を勉強したときと同じなんです。ブラウザはソース上でいくら改行されていても、ちゃんと指示してやらないと改行してくれないんです。では、下に表示したい時はどうすればいいのでしょう？もうお分かりと思いますが、やはり
タグを使用します。画像も一つの文字と同じように、認識されるようですね。

の後ろに
タグを付け足して下さい。変わりましたか？最後に、画像が端ではページとしてぱっとしないので、中央に表示させましょう。さらに、画像の間が詰まり過ぎているので、
タグで調整しましょう。（これはテキストの場合と同じですね）皆さん、自分でやってみて下さいね。答えは下に書いておきます。～～～～～～～～～～～～～～～～～～～～～～～～～～～～画像の練習

～～～～～～～～～～～～～～～～～～～～～～～～～～～～皆さん、どうでしたか？うまく行ったらとても楽しいですが、うまく行かないと『う～ん』と考えてしまいますね (^ ^; そういうときは、最初からやりなおしてみるのが一番です。時間が掛かりそうに思いますが、結局一番早いと思います。それから、今回のタグ

は、img はイメージの略かなとわかるのですが、 src はよく分かりません。そういうものとして覚えて下さいね。 "***" の中では、背景の時と同じように、画像の保存してある場所を指定します。今回の場合は「gazou フォルダの welcome.gif ファイル」となります。もし、画像フォルダの下に、さらに［syasin］というフォルダがあるとすると、

のようになります。画像が増えてくると収拾がつかなくなるので、最初からフォルダを階層化してページ作りをする、というのがコツですね (^o^) 次回は実際に［私のホームページ］のページに、画像を表示させて見ましょう。では、第１３回でお会いしましょう。