| 【 １：画像とは】 | 【 ２：使える画像】 | 【 ３：画像の準備】 |
| 【 ４：画像の貼付け】 | 【 ５：画像の表示】 | 【 ６：リンク】 |
| 【 ７：ここまでのおさらい】 |
【 ８：】 | 【 ９：】 |
【１：画像とは】 ホームページを見ると、写真やイラスト等の画像をよく見かけます。 これにより、そのホームページが華やかになったり、より強く訴えたりすることができます。 画像をうまく利用することが、ホームページを作る醍醐味でもあります。 今回は、その画像について、どのようにホームページ上で表現するのか、やってみます。 文字を書くよりも、少し手間がかかりますが、手順だけ覚えていれば、あとは同じことの繰り返しです。 こんな画像を使います。  １．これは、昨年沖縄旅行の際のデジカメ写真です。 ２．これは、今年の干支のイラストです。 ３．これは、よくご存知のyahooのロゴマークです。それでは、この画像を使って説明していきます。 【頁ＴＯＰへ】 | ||
【 ２：使える画像】 画像は、ホームページで使える画像が決まっています。 それぞれの画像にマウスを当ててみてください。文字が出てきます。 １．の写真の出てきた文字の最後が21.jpg、２．が68.jpg、３．がyahoojp_sm.gifですね。 この.JPG（.jpgは同じ）、.gifが、画像の形式を表します。もう一つ、.ＰＮＧ形式があり、この３つがＷＥＢで使える画像形式になり、それぞれに特徴があります。 【頁ＴＯＰへ】 | ||
【 ３：画像の準備】 画像がホームページ上で使えるようにするには、準備が必要です。 １．の画像の上で右クリックし、「コピー」をクリック、「ホームページフォルダ」の画面で右クリックし、貼り付けを選択すると、「ホームページフォルダ」に１.の画像がコピーされました。 同じように、２．と３．の画像もコピーしておきましょう。 これで準備が出来ました。 【頁ＴＯＰへ】 | ||
【 ４：画像の貼付け】 １．の画像を画面に貼り付けて見ましょう。 前回作った「ホームページ」フォルダの中の、index.htmlをクリックして、ソースを表示してください。 前回の続きの位置に、改行タグを２個付けた後に、次のように書き込みしてください。 <a href="21.jpg"><IMG src="21.jpg" width="150" height="150" border="0" alt="これは、沖縄旅行の際のデジカメ写真です。21.jpg" hspace="80" align="middle">１．これは、昨年沖縄旅行の際のデジカメ写真です。</a> では、上書き保存して、確認してみましょう。どうですか、表示されましたか？ 表示されなかったら、すぐ確認と修正をしてください。 できたら、２．と３．を、次のとおり書いてください。今回は２．の最後の<BR>の後ろで改行しておきましょう。 ２．は<IMG src="68.jpg" width="100" height="100" border="20" alt="明けましておめでとうございます68.jpg" hspace="5" align="top">２．これは、今年の干支のイラストです。<BR> ３．は<a href="http://www.yahoo.co.jp/"><IMG src="yahoojp_sm.gif" width="88" height="23" border="0" alt="yahoo japan yahoojp_sm.gif" hspace="0" align="middle"></a>３．これは、よくご存知のyahooのロゴマークです。 上書き保存して、確認してみましょう。 これで、画像の貼り付けが終わりました。 １．と３．の画像には、リンクがされておりますので、１．の画像をクリックすると、大きな画像がが見られ、３．の画像をクリックすると、ヤフーの検索画面が表示されるようになります。 ２．の画像には、リンク先がなく、画像のみ表示されています。 以外に簡単でしょ。 ここで、表示された３つの画像の違いを確認しておきましょう。 １．の画像・・・大きい、デジカメ写真、jpg形式、左外枠線から大きく離れている、画像と説明文字が離れている、説明文字が画像の中央にある、説明文字に下線がある、マウスを当てると画像も文字もマウスが矢印から指に変わる、 ２．の画像・・・太い枠がある、イラスト、jpg形式、左外枠線から少しだけ離れている、画像の説明文字が上の近くにある、説明文字に下線がない、マウスを当てても何も変わらない、 ３．の画像・・・小さい、ロゴマーク、GIF形式、左外枠線にひっ付いている、画像の説明文字がひっ付いている、説明文字に下線がない、マウスを当てると画像は矢印から指に変わるが文字は変わらない、 ３つの画像の表示の違いはどこから来るのでしょう。 それは次で説明します。 < 【頁ＴＯＰへ】 | ||
【 ５：画像の表示】 画像を表示するタグは、次のとおりです。 <IMG src="画像の名前．形式" width="横幅" height="高さ" border="枠線の太さ" alt="画像が表示されなかったときの説明" hspace="外枠からの距離" align="説明文字の表示位置"> とりあえず、数字や文字をいろいろ変えてやってみてください。この他にもタグはいろいろありますので勉強してください。 画像の名前：名前に使用できる文字は決まっています。半角アルファベットと半角数字はどこでも通用しますので無難でしょう。 画像の形式：写真やイラストは JPG形式で、小さなロゴなどはGIF形式が良いとされています。（但し、GIF形式を使用する場合は、著作権に気をつけなければなりません。） 【頁ＴＯＰへ】 | ||
【 ６：リンク】 なんと言っても、ホームページでリンクが出来ないと話になりません。 でも、簡単ですので、きっちりと覚えましょう。 ３．の画像をクリックすると、yahoo japan のホームページが表示されます。 これは、この画像にyahoo japanのアドレスをリンクさせ、飛んで行くようになっています。 <a href="http://www.yahoo.co.jp/"><IMG src="yahoojp_sm.gif" width="88" height="23" border="0" alt="yahoo japan yahoojp_sm.gif" hspace="0" align="middle"></a>３．これは、よくご存知のyahooのロゴマークです。 この赤の部分が、リンクのためのタグです。この間には、画像でも文字でも入れることが出来ます。 １．の例では、画像から文字まですべてリンクさせているため、画像も文字も矢印から指に変わりました。３．の例では画像だけでした。 また、３の例では、yahoo japan のホームページのアドレスをきっちりと記述していますが、１．の例では、同じ「ホームページ」フォルダの中のファイルへのリンクですので、簡略化しています。 この場合、<a href="http://www.yahoo.co.jp/">のリンクの仕方を絶対パスでリンクと言い、<a href="21.jpg">のリンクの仕方を相対パスでのリンクと言います。 画像も同じで、今回の例では、同じフォルダに画像ファイルをコピーしましたが、まったく別のところにある画像もリンクすることにより表示させることが出来ます。 例えば、このページの一番下のロゴマークは、このフォルダにはありませんが、表示されています。 これはこのロゴマークを、絶対パスでリンクさせていることにより、同じフォルダに格納されていなくても表示することが出来ています。 <IMG src="http://fonbusi.k-server.org/fonlog3.gif" width="88" height="31" border="0" alt="在宅ワークのファーム オフィス ネット" hspace="5" align="middle"> 【頁ＴＯＰへ】 | ||
【 ７：ここまでのおさらい】 おさらい① 画像には、JPG形式やGIF形式等があり、それぞれに適した画像がある。 おさらい② 画像を表示させるには、フォルダにコピーして保存するなどの準備が必要である。 おさらい③ 画像は、様々な大きさで、様々な位置に表示させることが出来る。 おさらい④ 画像や文字には、リンク先を設定することが出る。 おさらい⑤ リンク先の設定方法は、絶対パスと相対パスの２種類がある。 おさらい⑥ 画像も同じように絶対パスと相対パスでリンクすることが出来る。 おさらい⑦ 画像とリンクは、確実に覚え、楽しいホームページを作りましょう。 分かったことは、 ①画像には、名前を付ける。 21.jpg yahoojp_sm.gif など ②画像表示は、<IMG src="画像の名前．形式">で出来、大きさや位置なども指定できる。 ③リンクは、<a href="ファイル名">～</a>で記述し、ファイル名は、絶対パスと相対パスがある。 以上のことが分かったところで、 他のいろいろなページへリンクをして見ましょう。 また、画像も直接、絶対パスでリンクさせてくれるところもたくさんありますので、他のページを見て参考にしましょう。 リンクや画像などのソースの見方がわかったら、ホームページの作成が益々面白くなってきたでしょう。 【頁ＴＯＰへ】 | ||