し A 0 U T Windows e フレームを定義する 2.0 以上 3.0 以 2.0 以上 住 3.0 以上 フレームは、プラウザのウインドウをいくつもの枠 ( = フレーム ) に分割 し、それぞれに別の HTML を表示できるようにする機能です。また、各フ レームごとに内容を入れ替えることができるので、ページをより構造的な ものにし、アイデア次第でページの使い勝手の面からもデザイン的な面か らも様々な効果的な使い方を可能にします。 ページをフレーム構造にするにはまず、フレーム構造を定義するための HTML ファイルと、その他にそれぞれのフレーム内に表示するⅡ TML ファ イルをフレームの数だけ用意します。もちろんひとつの HTML ファイルを 複数のフレームに表示することも可能です。 下記の例では画面を左右に 50 % すっ 2 つのフレームに分割しています。そ して 2 つの HTML 、 left. html と right. html をそれぞれのフレームに表示しま す。このフレーム構造は以下の 3 つのファイルから構成されます。 index. html: フレームを定義したファイル、定義を行うだけで画面には 表示されません left. html : ⅲ dex. html で指定している左側のフレームに表示するファイル right. html : index. html で指定している左側のフレームに表示するファイル index. html では、ますく FRAMESET>—</FRAMESET> タグによってフ レーム分割方法を定義しています。そして <FRAMESET>—</FRAMESET> の中ではく FRAME > タグを使って個々のフレームに関する指定を行います。 また </FRAMESET> の後に続く <NOFRAMES>—</NOFRAMES> では フレーム未対応のプラウザで表示する内容を記述しておくとその内容が表 示されます。こでは META タグを使ってフレーム未対応プラウザ用のペ ージに移動するようにしています。 Netscape Comれtuれ icatO ′ Mic ′ 0S0 lntemet ExpIorer Macintosh 3-1 1 -1 フレームの基本記述法 レイアウト 109 HTML DESIGNS

A C T 1 0 N ステイタスパーにテキス トを表示する 3.0 以 0 3.0 以上 Microsoft lnternet ExpIorer Netscape communicator 3.0 以上 3.0 以上 Windows 0 Macintosh 5-02-1 リンクの説明を表示する JavaScript を使って、リンクを張った文字や画像などの上にカーソルが置 かれたときに ( これをロールオーバーといいます ) 、ウインドウの下端の ステータスパーの部分でその内容説明を表示してみましよう。 この方法は、必要なときにだけ説明を表示することができるので、リンク ボタンの横に長々とした説明を記述することなく、画面デザインをスッキ リとしたものに保っておくことができます。また同時に、リンク先の URL がステータスパーの部分で表示されて丸見えになってしまうのを防ぐこと ができます。 このような、ロールオーバーしたときにだけにアクションするといった機 能はユーザーの興味を惹き付ける効果もあります。ユーザは無意識にいろ いろなクリックポイントを探って、その説明を読もうとするからです。 記述方法としては、く A > タグの中で 0 Ⅱ MouseOver イベントを設定するだ けなので非常に簡単です。それぞれのリンク上にカーソルがロールオーバ したとき、く A > タグ内の 0 Ⅱ M 0 u s e O v e r イベントが発生し、 w ⅲ dow. s ね tus ~ 物で記述したテキストがステイタスパーに表示されます。 05 アクション S 0 U 員 C E く H T M L > く H E A D > く T I T L E > Mouse Over く / T I T L E > く / H E A D > く BODY BGCOLOR = " # 660066 " TEXT="#FFFFFF" LINK="#FFFFOO" ALINK="#OOOOFF" VLINK="#FFFFOO"> <A HREF="chapter1. html" onMouseOver="window . status='Chapter1: ブラウサ環境について一・ return true"><IMG SRC="icon. gif" BORDER=O 176 HTML DES I GNS

