•HSPACE と VSPACE 指定によるスペーサー <IMG SRC="spacer. gif" WIDTH=I HEIGHT=I HSPACE=IO VSPACE=IO> WIDTH 十 (HSPACEX2)=21 ビクセル HSPACE = 10 GIF 03 工 EIG 工 T 十 (VSPACEX2)=21 氏ヾ -tz レイアウト 1 X 1 上記の例は 1 X 1 ピクセルのスペーサー G 下の左右 ( H S PAC E ) に 1 0 ピクセル、上下 ()S PAC E) に 1 0 ピクセルの余白を設定していますので、計 21 X 21 ピクセルのスペーサー となります。 HS PAC E と VS PAC E は常に両側に設けられるため、計 2 ピクセル単位で余白 を付加することになります。この方法だと一見奇数の組み合わせしかできないようですが、 スペーサー GIF を 2 X2 ピクセルにしておけば偶数の大きさのスペーサーを作ることができ ます。例えば 20X20 ピクセルのスペーサーを作るには 2X2 ピクセルの画像に対し 9 ピクセ ルの HSPACE と VSPACE を付加すれば 2 十 ( 9X2 ) = 20 ピクセルとなります。 「 1 これらはどちらの方法でもスペーサーの機能としては同じ役割を果たしま すが、プラウザでは通常、画像の読み込み時や画像がうまく読み込めなか ったときに画像の輪郭線が表示されてしまうため、できれば見せたくない スペーサーの存在が見えてしまいます。そういった意味では 1 x 1 ピクセ ルのスペーサーに VSPACE と HSPACE を付加して使用する方が、比較的そ の存在を目立たないようにすることができます。 048 HTML DESIGNS

DISPLAY Spacer GIF lndent 、 0 0 0 べ心 / 戻る進む中止更新 行頭に幅 20 ビクセルのスべサ引 F が入っています。 行頭に幅 40 ビクセルのスペーサー引 F が入っています。 行頭に幅 60 ピクセルのスペ・一サ引 F が入っています。 行頭に幅 60 ビクセルのスべサー引 F が入っています。 行頭に幅 1 00 ビクセルのスべサ引 F が入っています。 レイアウト ローカレマシンゾ - ン ロ Spacer GIF lndent 、 0 00 雪 A 心 戻る進む中止 一行頭に幅 20 ビクセルのスペーサ引 F が入っています。 行頭に幅 40 ビクセルのスペーサー引 F が入っています。 行頭に幅 60 ビクセルのスペーサ引 F が入っています。 行頭に幅 60 ビクセルのスべサ引 F が入っています。 行頭に幅 100 ビクセルのスペーサ引 F が入っています。 ローカ′レマシンソ - ン スペーサー G 旧を色付きのものに変更し見えるようにした状態。 050 HTML DES GNS

A C T 10 N 複数のフレームを入れ 替える 2.0 以上 3.0 以 2.0 以上 0 3.0 以上 Macintosh フレーム構造の上でリンクを作成するとき、く A > タグの TARGET="—" 属 性ではいちどにひとつのフレームしか書き換えることができませんが、 JavaScript を使えば複数のフレームを同時に書き換えることが可能です。 下記の例ではメニュー用のフレーム " frame3 " から項目を選択すると、タイ トルを表示している見出し用のフレーム "framel" と本文を表示しているフ レーム " frame2 ”が同時に書き換えられます。 Windows e M ic ′ 050ft lnternet ExpIorer Netscape Comれtuれ icatO ′ アクション ■フレーム定義 3 段積みのフレームとして、見出し用の " framel " 、本文用の " frame2 ' 、 メ ニュー用の " frame3 " を定義しています。 S 0 U C E く H T M L > く H E A D > く TITLE>MultipleFrame く /TITLE> く / H E A D > <FRAMESET ROWS = ” 48 ′☆′ 30 " BORDER="O" FRAMEBORDER="O" F RAM E S P A C I N G = “ 0 " > <FRAME SRC="header1. html" NAME="frame1" SCROLLING="no"> <FRAME SRC="body1. shtml" NAME="frame2"> <FRAME SRC="menu. html" NAME="frame3" SCROLLING="no"> く N 0 F R AM E S > く BODY > F 日 AME 対応のブラウザで御覧ください。く /BODY> </NOFRAMES> </FRAMESET> く / H T M L > 202 HTML DESIGNS

