| GIF と JPEG |
画像ファイルの話を少し・・・
通常の画像ファイルは、サイズが非常に大きいので、
そのままＨＰに載せると、転送に長時間かかります。
ＨＰでは、できるだけ画像の品質を落とさずに、
サイズを小さくする方法で圧縮した画像のみを扱います。
画像を圧縮して保存するための技術は二つあります。
「GIF」と「JPEG」
どちらも、イラストや写真などの
「画像ファイル」を保存しておく形式です。
| ＧＩＦ （ジフ） 拡張子は 「．ｇｉｆ」 | Graphics Interchange Format 画像ファイル圧縮技術の一つ 最大２５６色までの色しか使えないが、サイズが非常に小さくなるのに画像が劣化しにくい コンピュータで書いた絵を圧縮するのに向いている |
| ＪＰＥＧ （ジェイペグ） 拡張子は 「．ｊｐｇ」 | Joint Phatographic Experts Group 画像ファイル圧縮技術の一つ フルカラーまで表すことができる 主に写真などをＨＰに掲載するときに使われる |
| 画像を取り込む |
とりあえず使う画像を調達しましょう。
ここでは、インターネットから画像を取り込んで見ましょう。
つぎの順に作業してください。
上の画像の上にポインターを合わせて、右クリック
↓
「名前を付けて画像を保存」をクリック
↓
「保存する場所｣は、自分のＨＰファイルのあるフォルダを指定
↓
「ファイル名」は「logo.gif」に
↓
「ファイルの種類」が「GIF(*.gif)」になっているのを確認
↓
｢保存」をクリック
・・・注意・・・
ネットから取り込む場合は、
はじめから、ファイル名とファイルの種類は表示されている
名前を変えたいときに、ファイル名を変える
ファイルの種類は変えないで・・・
| 画像を貼ろう |
ＨＰに画像を貼ると、ぐっとインパクトが強くなります！
・・・イメージ貼り付けのタグ・・・
| <img src="・・・.gif"> | GIFファイルの場合 |
| <img src="・・・.jpg"> | JPEGファイルの場合 |
・・・イメージタグの属性・・・
| width="・・・" | 画像ファイルの横の幅(数字） |
| height="・・・" | 画像ファイルの縦の高さ(数字） |
| align="left" align="right" | 画像を左寄せにする 画像を右寄せにする |
| border="・・・" | 画像に枠をつける（数字） |
| alt="・・・" | 画像の説明を表示させる（文字可） |
では、いよいよお待ち兼ねの実験です
ソースNo. 11の「index.htm」ファイルを出して
赤の部分を書き込んでください。
No. 12
|
<html> <head> <title> ＨＴＭＬ勉強会 </title> </head> <body bgcolor="lavenderblush"> <center> <img src="logo.gif" border="1" width="297" height="77" alt="これは、ロゴです！"><br><br> <h2>自分のＨＰを持とう！</h2> お手本は<a href="http://www.yahoo.co.jp/">ヤフー</a>で探そう！<br><br><br> わたしの<a href="like.htm">お気に入り</a>も見てください！<br><br><br> </center> </body> </html> |
更新手続きをしましょう。
こんなふうに見えますか？→ 新しくなった「index.htm」
ついでに文字の編集や背景色の変更もして楽しみましょう！
| 画像の回り込み |
イメージをページのどこにレイアウトするかを決めます。
今まではセンターに置きましたが、
どこでも好きなところに置けます。
微妙な位置関係はテーブルを利用しますが、
右、左、テキストとの関係も、イメージタグで決まります。
・・・イメージタグの属性・・・
| align="・・・" | イメージの配置を決める |
| "left","right" | イメージを左、右のどちらにおくか決める |
| "top" "middle" "bottom" | イメージはひとつの文字として扱われる 縦方向のテキストの位置を決める |
| <br clear="all"> | 配置の命令を解除する これは、次の行に移るときに書く 忘れると、配置が崩れることがある |
実験しましょう
|
<img src=image/memo.jpg width=65 align=left height=65 border=1 alt=メモ帳> 画像左寄せの配置<br><br clear=all><br> 画像右寄せの配置<img src=image/memo.jpg width=65 align=right height=65 border=1 alt=メモ帳><br><br clear=all><br> <img src=image/memo.jpg width=65 align=absbottom height=65 border=1 alt=メモ帳> 画像左寄せ、テキストはボトムに<br><br clear=all><br> 画像右寄せ、テキストはトップに <img src=image/memo.jpg width=65 align=top height=65 border=1 alt=メモ帳><br><br clear=all> 画像右寄せ、テキストは中間に <img src=image/memo.jpg width=65 align=middle height=65 border=1 alt=メモ帳><br><br clear=all> |
更新するといろいろな配置がわかります。
 画像左寄せの配置画像右寄せの配置 画像左寄せ、テキストはボトムに画像右寄せ、テキストはトップに 画像右寄せ、テキストは中間に |
次回は画像を作ろう
制作者のＨＰかぼちゃの旅