: 平 : Line—Height Adjustment ー Netscape ロロ 目 Edit !ievv 00 Uindovv 旦 p 日ョら k Search Net 三 0 ョ p 色 Re load の落はコオントサイズ 12px 、行問指定をしていないテキストです。 の段落はコオントサイズ 12px 、行問指定をしていないテキストです。 の段落はコオントサイズ 12px 、行問指定をしていないテキストです。 この段落はフォントサイズ 1 2px 、行問 15px ( 125 のテキストです。 この落はフォントサイズ 1 2px 、行問 15px ( 1252 のテキストです。 この落はフォントサイズ 1 2px 、行問 15px ( 1252 のテキストです。 この段落はフォントサイズ 12px 、行問 1 25 % ( 15px ) のテキストです = 0 段落は 0 = 外 0 イズ 0 ~ = 、行問 00 、 0 00 = 00 キ =. トす三 この段落はフォントサイズ 1 2 、行問 1 25 % ( 1 5px ) のテキストです HOme Ft—_Jt'!. ヨド日 Print こここ D00 リ ment: Done CSS を使用し 12px の文字の行間を補正。 Macintosh での行間の見た目は CSS を用いても変 化ないものの、 Netscape Navigator 4 Windows 版では詰まりすぎていた行間が Macintosh と同じ程度に広がっています ( 4 行目以降 ) 。 文字 行間指定の単位 T I P S 行間に px などの絶対値を指定した場合、表示環境によっては行間が詰ま ってしまうことがあります。 CSS での行間指定は、フォントサイスに対 する相対値 ()m や % など ) で指定すると比較的安全です。ちなみに em とは lem = 対象とするフォントの文字高となります。例えば 12pt の文字 に対する 2em は 24pt になります。たた、 lnternet ExpIorer 3 では em や % など相対値による指定に不具合がありうまく表示できません 163 HTML DESIGNS

団日 Macintosh Font Sample 0 合 0 疉 0 ロ A Search Mai1 News Favorites Larger Comic Sons /ÅS: B こ abc 123 Courier: ABC abc 123 Courier e : ABC 証心 123 Mon ロ〔 0 : ABC ロ b 〔 123 2 半具卩 0 ス : ABX 卩 123 (sgmbol) 材ロロ、 (Webdings) ロ saka: ABC abc 123 あいうえお 中ゴシック体ÅBCabc 123 あいうえお 平成用ゴシック : ABC abc 1 23 あいうえお 細明朝体 : c C123 あいうえお 平成明 : ABC 曲ぐ 123 あいうえ ロ s k 等幅 ABC abc 123 あいうえお Refresh 日 ( Arial:ABCabc 123 山 ac 紀 BC 0 123 ( れ a 「 co : AB ( ab [ 123 Chicago: RBC abc 125 Geneva: ABC abc 123 Helvetica: ABC abc 1 23 聞 : ABC aDC 123 Verdana: ABC abc 123 Georgia: ABC abc 123 New York: ABC abc 12 3 Palatino: ABC abc 123 T 加 3 : 田 C abc 123 Tunee New Roman: ABC abc ロ 3 文字 VII 旧 do 、・樰 Font sample ー Micro ミ 0 幵ト n Explorer ■同ロ 」ファイルの偏集 ( 印表示 ) 移 0 お気に入り ) ヘルプ ( 旦 ) 」や , , 0 ロ囹ー 0 朝一日 Arial: A8C abc 123 角・ i 8 0 0 3b0 123 囲 C 曲い 23 Verdana: ABC abc 123 Georgia : ABC abc 123 Tmes New Roman: ABC abc 123 ComicSans ÅÅS: ABC abc 123 Courier New: ABC 〕 c 123 2 : ABX oßx 123 (Symbol) ロロ、 omebdings) をも地 g 自 UingDings) MS P ゴシック : A 日 0 abc 123 あいうえお MS P 明 #:ABC abc 123 あいうえお M S ゴシック : ABC abc 1 23 あいうえお M S 明朝 : 田 C ab c 1 23 あいうえお 151 HTML DE S I GNS

し A 0 U T Windows ウインドウサイズに合う ように配置する 2.0 以上 2.0 以上 住 3. O 以上 Macintosh ユーザー側のウインドウサイズはどのくらいのサイズを想定するべきでし ようか。理想的な web ページのレイアウトはユーザーがどのようなウイン ドウサイズでプラウジングしても違和感のないように、あらかじめ融通性 の高いものにしておくことが重要です。レイアウトをユーザー側のウイン ドウサイズに合わせるには、テープルの大きさをパーセント値で指定する ことによって対処することができます。 テープルのサイズ指定は、ピクセル値によるサイズ指定だけでなくパーセ ント値で指定することも可能です。作例ではまず横幅 100 % 、高さ 100 パー セントのテープルを設けています。この場合の 100 パーセントとはプラウ ザのウインドウ全体のサイズを表します。セル内に配置する画像の水平位 置を ALIGN=CENTER にすることにより、画像をセルの中心に配置してい ます。このとき垂直位置 VALIGN はデフォルト値の MIDDLE ( 中間 ) に設 定されています。 これによりプラウザのウインドウがどのようなサイズであっても、常に画 像はウインドウの中心に表示されるようになります。また途中で変形して もそれに追従しレイアウトが自動的に調整されます。 M ic ′ 0S0 れ lnternet ExpIorer Netscape CO れ ica ー 0 ′ 03 レイアウト S 0 U C E く H T M L > く H E A D > く T I T L E > Full Screen Table く / T I T L E > く / H E A D > く BODY BGCOLOR="#FFCCOO"> H E I G H T = 1 OO % C E L L P A D D I N G = 0 《 TA B L E B 0 R D E R = 0 W I D T H = 1 000/0 CELLSPACING=O> <TR> <TD ALIGN=CENTER> く IMG SRC="home. gif" WIDTH=66 080 DES I GNS HTML

T E X T & F 0 T テキストリンクのアンダ ーラインを消す 4.0 以上 4.0 以上 0 3.0 以上 Netscape CO 第れ u れ ica ー 0 ′ Microsoft lnternet ExpIorer Windows Macintosh プラウザの初期設定では「リンクにアンダーラインを引く (UnderIine links) 」が標準でオンになっていますが、ページのデザイン上、このアン ダーラインがややうっとおしく感じることがあります。ユーザーによって はこのチェックを外し表示しないようにしている場合もありますが、そう いったユーザー側の設定に依存することなく、 CSS を使って制作者側から リンクのアンダーラインを常に表示しないようにする方法があります。 通常 text-decoration:underline に設定されている本文中の <A > タグ ( リン ク ) の属性を none に設定します。 文字 S 0 U ロ C E (text. html't 任意のリンク先ファイルです ) く H T M L > く H E A D > く T I T L E > IJ nderli ne く / T I T L E > <STYLE TYPE="text/css"> a:link{text—decoration:none;) a:visited{text—decoration:none;) a : a c t i v e ( t e x t —d e c 0 「 a t i 0 n : n 0 n e } < / S T Y L E > く / H E A D > く BODY BGCOLOR="#FFFFFF" LINK = " # 006666 " ALINK = " # 660000 " VLINK = " # 006666 " > ブラウザの初期設定「リンクにアンダーラインを引く」がオンになっていても <B><A HREF = ” te 対 . htm ドテキストリンクく / A> く / B > にアンダーラインは表示さ れません。 く / B 0 D Y > く / H T M L > 169 HTML DES I GNS

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 0 U T テーブルを使った フォームのレイアウト 2.0 以上 3. O 以 9 3.0 以上 2.0 以上 フォームはユーザーが入力時に迷わないよう、項目名とそれに対する入力 フォームの対応関係が分かりやすようにレイアウトすることが大切です。 分かりやすいフォームのレイアウトはユーザーに面倒そうな印象を与え す、実際の機能的な使い勝手も向上させることができます。 配置する要素の整理にはテープルを使い、項目名と入力工リアを横並びに し、項目名は全て右合わせに、入力フォームは左合わせにしておくと、項 目とフォームとの対応関係が明解です。また、選択肢の多いメニューはラ ジオボタンではなくプルダウンメニュー形式にまとめるなどして整理する ようにしましよう。 Netscape Commu れ ica 0 ′ Mic ′ 050 lnternet ExpIorer Windows e Macintosh 03 レイアウト S 0 U 員 C E く H T M L > く H E A D > く TITLE>Form Layout く /TITLE> く / H E A D > く B 0 D Y B G C 0 L 0 R = " #FFCCOO " > く F 0 R M M E T H 0 D = " POST " 》 <T A B L E B 0 R D E R = 0 C E L L P A D D I N G = 5 C E L L S P A C I N G = 0 》 <TR> <TD ALIGN=RIGHT NOWRAP> く FONT SIZE=I> 名前 : く /FONT></TD> <TD VALIGN=bOttom><INPUT NAME="name" TYPE=TEXT S I Z E = 26A く / F 0 N T > く / T D > <TR> <T D A L I G N = RIG HT N 0 W R A P > く F 0 N T S I Z E = 1 > E- Mail アドレス : く / F 0 N T > く / T D > <TD VALIGN=BOTTOM><INPUT NAME="emaiI" TYPE=TEXT SIZE=26></TD> 099 HTML DESIGNS

T U I G スフラッシュページを 作る 2.0 以上 3.0 以 住 3 以上 2.0 以上 Macintosh ューザーがサイトを訪問した際、メインページを表示する前にますそのサ イトのイメージを印象付けるために、入口として表示する導入画面のこと をスプラッシュページ ( またはスプラッシュ画面、エントリーベージ ) と 呼びます。アプリケーションの起動時に現れるスプラッシュスクリーン (Splash Screen) と同様の役割を成すものです。いきなりメニューがたく さん詰まった盛り沢山のページを表示するのではなく、ますここで軽い画 像やテキスト、 GIF アニメーションなどを用いてコンテンツのオープニン グを飾り、ユーザーの興味を引き付けます。データ的にシンプルで読み込 みが速く軽いページにすることがコツです。 こで英語版と日本語版の入口を分けたり、プラグインの入手への 誘導、最終更新日の案内などを盛り込むなどの機能的な使い方も効果的です。 Netscape Communicator Mic ′ 050 代 lntemet ExpIorer Windows 0 チューンナップ 6-03-1 く META > タグでページを移動する 下の例では <META > タグのリフレッシュ機能を使って一定の秒数だけスプラ ッシュページを表示した後、メインページに移動します。 SOURCE く H T M L > く H E A D > く TITLE>HTML Design References く /TITLE> "5;URL=index2. html"> <M E T A H T T P— E QU I V = “ refresh ” C 0 N T E N T = く / 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 % > く T R > く TD ALIGN=CENTER> く A HREF="index2. html"> く IMG SRC="title. gif" W I D T H = " 379 " H E I G H T = " 36 " B 0 R D E R = " 0 " > く / A > く / T D > く / T R > 241 HTML DES GNS

A C T 1 0 料 別ウインドウを開く 2.0 以上 2.0 以上 9 3.0 以上 Netscape CO れ 1 れれ icatO ′ Microsoft lnternet ExpIorer Windows Macintosh 5-03-1 HTML で別ウインドウを開く <A> タグの TARGET 属性を "-blank" ( 空のウインドウ ) に指定すると、現 在ベージが表示されているウインドウとは別に新規ウインドウを開いてリ ンク先ページを表示することができます。現在表示しているウインドウは そのまま残しつつ、他のページやサイトを参照させたい、などの場合に有 効に活用できます。 この場合、別ウインドウのサイズを指定するなどの細かい制御はできませ んが、 HTML だけで動作するため記述が簡単で動作も安定しています。別 ウインドウを細かく制御するには JavaScript が必要となります。その方法 については次の項 chapter5-03-2 「サイズを指定して別ウインドウを開く」 ( p. 184 ) を参照してください。 05 アクション SOURCE く H T M L > く H E A D > く TITLE>OpenSubWindow く /TITLE> く / H E A D > く BODY BGCOLOR = " # 660066 " TEXT="#FFFFFF"> く C E N T E R > く T A B L E W I D T H = 90 % 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>.<IMAGE SRC="icon. gif" WIDTH=IOO HEIGHT=74> く BR> く FONT S 1 Z E=2 FAC E="Verdana" >Contents on the External Window Above. く BR>Last Updatedof 19- APR -1999 く / FONT > く BR > 《 A H RE F="http://www.macromedia.com/jp/shockwave/download/index.cgi?Pl —Pro d Version=Shockwave" TARGET= ー blank"> く IMG SRC="shockwave. gif" WIDTH=88 HEIGHT=31 BORDER=O VSPACE=6></A> く BR> く FONT SIZE=2 FACE="Osaka"> 本サイトを御覧にな 182 HTML DESIGNS