D ISPLAV ロ Spacer GIF line-height 貧、 0 0 0 A 心 冫大の行との間に髙さ 30 ビクセルのスべサ引 F が入っています。 冫大の行との間に髙さ 25 ヒ・クセルのスペーサー引 F が入っています。 冫大の行との間に髙さ 20 ビクセルのスべサ引 F が入っています。 冫大の行との間に髙さ 1 5 ビクセルのスペーサー引 F が入っています。 次の行との間に髙さ 10 ビクセルのスペーサー引 F が入っています。 冫大の行との間に髙さ 5 ビクセルのスペーサ引 F が入っています。 次の行との間にスペーサー引 F は入っていません。く日 R > タグによる改行のみです 0 大 0 行・ 0 間 = = 0 ー 0 0 入 0 、 0 、 = 0 ~ 。 = 00 = 00 ・ = = = 0 改行 000 三 冫大の行との間にスペ・一サ引 F は入っていません。く日 R > タグによる改行のみです レイアウト 匚ロ - カしマシンゾーン 9 Spacer GIF line-height 、 0 0 00 A 心 民る進む中止 の行との間に髙さ 30 ビクセルのスペーサ引 F が入っています。 冫大の行との間に髙さ 25 ビクセルのスべサ引 F が入っています。 の行との間に髙さ 20 ビクセルのスペーサー引 F が入っています。 冫大の行との間に髙さ 1 5 ビクセルのスペーサ引 F が入っています。 冫大の行との間に髙さ 1 0 ビクセルのスペーサー引 F が入っています。 冫大の行との間に髙さ 5 ビクセルのスペーサー引 F が入っています。 冫大の行との間にスべサ引 F は入っていません。く日 R > タグによる改行のみです の行との間にスペーサー引 F は入っていません。く日 R 〉タグによる改行のみです 匚ロ - カルマシンゾ - ン スペーサー G 旧を色付きのものに変更し、見えるようにした状態。 052 HTML DES I GNS を

T U 評工評 G HTML のチェックと ダイエット 簒 2.0 以上 3.0 以 住 30 以上 簒 2.0 以上 Macintosh Web ページは、容量的にできるだけ小さく軽いものであるべきです。画像 なども含めて、できれば 1 ページ 30K バイト以内、重いものでも 50K バイ ト以内に収められると理想的です。 ページの容量は配置される画像の大きさだけでなく、 HTML そのものも構 造が複雑になるにつれてどんどん重くなってしまいます。レイアウトが一 通り完成したら、いちど HTML に無駄な部分がないか、構造的に簡略化で きる部分がないかなどをチェックしてみましよう。ここではページをより 小さく軽くいものにするためのテクニックや知識を御紹介します。 Microsoft lnternet ExpIorer Netscape Commu れ icatO ′ Windows 0 チューンナップ 6-01-1 画像 ・画像の数を減らす ページの中の画像点数はなるべく少なく抑えましよう、画像のサイズが小 さくても、数をたくさん使用しているべージでは、全体の読み込み時間に かなり影響が出てきます。画像を読み込む際に、サーバーとの間でひとっ ひとつのファイルに関する「問い合わせ」の時間が必要なので、画像ファ イルは多ければ多いほど時間がかかってしまうのです。 ■ <IMAGE > タグのサイス指定を行う <IMG> タグの中では必す画像の WIDTH とⅡ EIGHT 属性の値を指定するよ うにしましよう。画像のサイズを指定しておくと、プラウザが実際にその 画像を読みにく前に、他のテキスト部分のレイアウトを行なうことができ ます。これは、ネットワークの負荷を軽減し、迅速な表示が行なえること を意味します。 220 HTML DE S I GNS

