gif - みる会図書館


検索対象: HTMLデザイン辞典
71件見つかりました。

1. HTMLデザイン辞典

3-02-4 VSPACE 、 HSPACE を使った画像の配置 テキストの位置調整にはスペーサー GIF が便利ですが、画像の配置を調整 するには、スペーサー GIF を使わなくとも配置する画像そのものに HSPACE 属性や VSPACE 属性を追加して、画像のまわりに任意のスペース を設け、位置調整をすることができます。下記の例は、 GIF 画像を等間隔 で横に並べるために HSPACE 属性を追加しています。 GIF 画像ひとつおき に HSPACE = 40 を設定することによって全ての GIF 画像を 40 ピクセルおき に配置しています。 HSPACE HSPACE HSPACE HSPACE GIF GIF GIF GIF GIF 構造図 レイアウト S 0 U C E く H T M L > く H E A D > く T I T L E > HSPACE く / T I T L E > く / H E A D > く BODY BGCOLOR="#FFCCOO"> <IMG SRC="icon. gif" W I D T H = 32 H E I G H T = 32 > <IMG SRC="icon. gif" W I D T H = 32 H E I G H T = 32 H S P A C E = 40A <IMG SRC="icon. gif" W I D T H = 32 H E I G H T = 32 > W I D T H = 32 HEIGHT=32 HSPACE=40> <IMG SRC="icon. gif" <IMG SRC="icon. gif" W I D T H = 32 H E I G H T = 32 > く / B 0 D Y > く / H T M L > 058 HTML DESIGNS

2. HTMLデザイン辞典

し食 0 U T GIF を使って空白を作る 3.0 以上 2.0 以上 0 2.0 以上 3.0 以上 Mic ′ 0S0 ーれ e ′れ et ExpIorer Netscape Communicator Windows 0 Macintosh 3-01-1 スペーサー G について ページに配置する画像やテキストの位置を微妙に調整する手段のひとっと して、透明な GIF 画像をスペーサーとして使う方法があります。これはも ともと HTML のレイアウトの不自由さを補うため、やむを得す生まれた方 法ともいえます。この見えない GIF 画像を「突っかい棒」のようにして配 置することによって他の画像やテキストの位置をコントロールすることが できるのです。なお Netscape Navigator 3 以上では <SPACER> という、ス ペーサー用の GIF 画像と全く同じ働きをするタグが実装されましたが、 lnternet Explorer が対応していないという問題があり、あまり普及してい ません。現実的にはやはりスペーサー GIF を使う方が安全といえます。 スペーサー GIF として使用する画像は、ファイル容量的にも小さく済む最 小サイズ、 1 x 1 ピクセルの大きさがあれば充分です。また画面に表示され ないようにするため、全面を透明にしておく必要があります。そして く IMG > タグを使って画面に配置する際に WIDTH と HEIGHT の指定により 任意の大きさに変更して使用します。または VSPACE や HSPACE の指定に より任意の大きさの余白をまわりに作ることでスペーサーとして機能させ ることも可能です。 スペーサー GIF はひとつだけ用意しておけば、いちど読み込んだ後はキャ ッシュに残っているものを様々な場所で様々な大きさに変えて使いまわす ことができます。 03 レイアウト 046 HTML DES I GNS

3. HTMLデザイン辞典

DISPLAV ロ 団日 HSPACE 0 ロ 00 す、 0 0 / 民る 進む 中止 国 国 多 レイアウト ロロ ーカルマシンゾ - ン 同じようにして、 VSPACE 属性を設定することで、等間隔で縦並びにする こともできます。次の例では、真中の画像に VSPACE = 40 を設定し画像の 上下間隔を 40 ピクセルに保ちます。 構造図 GIF VSPACE GIF VSPACE GIF 059 HTML DESIGNS

4. HTMLデザイン辞典

