11.補講・画像の使い方
サイトメーカー「はいはーい。今日から補講でーす。余裕がある人向けの解説でーす」
ホーム君「余裕なんてないよ？僕がこのサイトを見つけたのは夏休みが終わる一週間前だったから」
サイトメーカー「まぁ、そのようなクソガキも多いかもしれませんが、皆さんの中にはクソじゃないガキもいっぱいいるはずです」
ホーム君「クソっていうな！このクソ宇宙人めが！」
サイトメーカー「というわけで、今日は画像の使い方」
ホーム君「画像？そういえば僕のホームページ。文字と色と線だけで、画像を使っていないな」
サイトメーカー「そうです。やっぱり少し寂しいかもね」
ホーム君「でも、画像ってなんだかホームページの作り方の基本のような気がするけど。なんで補講で教えるの？」
サイトメーカー「それはね。初心者には少し難しいからさ」
ホーム君「『少し』と言いつつ補講で教えると言う事実！さてはかなり難しいな！？」
サイトメーカー「いやいや、そこまででもない。まぁ、とりあえず説明だけでも見ていってよ」
サイトメーカー「というわけで、さっそく画像の作り方から説明するぞ。今回は代表的なWindowsでのお絵描きソフト『ペイント』で絵を描いてみよう」
サイトメーカー「まず、左下の『スタート』をクリック→『すべてのプログラム』をクリック→『アクセサリ』をクリック→『ペイント』をクリック」
サイトメーカー「これが、ウィンドウズに最初からついているお絵描きソフト『ペイント』だ」
サイトメーカー「標準機能しかついておらず高度な技術は使えないが、使い方が直感的に分かるので、初めて使うお絵描きソフトとしては最適だ。ペイントソフトの詳しい使い方は他のサイトなどを参照して欲しい。というわけで、とりあえず絵を描こう」
サイトメーカー「描き終わったら『ファイル』メニューの『名前を付けて保存』を選ぶ。画像の名前は何でもいいけど、今回はboyにしておきましょう。
サイトメーカー「この時、ファイルの種類にはGIFを選ぼう」
サイトメーカー「この時、保存場所も覚えておこう。どこに保存すればいいか分からない場合はとりあえずデスクトップにでも保存しておこう。保存時に『画素数が失われます』というような警告がでるかもしれないが、無視して（「了解しましたボタン」とか「OK」ボタンとか押してしまって大丈夫）構わない」
サイトメーカー「保存できたところでいつも通りYahoo!ジオシティーズにログインしてファイルマネージャのページまで行ってください」
サイトメーカー「今回は、今まで全く注目していなかったEZアップロードという機能を使います。右下の「EZアップロード」というボタンを押してください」
ホーム君「『EZアップロード』って何？」
サイトメーカー「第一回『インターネットの仕組み』で教えた通り、あなたのサイトのデータは、あなたのパソコンでは無く『レンタルサーバー』という所に置いてあります。『アップロード』というのは一般的に自分のパソコンから遠くのパソコンやサーバーに情報を送ることを意味します。今回はレンタルサーバーであるYahoo ジオシティーズにあなたのパソコンで作った画像のデータを送ります。送ると言っても、あなたのパソコンからデータが消えてしまうわけでは無く、コピーデータを送ります」
サイトメーカー「画面が変わりました。ここがEZアップロードのページです。参照というボタンが五つ並んでいますが、その中の一つをクリックしてください。すると、あなたのパソコンからどのデータをアップロードするか選ぶことが出来ます。私はデスクトップにboyという名前で保存しましたので、デスクトップにあるboyと言う名前の画像ファイルをダブルクリック（素早く2度左クリック）します」
サイトメーカー「更にオプションには2つともチェックマークを入れましょう」
サイトメーカー「『ファイル名に使われている大文字を自動的に小文字に変換』は、文字通りファイル名に使われている大文字を小文字に変換します。ファイル名は基本的に小文字が使われます（大文字が禁止されているわけではありません）。説明の便宜上もある（つまり、私が説明しやすい）ので、すいませんがチェックしてください」
サイトメーカー「『拡張子「.htm」を自動的に「.html」に変換』も文字通りの意味です。今まで私たちはレンタルサーバー上で直接ファイルを作っていましたが、自分のパソコン（ローカルのパソコン）でhtmlファイルを作ってアップロードすることも出来ます。古いWindowsは拡張子に最大3文字しか使えなかったため、.htmという拡張子でhtmlファイルを作る人がたまにいます。ただ、現在ではWindowsも3文字以上の拡張子が扱えるようになり、インターネット上でも.htmではなく.htmlという拡張子の方が一般的に使われるようになったため、ここにチェックマークを入れます（今回は画像ファイルなので直接は関係ないのですが、今のうちにクセをつけておいてほしいのです。）」
サイトメーカー「オプションに2つともチェックマークを入れたら『ファイルをアップロード』ボタンを押してファイルをアップロードしましょう」
サイトメーカー「ファイルをアップロードしたら、恐らく右側に『ファイルマネージャに戻る』的なリンクが出てくると思うのでクリックして戻りましょう。一応、画像には、もう一つの戻るためのリンクにも目印をつけてきました。
サイトメーカー「ファイルマネージャに戻りました。boy.gifファイルが作られているのが分かるでしょうか」
サイトメーカー「画像を保存するときにファイルの種類にGIFを選んだのを覚えているでしょうか？あの『ファイルの種類』というのは、ファイルの種類だけでなく、拡張子（かくちょうし）も決めてくれます」
ホーム君「拡張子って何？」
サイトメーカー「今までhtmlファイルを作ってきましたが、最後に必ず.htmlとつけていましたね。この.htmlの部分のことを拡張子と言います」
サイトメーカー「実は、『ファイル名に使われている大文字を自動的に小文字に変換』のチェックマークにチェックをいれなければ、Windowsの場合拡張子が大文字のGIFになってしまうようです。が、チェックマークにチェックを入れたので、今回はgifと小文字に変換されています。一般的に拡張子は小文字です。『なんで？』と聞かれると『そういう文化だから』としか答えられませんが。ただ、大文字の拡張子でも一応使えます」
サイトメーカー「さて、あとはhtmlファイルをイジります。新しく作るのもいいでしょう。補講を受けている皆さんなら、もう新しくファイルを作るのも、既にあるファイルをいじるのもお手の物のはずです。今回登場する新しいタグはimgタグです。とりあえず私はa1.htmlファイルを以下の様に作りました」
<html> <head> <title>ページ2</title> </head> <body> ページが変わったぞ！ <img src="あなたのサイトのアドレスboy.gif"> <a href="あなたのサイトのアドレス">トップページ</a> </body> </html>
サイトメーカー「img src=""の""のなかには、「あなたのサイトのアドレス/画像ファイルの名前」を書きます。つまり、ホーム君の場合はhttp://island.geocities.jp/xhtml7/boy.gifとします。リンクと同じですね」
サイトメーカー「おっけー。保存してページ確認だ」
今回は画像が表示される事が大事です。表示出来ましたか？
サイトメーカー「それでは解説です。src=""の部分で画像ファイルの場所を指定します。以上」
サイトメーカー「実は、リンクのタグであるa href=""と画像を表示するためのファイルimg src=""は似ています。リンクのタグはhref=""の所にファイルの場所を書き、画像のタグはsrc=""の所にファイルの場所を書く」
サイトメーカー「マニアーックimgタグ！！はい。突然叫びました。さっき教えたのはimgタグの簡易版です。さっきのimgタグをもっとキチンと書いてみます」
<html> <head> <title>ページ2</title> </head> <body> ページが変わったぞ！ <img src="あなたのサイトのアドレスboy.gif" width="640" height="384" alt="ブルーボーイ"> <a href="あなたのサイトのアドレス">トップページ</a> </body> </html>
サイトメーカー「はい。タグの中にいろいろ書き込みました。width=""には画像の横のサイズを。height=""には画像ファイルの縦のサイズを。alt=""には画像の説明を入れます」
ホーム君「なんでwidthとかheightとかaltとかいるの？確認してみたけど、あっても無くても表示内容が変わらないじゃん」
サイトメーカー「そうですね。widthとheightがあれば、少しだけ表示が早くなります」
ホーム君「そもそも画像ファイルのサイズなんてどうやって調べるの？」
サイトメーカー「あなたのパソコンで作った画像ファイルを右クリックして『プロパティ』を選べば、多分サイズが表示される……はず」
ホーム君「じゃあ、altはなんやねん？」
サイトメーカー「何らかの問題で画像データを取得できない場合（画像の場所へのアドレスが間違えたとか）がございます。そんなとき、画像の代わりにaltの中で書いた文章が表示されます。ほらほら、例えばsrcで指定した画像データの場所が間違ってたりしたらaltの文章が表示されるはずです。また、目の見えない障がい者の方が「音声でインターネットを案内するソフト」とかを使っている場合、その音声ソフトはaltを読み上げます」
サイトメーカー「更に、widthとheightには本来のサイズ以外のサイズも指定できます。そうすると、ブラウザが画像の表示サイズをそれに合わせて変えてくれます。とりあえずやってみます」
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <title>ページ2</title> </head> <body> ページが変わったぞ！ <a href="あなたのサイトのアドレス"><img src="あなたのサイトアドレスboy.gif" width="150" height="200" alt="ブルーボーイ"></a> <a href="あなたのサイトのアドレスboy.gif"><img src="あなたのサイトのアドレスboy.gif" width="200" height="150" alt="ブルーボーイ"></a> <a href="あなたのサイトのアドレス">トップページ</a> </body> </html>
サイトメーカー「同じ画像ファイルはページ内で一度しか使えないわけではありません。何度でも使えます。更に、<a href="">〜</a>タグでimgタグをはさめば、なんとimgタグがリンクのボタンになります。クリックするとa hrefで指定したリンク先に移動します。更に今回はhref属性でhtmlファイルではなくgifファイルそのものを指定してみました。クリックするとgifファイルその物が表示されます」
サイトメーカー「あ、ちなみに<a href="">〜</a>で、同じページから同じページへいくつもリンクを貼ることも出来ます。あんまり意味はありませんが」
サイトメーカー「あと、画像というのはウェブサイトの一つのページにたくさん使うと、そのページが重くなります（読み込むのが遅いページを通称「重いページ」と言います）。そう、ちょうどあなたがこのページを見ているように！無駄な画像は極力使わないようにしましょう」
サイトメーカー「どうでしょう？そろそろ頭がパンクしそうですか？」
サイトメーカー「マニアックimgタグ2！！はい。また叫びました。今回は2です。拡張子の話です。画像を保存するとき、そのままの状態（デフォルトの状態）ではbmpという形式で画像を保存しようとしていやがりました」
サイトメーカー「bmpという形式の画像はインターネットの世界では一般的ではありません。インターネットで使われている画像ファイルの主な拡張子は今回のgifとjpgそしてpngです」
サイトメーカー「それぞれの違いを説明します。まずはgif。古くからある画像形式ですが低機能です。主に、お絵描きソフトで描いた画像に使用されます」
サイトメーカー「続いてjpg（jpeg）。主にデジカメで撮った写真をサイトに載せたい時に使う拡張子です。サイトでの使い方は、今回のやり方と同じように普通にアップロードしてsrc指定の時にファイル名を指定すればいいだけ（拡張子は恐らく.jpg）です。簡単ですね」
サイトメーカー「pngはgifの進化バージョンです。gifより高機能で、画像ももっと美しい画質で保存できます。が、古いインターネットを見るソフトだとpngに対応していない場合があります。個人的にはgifよりもpngを使っています」
サイトメーカー「確か、私の記憶では昔Windows XPのペイントソフトではpngという拡張子がそもそも無かったはずですが、今回試してみたらありました、pngの拡張子。バージョンアップしたのかな？」
サイトメーカー「これも使い方はgifやjpgなどと同じく、普通にアップロードして普通にsrc属性でファイルの場所と名前を示せばいいだけです」
サイトメーカー「imgタグマニアック3！！はい。遂にスリーです。皆さん、今回ペイントソフトを初めて使ってみてどうでしたか？『うまく描けねぇ！』って人が大半だったと思います。そうです。慣れないとパソコンで絵を描くのは意外と難しいのです。絵にこだわる人は、ペンタブレットという、ペンの形のマウスを使うそうです。私は使ったことありませんが」
サイトメーカー「そんな人の為に素材屋さんというサイトがあります。ウェブサイトで使うための画像などの素材を提供している所です。試しに検索してみると結構あると思います。慣れないうちはそういうサイトの素材を使うのもいいですね。使い方はそれぞれの素材サイトの『使い方』などを参照してください」
サイトメーカー「というわけで、画像の使い方は以上。ホーム君、ついてこれたかな？」
ホーム君「わけもわからず台本を渡されて質問をするように指示されたことに対して我々地球人は厳重に抗議するぞ！」
サイトメーカー「ふっ。やはり選ばれた人間しか画像は使えないみたいだな」
ホーム君「……さて。ついに補講も終わりか。今度こそサイトメーカーともお別れ。でも、涙は見せないよ。なぜなら、ボク達は男同士、固い友情で──」
サイトメーカー「次回！補講2・色々なタグ！」
ホーム君「えぇっ！？」