3-01-2 スペーサー G を使った位置調整 : インデント ( 字下げ ) テキストの頭の部分に任意の WIDTH 値を指定したスペーサー GIF を挿入 することによって、テキストの開始位置を調整します。これによりピクセ ル単位での微妙な位置調整が可能です。このときの HEIG Ⅱ T の値はいくつ でもかまいませんが、スペーサー GIF 画像の読み込み中に存在を目立たせ ないためには最小である 1 ピクセルにしておくことをお薦めします。 この方法は、テキストが途中で改行された場合、 2 行目以降は元の位置か ら始まってしまうので、メニュー項目のような改行を含まない箇条書きテ キストの位置調整に適します。 03 SOURCE レイアウト く H T M L > く H E A D > く TITLE>SpacerGlFlndent く /TITLE> く / H E A D > く BODY BGCOLOR="#FFFFFF" TEXT = " # 006666 " > HEIGHT = 1> 行頭に幅 20 ピクセルのスペ WIDTH=20 <IMG SRC="spacer2. gif" ーサー G 旧が入っています。 く B R > く B R > HEIGHT = 1> 行頭に幅 40 ピクセルのスペ W I D T H = 40 <IMG SRC="spacer2. gif" ーサー G 旧が入っています。 く B R > く B R > H E I G H T = 1 》行頭に幅 60 ピクセルのスペ WIDTH=60 <IMG SRC="spacer2. gif' ーサー G 旧が入っています。 く B R > く B R > H E I G H T = 1 > 行頭に幅 80 ピクセルのスペ <IMG SRC="spacer2. gif" WIDTH=80 ーサー G 旧が入っています。 く B R > く B R > ー WIDTH=IOO HEIGHT = 1> 行頭に幅 100 ピクセルのス <IMG SRC="spacer2. gif' ペーサー G 旧が入っています。く B R > く B R > く / B 0 D Y > く / H T M L > 049 HTML DES I G-NS

A C T 1 0 N クリッカブルマップを 作る 2.0 以上 3.0 以 93 0 以上 2.0 以上 Macintosh ひとつの画像を複雑に分割して配置しそれぞれにリンク先を設けていく方 法は、 HTML も複雑になりリンク領域の形も矩形に限られてしまうなど、 いろいろと不自由を感じることがありますが、クリッカプルマップを使え ばひとつの画像に対して自由な形の複数のリンク先を設けることができま す。また配置する画像がひとつで済むため、 HTML としてもよりスッキリ したものにすることができます。 クリッカプルマップでは、 <MAP>—</MAP> タグの中で、 <AREA> タ グを使って各々のリンク領域に関する指定を行います。そして画像を表示 するためのく IMG > タグから <MAP > の設定をマップ名で呼び出します。 <MAP>—</MAP> タグは同じ HTML 内であればどこに記述してあっても かまいません。 Microsoft lnternet ExpIorer Netscape Communicator Windows e 05 アクション S 0 U ロ C E く H T M L > く H E A D > く TITLE>CIickabIeMap く /TITLE> く / H E A D > く B 0 D Y B G C 0 L 0 R = " # 660066 " > く T A B L E B 0 R D E R = 0 W I D T H = 100 % H E I G H T = 100 % C E L L P A D D I N G = 0 C E L L S P A C I N G = 0 > く T R > く TD ALIGN=CENTER><IMG SRC="map. gif" BORDER=O WIDTH=320 HEIGHT=240 ・ USEMAP="#menu"> く /TD> く / T R > く / T A B L E > く MA P N A M E = " menu " 》 <AREA SHAPE="polygon" COORDS = " 2 , 157 , 27 , 135 , 41 , 130 , 38 , 107 , 52 , 105 , 65 , 107 , 65 , 1 24 , 95 , 114 , 131 , 150 , 122 , 197 , 63 , 236 , 1 5 , 203 , 2 , 157 ” HREF="chapter1. html"> 172 HTML DES I GNS

A C T 1 0 N プルダウンメニューに よるリンクを作る 2.0 以上 2.0 以上 Windows e Netscape Communicator Mic ′ 0S0 lnternet ExpIorer 3. O 以 住 3 0 以上 Macintosh く FO R M > タグは、単に送信用の入力フォームとして使うだけでなく、 JavaScript と組み合わせることによって、様々な機能を実現することがで きます。こでご紹介するプルダウンメニューを使ったリンクでは、ふだ んアプリケーションのプルダウンメニューを使うのと同じような感覚で、 Web ページのナビゲーションを可能にします。プルダウンメニューは画面 上のスペースをほとんど占有することなく複数のメニュー項目を 1 箇所に まとめることができるという点で機能的に優れています。また、画像を使 ったグラフィカルなメニューとは違った雰囲気をもたらします。 こでは、メニューからリンク先を選んだ直後に自動的に移動する方法と、 メニューからリンクを選んだ後「 Go 」ボタンをクリックすることによって 移動する方法の 2 種類をご紹介します。 05 アクション 5-08-1 選択直後に移動する 選択メニュー中から何かひとつを選んだときに発生する onChange イベン トによって menuLink ( ) 関数を呼び出します。そのとき選択メニューの各 く OPTION > タグの中で設定している VALUE の値 ( ここに移動先 URL を記 述しておきます ) を変数 IinkLoc として引き渡し、その値を移動先 URL と してページを移動します。この命令は変数 IinkLoc! = ' (IinkLoc が空 ) でな かった場合のみ実行されます。もしユーザーがメニューから結局リンク先 を選ばず、一番上の「 select Menu …」のところでマウスポタンを放した場 合 (VALUE なし ) を考慮しています。 209 HTML DES I GNS

