３章　画像表示とレイアウト

３章　画像表示とレイアウト

　３章では、ホームページへの画像の表示の仕方や、改行・改段落といった簡単なレイアウト方法について学習します。

サンプル画像をホームページに貼ってみよう

　画像表示用のサンプルデータを用いて、ホームページに絵を表示してみましょう。

画像を表示するためには、IMGタグを使用します。
IMGタグは本文中（BODYの開始タグと終了タグの間）に記述し、終了タグはありません。

例：	<IMG SRC="画像のファイル名">

それではサンプル画像（sample01.jpg）をホームページに貼ってみましょう。

(samle01.jpg)

入力：	<IMG SRC="sample01.jpg">

表示できる画像の特徴

　マイクロソフトインターネットエクスプローヤやネットスケープナビゲータといったWWWブラウザは、標準でJPEGとGIFの画像を表示する機能を持っております。

JPEG：（Joint Photographic coding Experts Group、「ジェーペグ」と読む）

GIF：（、「ジフ」と読む）

JPEG形式

長所１：フルカラーが扱え、写真のような画像に向いている。

長所２：大きな画像の場合、GIF形式よりもデータサイズが小さい。

短所１：小さな画像には向いていない。

短所２：透明な画像、動く画像を作れない。

GIF形式

長所１：小さい画像の場合、JPEG形式よりもデータサイズが小さい。

長所２：透過GIFが作れる（一部分または全体が透明な画像）。

長所３：アニメーションGIFが作れる（動く画像）。

短所１：大きな画像には向いていない。

短所２：256色までしか使用できない。

画像を思い通りに配置してみよう

　画像は、IMGタグを使用しホームページに表示させるが、普通に表示させると１つの文字と同じ扱いとなってしまう。

（例）

あいうえお<IMG SRC="sample01.jpg">かきくけこ

あいうえお

かきくけこ

表示結果

　では画像の右側または左側に文字を表示させるには、どうすればいいのか。
画像の右側または左側に、文字または画像等ほかの素材を表示させるには、IMGタグのオプション属性であるALIGNを使います。

（例）

<IMG SRC="sample01.jpg" ALIGN="left">あいうえおかきくけこさしすせそ・・・

あいうえおかきくけこさしすせそ・・・

表示結果

（例）

<IMG SRC="sample01.jpg" ALIGN="right">あいうえおかきくけこさしすせそ・・・

あいうえおかきくけこさしすせそ・・・

表示結果

補足情報：画像をホームページに表示できるのはもちろんですが、普通に表示できるものだけでなく、ウインドウの壁紙としてもタイル状に表示させることもできます。
壁紙として表示させるには、BODYタグのオプション属性BACKGROUNGを使用します。

（例）	<BODY BACKGROUND="sample02.gif">本文</BODY>

こんな感じになります。

　

表を書いてみよう１

　ホームページを美しくレイアウトするために、表機能（TABLEタグ）がよく利用されます。
この節では、表を作成するために必要となるTABLEタグとTRタグ、TDタグを説明します。

　表は、表の定義を行うTABLEタグ、表の中の行を定義するTRタグ、さらに行の中のセル（表の中の1つの枠）を定義するTDタグなどを使用することによって、作成することができます。

（記述例１：）

セル

表示結果１（わかりやすいように枠線を表示しています）

（記述例２：）

セル１

セル２

表示結果２（わかりやすいように枠線を表示しています）

（記述例３：）

セル１

セル２

表示結果３（わかりやすいように枠線を表示しています）

（記述例４：）

セル１	セル２
セル３	セル４

表示結果４（わかりやすいように枠線を表示しています）

　上記4つの例をご覧いただいて、TABLEタグとTRタグとTDタグの関係が理解できたかと思いますが、1つの表にTABLEタグは1つ、1行（セルの横のまとまり）にTRタグは1つ、最小単位であるセル1つにTDタグは1つあり、TABLE開始タグと終了タグの間にTRタグ、TR開始タグと終了タグの間にTDタグを記述します。
各枠内に表示する文字や画像は、TD開始タグと終了タグの間に入力しIMGタグで設定します。
（TDタグのかわりにTHタグを使用すると、セル内の文字は強調表示されます）

　

