僕は？
皆さんが見ているこのパソコンの画面に映し出されている画像はいったいどのように表示されているかわかりますか？まあ大体想像はつくと思います。ブラウン管のテレビ画面(別にパソコンの液晶でも構いませんが)を近くでよく見ると、小さな点が集まって出来ているのがわかると思います。この小さな点がそれぞれの色を出し、それが細かく組み合わさって一つの画像が出来るのです。言わば貼り絵ですね。と、ここまでわかってくれれば問題ありません。ただ、これをビットマップ形式と呼ぶのですが(ビット＝点、マップ＝地図)、これに対してベクタ形式というものもあるのです。覚えなくても支障はないと思うので、ここでは説明を割愛させて頂きます。
一口に画像と言っても色々な種類があります。日常生活で画像の種類と言えば、肖像画とか風景画とかデッサンとか油絵とか写真とか映像とか、色々な意味の種類がありますが、そういった意味での画像の種類はここでは関係ありません。問題になるのは画像の保存(表示)形式なのです。そして主にWebサイトで使用される形式(フォーマット)はGIF,JPEG,PNG,(BMP)の三種です。なぜ三種類もあるのか、一つにまとめればいいのにという意見ももっともですが、それぞれに長所と短所があるので仕方がないのです。それぞれの特徴を覚えて上手に使いわけましょう。
使用する画像には GIF,JPEG,PNG,の三種があることがわかりました。では次はそれぞれの特徴を把握しましょう。
僕は？
GIFですね。私もGIFです。
それでは、色々なWebサイトにある画像はどのように作っているのでしょうか。全部自分で描いたり撮ったりしているの？という疑問もおありでしょうし、絵の才能も無ければカメラも持っていないという方もおられるでしょう。そんな方々の為に画像を無料で配布しているサイトがあるのです。
Webサイトで使われる画像の事を「素材」などといい、無料で使えるものを「フリー素材」、配布しているサイトを「素材サイト」「素材屋」などと呼んだりします。
どうして無料なの？
色々と理由はあると思いますが、善意だからだと思います。
それでは素材屋さんに行って好きな画像をダウンロードしてきてください…と言いたい所ですが、どのような画像を使うのかが決まっていない段階で、あれもこれもと選んでいるのはハッキリ言って時間の無駄です(経験済み)。一通りサイトの創り方を学び、どんな画像が必要なのかを決めてから素材屋さん巡りをすることをお勧めします。それまでは画像の入手方法や、使用方法を学ぶ為に、当サイトが用意した我慢して下さい。
画像ファイルは得てして多くなりがちで、他のHTMLと同じ場所に入れてしまうと、後々整理が大変になってきます。そこで画像は imageフォルダという新しいフォルダを作り、その中に一括してまとめてしまいます。
フォルダの名前は特に image にしなければならないわけではありませんが、ここでは image とします。また、HTMLファイルの順番や、imageフォルダの順番(場所ではない)は上記の図の通りでなくても構いません。
つまり websiteフォルダの中に全部納まっていて、隣同士に並び同時に見えていればそれで結構です。
それでは画像のダウンロード(入手)の方法を説明します。ここでダウンロードしてもらうのは当サイトのリンクバナーです。いらなければ後で捨てれば良いので、今は我慢して下さい。
( 静止画バナー ⇒ 600 バイト )
( アニメーションバナー ⇒ 5.89 キロバイト )
ファイルの種類が GIF ではなく BMP になってしまい、それ以外は選択できないという方は インターネット一時ファイルを削除するには (Microsoft) を参考にしてインターネット一時ファイルを削除してから再び試行してみてください。
これだけ？
そうです。たったこれだけでWEBに出回っている画像を貴方のパソコンに保存(複製)することが出来るのです。
って事はあんな画像や、こんな画像も・・・。クックックッ。
詳しく説明はしませんが、法律は破らないように気をつけてくださいね。
・・・・・・・・・。
さあ、上でダウンロードした画像を表示させます。そのマークアップには <img> を用います。IMAGE(画像)の略で img ですからわかり易いですね。この <img> には終了タグというものが存在しません。このような物を単独タグと呼びます。それでは wlink.html を編集して、このリンクバナーを表示させてみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>リンク(ホームページ)</title> </head> <body> <h1>リンク(ホームページ作成支援)</h1> <p> ここは管理人ララがホームページを作成するのに お世話になっているサイト様へのリンクページです。 </p> <h2>講座</h2> <dl> <dt> <a href="http://w2.makko.biz/~rara/"><strong>真面目に創るWebサイト</strong></a> <img src="image/mwb.gif" alt="真面目に創るホームページ" width="88" height="31"> </dt> <dd> 管理人 : <em>rara</em> さん </dd> </dl> <h2>素材</h2> <dl> <dt> <a href="http://www.ushikai.com/"><strong>牛飼いとアイコンの部屋</strong></a> </dt> <dd> 管理人 : <em>Y.Kishino</em> さん </dd> </dl> </body> </html>
wlink.html - メモ帳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>リンク(ホームページ)</title> </head> <body> <h1>リンク(ホームページ作成支援)</h1> <p> ここは管理人ララがホームページを作成するのに お世話になっているサイト様へのリンクページです。 </p> <h2>講座</h2> <dl> <dt> <a href="http://w2.makko.biz/~rara/"><strong>真面目に創るWebサイト</strong></a> <img src="image/mwb.gif" alt="真面目に創るホームページ" width="88" height="31"> </dt> <dd> 管理人 : <em>rara</em> さん </dd> </dl> <h2>素材</h2> <dl> <dt> <a href="http://www.ushikai.com/"><strong>牛飼いとアイコンの部屋</strong></a> </dt> <dd> 管理人 : <em>Y.Kishino</em> さん </dd> </dl> </body> </html>
説明をせずに記入してもらいましたが、src="" alt="" というのは <a>〜</a> の時に出てきた href="" と同じ属性です。この属性は各要素(タグ)によってどんな属性を付けることが出来るのかが決まっています。上記の様に複数の指定も可能で、その場合は属性と属性の間に半角スペースを入れます。
おお!表示された!
書かれている通りに記述するのは簡単ですが、いざ自分でやるとなるとこれが中々難しいようで、多くの人が躓く場所でもあります。その理由は src属性の属性値なんですが、ここには前に出てきた相対パスを記入します。しかし、以前に出てきた相対パスとは少し違いがあるのがわかりますでしょうか。その辺りについて次項にかけて詳しく説明して行きますので、理解できるまでじっくりと読んでください。
本当だ。こっちは image/ っていうのが付いてる。でも簡単だったけどなぁ・・・。
ちょっと何の略かわかりませんが、source の src かなと思います(全然違うかも知れません)。要するに源は何か(どこか)というのを指定する属性です。属性値には絶対パス及び相対パスが入ります。しかし、先に述べたようにここでは相対パスを記入する事になります。今回記入した相対パス image/mwb.gif については後ほど説明致します。それから img要素ではこの src属性は必須です。つまり必ず記入しなければなりません。
alt は alternate (もしくは alternative ) の略で(多分)、「交替」とか「替わり」というような意味があります。属性値には文字列が入り、これを主に代替テキストと呼んだりします。その名の通りにこの代替テキストは、画像が表示されない(しない、させない、する必要のない、する意味のない)時に、画像の替わりに表示(もしくは読み取り)されます。どういった事を書けば良いのかは後述しますが、なくてはならないものだと覚えておいてください。
img要素における href属性や alt属性は必須属性と呼ばれ、その要素でマークアップを行う場合には、必ず付けなければなりません。つまり <img> を使用する場合には必ず src="" と alt="" が必要になります。ですから <img>(画像) を使用する場合は <img src="" alt=""> と1セットにして覚えておきましょう。
この二つは必須属性ではありません。付けても付けなくても構いません。意味はそのままで width は横幅を表し、heightは縦幅を表します。この属性を付加する事によって、画像を表示させるときの大きさを決定する事が出来ます。
この二つの属性を指定しなくともブラウザは、画像の大きさを認識して表示します。ですから元の大きさで表示させる場合はこの属性は必要ありません。しかし、指定しておく事によってブラウザによっては画像の表示速度が上がるということがあったらしく、元の大きさでもそれと同じ大きさを指定するという慣習が残っています。検証していないのでどこまでが本当なのかはわかりませんが、書いても書かなくてもどちらでも結構です(私は書いています)。
この二つの属性は、そのほとんどの場合で画像と同じ大きさを指定します。例えば元々100×100の大きさの画像を50×50で表示させたい場合は、この属性を用いて width="50" height="50" とするのではなく、画像そのものの大きさを画像編集ソフトなどで50×50の大きさに編集するのです。
画像は <img src="相対パス" alt="代替テキスト" width="横幅" height="縦幅"> っと。
そうです。そうです。そうやってまとめて覚えておいてください。
ただなんとなく流して読んでいる人は疑問に思わないかもしれませんし、既に相対パスを理解している人は納得していると思いますが、そうでない人は image/ に疑問を持っていることでしょう。リンクのページでは<a href="profile.html"> と記述しました。どこにも image/ なんて出てきませんね。だとしたら <img src="mwb.gif" alt="真面目に創るホームページ" width="88" height="31"> でいいのではないのか？そう思うかもしれませんが、これでは(今回の場合は)ダメです。もうこの辺りで察しがつくと思いますが、image/ というのはこのページで最初に作った imageフォルダの事なのです。imageフォルダの中に入っている nwb.gif だから image/mwb.gif なのです。もちろんこんな簡単な説明では理解しろという方が無理ですね。何を問題にしているのかもわかり難いかもしれません。ですから実験をしたいと思います。
<img src="mwb.gif" alt="真面目に創るホームページ" width="88" height="31">
画像(リンクバナー)が表示されないことがわかったら <img src="image/mwb.gif" alt="真面目に創るホームページ" width="88" height="31"> に戻しておいてください。
<img src="mwb.gif" alt="真面目に創るホームページ" width="88" height="31"> でも大丈夫な場合があるのですか？
はい。例えば リンクのページ では全てのHTMLファイルが同じ場所(websiteフォルダの中・隣)(同じ階層(ディレクトリといいます))にありますよね。こういった場合では『隣の profile さん』なので href="profile.html" で良いのです。しかしながら今回は『隣』ではありません。mwb.gifは同じ website マンションには入っていますが、さらにimageフォルダの中に入ってしまっています。例えるのならば下の階にいるのです。例えば同じマンションに住んでいても5階の高橋さんと、4階の高橋さんでは違いますよね。
image階 の nwb.gifさん ってこと？
そんな感じです。さらに詳しく補講で説明します。
補講2：相対パス 
それでは保留しておいた photo.html のページの写真をダウンロードして保存し、それを表示させてみましょう。
おおっ!写真がいっぱい!
素人が撮った写真なんで観るに堪えないと思いますが、自由に使ってくださって結構です。
これって imageフォルダに入れないとダメなんですか？
その辺りが相対パスに関係してくるんです。「マイ ピクチャ」なんかに入れてしまうと表示できません。今までの例えで言えば、全く違う国に画像が入っているというイメージです。日本の高橋さんと、アメリカの高橋さんでは・・・（略
補講2：相対パス
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]