3-01-3 スペーサー G を使った位置調整 : 行間 スペーサー GIF をテキストの行間に挟み、その HEIGHT 値を変えることに よって行間の幅を調整します。この方法なら CSS に対応していない古いプ ラウザでも正確に行間を調整することができます。ただ、テキストが途中 で改行された場合に 2 行目以降は行間値が元に戻ってしまうのため、メニ ュー項目のような改行を含まない箇条書きテキストの位置調整に適します。 SOURCE く H T M L > く H E A D > く TITLE>SpacerGIF line-height く /TITLE> く / H E A D > く BODY BGCOLOR="#FFFFFF" TEXT = " # 006666 " > 次の行との間に高さ 30 ピクセルのスペーサー GIF が入っています。 く B R > H E I G H T = 30A く B R > <IMG SRC="spacer. gif" WIDTH=I 次の行との間に高さ 25 ピクセルのスペーサー G 旧が入っています。 く B R > <IMG SRC="spacer. gif" WIDTH=I H E I G H T = 25 》く B R > 次の行との間に高さ 20 ピクセルのスペーサー G 旧が入っています。 く B R > H E I G H T = 20A く B R > <IMG SRC="spacer. gif" WIDTH=I 次の行との間に高さ 1 5 ピクセルのスペーサー G が入っています。 く B R > <IMG SRC="spacer. gif" WIDTH=I H E I G H T = 15 》く B R > 次の行との間に高さ 1 0 ピクセルのスペーサ—G 旧が入っています。 く B R > H E I G H T = 10> く B R > <IMG SRC="spacer. gif" WIDTH=I 次の行との間に高さ 5 ピクセルのスペーサー GIF が入っています。く B R > <IMG SRC="spacer. gif" W I D T H = 1 H E I G H T = 5 》く B R > 次の行との間にスペーサー G 旧は入っていません。 & は ; BR & gt ; タグによる改行のみで す。く B R > 次の行との間にスペーサー G 旧は入っていません。 & は ; BR & gt ; タグによる改行のみで す。く B R > 次の行との間にスペーサー G 旧は入っていません。 & は ; BR & gt ; タグによる改行のみで す。く B R > く / B 0 D Y > く / H T M L > 03 レイアウト 051 HTML DES GNS

◇ YUJl-3001 http://www.annie.ne.jpryuji/ この本の著者、足立裕司氏のページです。フレームと背景画像の繰り返しをうまく使い、軽くてインパクト のあるテザインになっています。余白部分に背景画像が繰り返されないように、左右にフレームを切り、左 のフレームサイズは指定せず、右のフレームサイズだけ指定し、そこに画像を張り込むことで背景画像の繰 り返しを制御してあります。その上にテーブルを組み、各コーナーごとの画像を配置してあります。このよ うに背景画象をうまく使えば、容量を抑えつつ大胆なレイアウトをすることも可能です。 一自 画読み込みホ - ム 日躙 セキュリティ止 響を、 &. http://wvw.anniene.- / ~ リ第 / ーを Netscape: Ⅵ幻ト 300 1 ー 0 民る ガイト 」凹サイト リンクス Paramount' Paramount' Paramount Paramount S 一 0 こ 1999-04 25 Paramount' 5 一 0 こ 要 = 104407 Ⅷ物は市 リ SER ・ S 」に ー ? ? 9 -0 キ 17 G/ÆSTE:COK イ u 」 1- 当 001 ParamountY ドす」 Paramount' Paramount' S し一 0 こ 日一 OE S 一 0 こ S し一 0 「 お 8C Paramoune 3 凵ロこ ÅPPL にÅT 石をお Paramountr S 一 0 こ ー ~ 物平叝告 Paramountm Paramountm SL'OE S A し E 3L0 ( K ーー ( 0 、 s & しを 20R1 物 981 108 5 一 0 こ Paramount' Paramount" Paramount' ー 0 こ FhET—iT VERSON 2 .0 FRONTER FRONTER ・ 2 FROt•åTER 第わ 0