S 0 U C E く H T M L > く H E A D > く T I T L E > Menu く / T I T L E > く / H E A D > く BODY BGCOLOR = " # 669900 " > <TABLE BORDER=O CELLSPACING=O CELLPADDING=O> <TR> <TD ROWSPAN=2> く A HREF="home. html' ・ ><IMG SRC="menu_home. gif" WIDTH=82 HEIGHT=57 BORDER=O> く /A></TD> <TD COLSPAN=5><IMG SRC="menu_title. gif" WIDTH=458 HEIGHT=33></TD> <TR> HREF="find. html"><IMG SRC="menu_findO. gif" WIDTH=92 《 T D 》く A HEIGHT=24 BORDER=O> く /A></TD> HREF="help. html"><IMG SRC="menu_help1. gif" WIDTH=92 く T D 》く A H E I G H T = 24 B 0 R D E R = O > く / A > く / T D 》 HREF="about. html"><IMG SRC="menu_aboutO. gif" WIDTH=92 く T D > く A H E I G H T = 24 B 0 R D E R =O> く / A > < / T D 》 HREF="bbs. html"><IMG SRC="menu bbs(). gif" WIDTH=92 <TD> く A H E I G H T = 24 B O R D E R = 0 》く / A > く / T D > 《 T D > く A HREF="Iinks. html"><IMG SRC="menu_linksO. gif" WIDTH=90 HEIGHT=24 BORDER=O> く /A></TD> </TABLE> く / B 0 D Y > く / H T M L > レイアウト メニューから項目を選んでページを移動した後は、現在位置が分かるよう に選択されたメニュー項目の色を変えるようにしていますが、その場合選 択項目の GIF 画像のみを入れ替え、他の部分はキャッシュに残っているデ ータを表示すれば済むため、新たに読み込みむ画像を最小限に抑えること ができます。 078 HT ML DES I GNS

5. HTMLデザイン辞典

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

6. HTMLデザイン辞典

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

7. HTMLデザイン辞典

く IMG SRC="c1. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く T D W I D T H = 20 H E I G H T = 24 A L I G N =CENTE R > <IMG SRC="off.gif" NAME="p2" WIDTH=13 HElGHT=13> く /TD> く T D W I D T H = 130 H E I G H T = 24 > <A HREF="chapter2. html" TARGET="frame1 ” "imageOn('p2')" onMouseOut="imageOff('p2')"> onMouseOver= く IMG SRC="c2. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く T D W I D T H = 20 H E I G H T = 24 A L I G N =C E NTE R > W I D T H = 1 3 H E I G H T = 1 3 > く / T D > <IMG SRC="off. gif" NAME="p3" く T D W I D T H = 130 H E I G H T = 24 > <A HREF="chapter3. html" TARGET="framel" onMouseOver="imageOn('p3')" onMouseOut="imageOff('p3')"> "c3. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く I M G S R C = く / T R > く T R > く T D W I D T H = 20 H E I G H T = 24 A L I G N =C ENTER > W I D T H = 1 3 H E I G H T = 1 3 》く / T D > <IMG SRC="off. gif" NAME="p4" く T D W I D T H = 130 H E I G H T = 24 > chapter4. html" TA RG ET= "framel “ く A H R E F = onMouseOver="imageOn('p4')" onMouseOut="imageOff('p4')"> く IMG SRC="c4. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く T D C 0 L S P A N = 2 W I D T H = 150 H E I G H T = 100 V A L I G N = BOTTOM > く IMG SRC="white. gif" WIDTH=146 HEIGHT=I> く BR> 'javascript:window.close()"> く IMG SRC="close. gif" く A H R E F = W I D T H = " 37 " H E I G H T = 1 1 V S p A C E = 5 B 0 R D E R = 0 > く / A く / T D > く / T R > く / T A B L E > く / B 0 D Y > く / H T M L > 05 アクション 207 HTML DESIGNS

8. HTMLデザイン辞典