表を書いてみよう２

　簡単な表が作れるようになったところで、枠線を表示させたり、背景色をつけたり、セルを結合したりしてみましょう。

　表の枠線を表示させるには、TABLEタグのオプションであるBORDER属性を使います。
（BORDER属性を記述しない場合は、枠線が見えません）
枠線を表示するには、TABLE開始タグ内にBORDER="枠線の太さ(ピクセル)"を記述します。

（例）

セル

表示結果

枠線は設定した表のすべての枠線に適用されます。
（マイクロソフトインターネットエクスプローラでは、一部の線だけを表示させることもできます）
どうしても表の一部だけ表示したくない場合などは、表のセルの中（TDタグ内）にもう一つ表を作り、その表のBORDERを"0"にすれば実現できます。

　表に背景色を付けるには、TDタグまたはTHタグ、TABLEタグのオプションであるBGCOLOR属性を使います。
（見ている人の環境によっては、TABLEタグにBGCOLOR属性設定をした場合に、背景色が正しく表示されない可能性があります）
TABLEタグにBGCOLOR属性を設定した場合は、表全体の背景色の設定となり、TDタグまたはTHタグにBGCOLOR属性を設定した場合は、各セルの背景色の設定となります。

（例）

セル１

セル２

表示結果

　セルの結合には、TDタグまたはTHタグのオプションであるROWSPAN属性やCOLSPAN属性を使います。

（例：）

セル１	セル２
	セル３

表示結果

（例：）

セル１
セル２	セル３

表示結果

　ROWSPAN属性は、縦方向のセルの結合でいくつのセルを結合するのかを設定します。
COLSPAN属性は、横方向のセルの結合でいくつのセルを結合するのかを設定します。
COLSPAN属性とROWSPAN属性を同時に設定することができますが、結合されたセルの形は必ず四角くなります。
（複雑な形のセルを作ることはできません）

　

表を使っておしゃれなレイアウトをしてみよう

　それでは、TABLE作成機能を利用して複雑な表を作ってみましょう。

（例：）

黒		赤
青	黄
	緑

横幅設定：WIDTH="[n,%]"
縦幅設定：HEIGHT="[n,%]"

背景（黒）：BGCOLOR="#000000"
背景（赤）：BGCOLOR="#ff0000"
背景（青）：BGCOLOR="#0000ff"
背景（黄）：BGCOLOR="#ffff00"
背景（緑）：BGCOLOR="#00ff00"

横位置設定（左）：ALIGN="left"
横位置設定（中央）：ALIGN="center"
横位置設定（右）：ALIGN="right"

縦位置設定（上）：VALIGN="top"
縦位置設定（中央）：VALIGN="middle"
縦位置設定（下）：VALIGN="bottom"

考え方は、左上のセルから順番に右方向へ設定していき、次の行の設定に移る。
２行目を左側から設定していく。（既に１行目で設定されている赤色のセルは、２行目では設定の必要はない）
３行目の１番左側のセルは２行目で既に設定されているので飛ばし、まだ設定されていない緑色のセルを設定する。　複雑な表も上記のように、左上から横方向へ１行ずつ設定していき、上の行で既に設定されているセルは飛ばしながら、表の最後まで設定していくだけである。

　（例：）の表の右側にTABLEタグやTRタグ、TDタグやTHタグでよく使用するオプション属性と背景色を記述しておいた。
（各タグのオプション属性については、ＨＴＭＬタグ一覧を参照していただきたい）

　この節の（例：）のHTMLソース（記述例）や、世界中にあるホームページを見ていて「いいなあ～」と思った場合、マイクロソフトのインターネットエクスプローラの場合は、WWWブラウザの[表示メニュー]の中の[ソース]を選択すると、HTMLの中身の見を見ることができます。
ネットスケープのナビゲータ（コミュニケータ）の場合も、同様の操作で見ることができます。
この節の（例：）は

　　　と

　　　　　　・・・　HTMLソース　・・・

　　　の間に

に記述されています。