TITLE - みる会図書館


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

1. HTMLデザイン辞典

6-03-3 プラウサを判別する 下記の JavaScript ではプラウザを判別しつっそれぞれのページに 5 秒後に 移動します。こでは Netscape Navigator 4. x か lnternet Explorer 4. x 、ま たはその他のプラウザ ( バージョン ) か、の 3 種類を判別します。 Netscape Navigator 4. x と lnternet Explorer 4. x は DynamicHTML や CSS な どの点であまり互換性がないため、このように前もって 2 種類のページに 振り分けてしまうケースが増えています。 SOURCE く H T M L > く H E A D > く TITLE>HTML Design References く /TITLE> <SCRIPT LANGUAGE="JavaScript"> function gotoNextPage()C i f ( n a v i g a t 0 「 . a p pV e r s i on . c h a r A t ( 0 ) 》 = 4 ) ( if(navigator . appName . charAt(O) [ 0 C a i 0 n . href="index nn4. html" e [ s e { [ 0 c a t i 0 n . h 「 e f = " i ndex ie4. html" チューンナップ e [ s e ( [ 0 c a t i 0 n . h 「 e f = " index2. htm に く / S C R I P T > く / H E A D > く B 0 D Y B G C 0 L 0 R = " # 6 6 0 0 6 6 " T E X T = " # F F F F F F " L I N K= " # F F C C 0 0 " V L I N K= " # F F C C 0 0 " 0 n L 0 a d = " s e t T i m e 0 u t ( ー g 0 t 0 N e x t P a g e ( ) ー′ 5 0 00 ) " > く C E N T E R > く 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> く IMG SRC="titIe. gif" WIDTH="379" HEIGHT="36" BORDER="O"> く BR> く BR> く BR> く FONT SIZE = -1 > この画面がずっと表示されたま まの場合は下記からブラウザを選択してください。く BR> く B> 244 HTML DE S GNS

2. HTMLデザイン辞典

なお Netscape Navigator でのページのマージン制御は 4 以降でしか対応し ていません。これを Netscape Navigator 3 でも同じように表示させるため にはページをフレーム構造にし、 < FRAM E > タグの持っている MARGINWIDTH 属性と MARGINHEIGHT 属性を使ってマージンを設定す るようにします。 マージンを設定したいページが始めからフレーム構造を想定しているので あればフレームを定義しているファイルの記述内容を書き換えれば済みま すが、フレーム構造でないページの場合は以下のように、 <FRAMESET> タグでフレームをひとっしか持たない 100 % のフレームとして定義します。 フレーム機能はもともと複数のフレームを定義するためのものであるた め、 2 つめのフレームとして「 * 」 ( アスタリスク ) をダミーとして記述し ておいてください。「 * 」は余っている幅を全部使用するという意味ですが、 ひとつめのフレームで 100 % 使用しているため、実際には 2 つめのフレーム は画面に現れません。 あとは <FRAME> タグによってウインドウに表示する HTML ファイルを指 定し、マージンを設定します。 03 レイアウト S 0 U C E index. html く H T M L > く H E A D > く TITLE>MarginZero く /TITLE> く / H E A D > く F R A M E S E T R 0 W S = " 100 % , ☆ F R A M E S P A C I N G = 0 > <FRAME SRC="index2. html" NAME="main" MARGINWIDTH=O M A R G I N H E I G H T =0> く / F R A M E S E T > く N 0 F R A M E S > く / N 0 F R A M E S > く / H T M L > B 0 R D E R = 0 F R A M E B 0 R D E R = 0 index2. html く H T M L > く H E A D > く TITLE>MarginZero</TITLE> 130 HTML DESIGNS

3. HTMLデザイン辞典

DISPLAV Embedding S 妙 Sheet ー Microsoft lnternet Explorer ■回ロ ファイルの偏集 ( 印表示 ) 移釛 0 お気に入り戸 Embedding S 厄 Sheet この HTML にはく HEAD 〉部分で亘言したスタイル定義が 反映されています。 」 , 目 , , 0 ロ囹ー 0 朝日 A 昌 t 04 イントラネットゾ ーン 文字 ■ HTML 内のタグに直接書き込む旧ⅱ ne StyIe Sheet 最も手軽に試すことができる方法です。ページの中で部分的に CSS を用い たいときに適しています。 SOURCE く H T M L > く HEAD> く TITLE>lnlineStyleSheet く /TITLE> く /HEAD> く B 0 D Y B G C 0 L 0 R = " #FFFFF F " > <DIV STYLE="font—size:12px; font—weight:Bold; coIor:Navy"> インラインで直接 CSS を記述します。く / D I V> く / B 0 D Y > く / H T M L > 139 HTML DE S I GNS

4. HTMLデザイン辞典

このマージンを詰めるためには <BODY> タグの中でマージンを設定しま す。しかしこれらは Netscape Navigator と lnternet Explorer でそれぞれ表 己方法が違うため、両者で共通してマージンを制御するには両方の指定を 共に記述しておく必要があります。それらの属性名は以下の通りです。値 はピクセル値で指定し、 0 に設定することでマージンをなしにすることが できます。 •Netscape Na ⅵ gat0 「用 ( ※ 4.0 以上 ) ページの左右のマージンを指定 MARGINWIDTH ページの上下のマージンを指定 MARGINHEIGHT •lnternet Explorer 用 LEFTMARGIN TOPMARGIN 一三ロ 03 ページの左右のマージンを指定 ページの左右のマージンを指定 レイアウト S 0 U C E く H T M L > く H E A D > <TITLE>MarginZero く /TITLE> く / H E A D > <BODY BGCOLOR="#FFFFFF" MARGINWIDTH=O MARGINHEIGHT=O LEFTMARGIN=O TOPMARGIN=O> く IMG SRC="hand. jpg" WIDTH=224 HEIGHT=151> く / B 0 D Y > く / H T M L > 128 HTML DESIGNS

5. HTMLデザイン辞典

ロ table. html <HTML><HERO><TITLE>Table</TITLE></HERO><BOOY BG 〔 OLOR = 凵 h i te> <TRBLE UIOTH=514 HEIGHT=164 L410TH=314 BOROER=O CELLPROOING=B><TR 日 6 〔 OLOR = # FFgg 日 RLIGN= CENTER URLIGN=BOTTOM> <TO UIDTH=188 HEIGHT=19 〉 1 く /TO> <TO L410TH=180 HEIGHT=100>2</TD> く TD L410TH=168 HEIGHT= の 3 く / TO 〉く TO UIOTH=188 HEIGHT=108>4</TO><TO UIOTH= 1 HEIGHT=188>5</TO> く /TR></TRBLE> 前項 ( p. 225 ) での HTML を圧縮してみました ( 335 バイト ) 。記述が無く てもとりあえず問題の発生しないタグイ BODY > やイ HTML > まで省略され ています。圧縮時に消去するタグの種類は設定によりカスタマイズも可 能です 構造や内容によりやむを得ず容量の大きくなってしまうようなファイル などにはかなり効果的だと思われます。 ◇ VSE HTML Turbo http://vse-online.com/ チューンナップ HTML DES I GNS

6. HTMLデザイン辞典

化し、自動的に登録、蓄積していくシステムです。 ユーザー側から見た場合のこの方法の利点は、インターネット上のあらゆ るべージを検索できることで、マイナーな情報の検索に適しています。し かしロポットは内容を把握しながら登録していくわけではないので、検索 キーワードに対する検索結果も膨大な量となってしまい、作りかけのペー ジやまったく見当違いのページに行き当たってしまうこともよくあります。 6-02-2 く META > タグでサイトの概要を知らせる ロポット型サーチェンジンの検索ロポットは巡回の際、ドキュメントのヘ ッダ情報 <HEAD>—</HEAD> タグの中のく TITLE > タグや <META> タ グを読み取ってデータベースを作成します。 <META > タグの指定がない 場合は、ページの最初の数十文字のテキストを拾い出してサマリーとして 己録します。ユーザーの検索キーワードに応じて狙い通りにサイトへのリ ノクが表示されるようにし、同時にそこでサイトの概要を説明するために は、あらかじめ <META > タグ内でそれらを設定しておくことが必要です。 一三ロ、 チューンナップ S 0 U 員 C E く H T M L > く H E A D > く TITLE>HTML Design References く /TITLE> <META NAME="Keywords" CONTENT="web design, html, javascript, css, tutrial, refemces, tips"> <META NAME= "Description “ C ONT ENT="Basic tutrial and references about HTML. ” > く B 0 D Y > く / B 0 D Y > く / H T M L > Keywords " のところには、ユーザーがサーチェンジンでの検索の際にキー ワードとして入力する単語の候補を半角のカンマで区切って記入します。 日本語のサーチェンジンに登録してもらうのであればこれらは日本語で記 述してもかまいません。こで指定したキーワードが、もしユーザーが入 力したキーワードと一致すればサーチェンジンでの検索結果としてこのペ ージへのリンクが表示されるようになります。またその際、 Description の DE S I GNS HTML 236

7. HTMLデザイン辞典

SOUQCE く H T M L > く H E A D > く TITLE>Cascading StyleSheet く /TITLE> S T Y L E T Y P E = ” t e x t / c s s " > BODYC background:white; font—size:12px; co [ 0 「 : b ぬ ck margin—left:40px; margin—right:40px; い n e— h e i g h t : 180 % H2{font—size:18px; coLor:Navy; font—fami Ly :Verdana, Helvetica, Arial </STYLE> く / H E A D > く B 0 D Y > <H2>Embedding and InIine</H2> この HTML には & は ; HEAD & gt 部分で宣言した Embedding style Sheet のスタイル定義 が反映されています。 <DIV STYLE="font—weight:b01d"> 必要に応じて部分的に <SPAN STYLE="font—styLe:ltalic">InIineStyIeSheet の指定 </SPAN> を優先させることも可能です。 </DIV> く / B 0 D Y > く / H T M L > 文字 141 HTML DES I GNS

8. HTMLデザイン辞典

S 0 U 員 C E く H T M L > く H E A D > く TITLE>OpenSubWindow く /TITLE> <SCRIPT LANGUAGE="JavaScript"> f u n c t i 0 n s u bW i n ( ) { window.open("duckie. html" "windowl " height=165"); "width=165 ′ く / S C R I P T 》 く / H E A D > く BODY BGCOLOR = " # 660066 " TEXT="#FFFFFF" LINK="#FFFFOO" ALINK="#OOOOFF" VLINK="#FFFFOO"> "JavaScript:subWin()"> く IMG SRC="thumbnaiI. gif" <A H R E F = B 0 R D E R = 0 W I D T H = 32 H E I G H T = 32 H S P A C E = 5 > く F 0 N T FACE="Verdana"><B>ViewSampIe く /B> く /FONT></A> く / B 0 D Y > く / H T M L > 05 アクション 186 HTML DES 1 GNS

9. HTMLデザイン辞典

4-02-4 クラスを設定する CSS では、一般的な HTML タグにスタイルを定義する他、バリエーション として独自のスタイル定義 CLASS ( クラス ) を設けてさらにカスタマイズ することができます。 CLASS の名称は自由に設定可能ですが、必ず先頭にピリオドを付けるよう にします。 HTML 内のタグから CLASS を呼び出すときにはピリオドは付 けません。 SOURCE く H T M L > く H E A D > く TITLE>Cascading StyIe Sheet く /TITLE> く S T Y L E > BODY{ background:white; f 0 n t ー s i z e : 12px . co [ 0 「 : 日 ack margin—Left:20px; margin—right:20px; Line—height:140% 文字 H 2 ( f 0 n t ー s i z e : 18px color:Navy; font—weight:bold; font—fami ly :Verdana, Helvetica, Arial H 2 . r e d ( C 0 [ 0 「 : red . s e c 0 n d ( font—size:10px; margin—top:20px; margin—Left:50px; 145 HTML DES I GNS

10. HTMLデザイン辞典

S 0 U C E く H T M L > く H E A D > く L I N K R E L= F 0 N T D E F SRC="http://www . truedoc . com/pfrs/AmeLia . pfr"> く TITLE>DynamicFonts く /TITLE> く S T Y L E T Y P E = " t e x t / c s . h e a d い n e { font—famiLy:AmeIiaBT; f 0 n t ー s i z e : 36pt </STYLE> く / H E A D > く BODY BGCOLOR="#FFFFFF"> <DIV CLASS="headIine">Cozy lummox gives smart squid whO asks for jOb pen.</DIV> く / B 0 D Y > く / H T M L > 04 文字 DISPLAV Netscape: Dunamic Fonts Forward Re10 記 Home Search Ne c ヨ p 13 ミ Back Location : Cozy lgmmox gives smapt BQUid who asks 新可 p . 167 HTML DESIGNS