e [ s e ( opener . location . href=wURL; 《 / S C R I P T > く / H E A D > く BODY BGCOLOR = " # 660066 " > C E L L S P A C I N G = " 0 " く T A B L E W I D T H = 150 H E I G H T = 256 B 0 R D E R = " 0 " C E L L P A D D I N G = " 0 " > く T R > く T D C 0 L S P A N = 2 W I D T H = 150 H E I G H T = 60 V A L I G N =TOP > く IMG SRC="head. gif" WIDTH="150" HEIGHT="47"> く /TD> く / T R > く T R > く TD WIDTH=20 HEIGHT=24 ALIGN=CENTER> く IMG SRC="point. gif" W I D T H = 1 3 H E I G H T = 13 > く / T D > く T D W I D T H = 130 H E I G H T = 24 > javascript:viewWin('chapter1. html')"> <A H R E F = く IMG SRC="c1. gif" WIDTH=86 HEIGHT=17 BORDER=O></A></TD> く / T R > く T R > く TD WIDTH=20 HEIGHT=24 ALIGN=CENTER> く IMG SRC="point2. gif" W I D T H = 1 3 H E I G H T = 1 3 > く / T D > く T D W I D T H = 130 H E I G H T = 24 > <A HREF="javascript:viewWin('chapter2. html')"> く IMG SRC="c2. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く TD WIDTH=20 HEIGHT=24 ALIGN=CENTER> く IMG SRC="point. gif" W I D T H = 1 3 H E I G H T = 1 3 > く / T D > く T D W I D T H = 130 H E I G H T = 24 > <A HREF="javascript:viewWin('chapter3. html')"> く IMG SRC="c3. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く TD WIDTH=20 HEIGHT=24 ALIGN=CENTER> く IMG SRC="point. gif" WIDTH=13 HEIGHT=13> く /TD> く TD WIDTH=130 HElGHT=24> "javascript:viewWin('chapter4. html')"> <A H R E F = く IMG SRC="c4. gif" WIDTH=86 HEIGHT=17 BORDER=O></A> く /TD> く / T R > く T R > く TD COLSPAN=2 WIDTH=150 HEIGHT=IOO VALIGN=BOTTOM> 05 アクション HTMC DES I GNS 198

9. HTMLデザイン辞典

SOURCE く H T M L > く H E A D > く T I T L E >VSPACE く / T I T L E > く / H E A D > く BODY BGCOLOR="#FFCCOO"> <IMG SRC="icon. gif" WIDTH=32 HEIGHT=32> く BR> <IMG SRC="icon. gif" WIDTH=32 HEIGHT=32 VSPACE=40> く BR> <IMG SRC="icon. gif" WIDTH=32 HEIGHT=32> く / B 0 D Y > く / H T M L > 03 レイアウト DISPLAV ロ日 VSPACE 0 ロ 0 0 0 0 民る進む 中止 匚ロ - カレマシンゾ - ン HTML DES I GNS 060

10. HTMLデザイン辞典

■同し画像を使いまわす 画像ファイルは、いちどプラウザに表示されると、ユーザー側のマシンに キャッシュ ( 蓄積 ) されるので、二度目以降からは同じ画像を表示すると きの表示速度が速くなります。複数ベージで同じ画像ファイルを使いまわ すことによって、より快適にプラウジングできるべージを作ることができ ます。 第小さな画像を拡大して使用する 小さな画像をぐ MG > タグの WIDTH と HEIGHT のサイズ指定によって原寸 より大きく拡大表示して使用するのも、スピードアップのための良い方法 です。例えば単色の四角いべタ面を GIF で作るときや、空白調整用のスペ ーサー GIF など、元画像は 1X1 ピクセルのもので充分です。 またイラストや写真を拡大し、粗い感じのドット絵デザイン風に使用する のもひとつの手です。 ただ、転送速度は速くなっても拡大された画像はプラウザ上ではあくまで 拡大後のサイズの画像として扱われます。例えば 32X32 ピクセルの画像を 128X128 ピクセルに拡大してフルカラー環境で表示した場合、プラウザ上 ではもともと 128X128 ピクセルの 24 ビット画像であるものとして扱い表示 しますので、画面上での表示速度の方には効果が出るわけではないようです。 チューンナップ SOUQCE く H T M L > く H E A D > く TITLE>SingIePixelGlF く /TITLE> く / H E A D > く BODY BGCOLOR="#FFFFFF"> <IMG SRC="dot. gif" WIDTH=IOO% HEIGHT=5> <IMG SRC="dot. gif" WIDTH=IOO% HEIGHT=IO> <IMG SRC="dot. gif" WIDTH=IOO% HEIGHT=20> く / B 0 D Y > く / H T M L > HTML DE S I GNS