lHTML スタイル タグ一覧 '98. 4. 7 /96.11.25  
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート    
ここは、タグ一覧のページです。用法は 次の[文字(配置)] のページからです。
このページ以外は、スタイルを使用しています。
Netscape でご覧の場合、以下の修正方法はわかりません。
 ウィンドウの大きさを変えると、特に[座標]のページは 再描画の必要があります。
 ページ内リンクをクリック後、再描画すると、先頭が表示されないページがあります。

スタイル専用補助タグ   シ-トファイルを指定   ペ−ジヘッダで定義   定義の書式   定義クラスの使用
シートファイルの、<HEAD>の位置と、コメントの位置が違っていました。 '99.2 訂正
ページ内 [bih-h_s1.css]  ...このページを除く、スタイルの各ページで使用。

T スタイル専用 補助タグ
SPAN または 既存の HTML タグと共に使用します。
FONT-SIZE:50PX; 文字大きさ ( 50PX = 50ピクセル )
FONT-WEIGHT:BOLD 文字の太さ。 ( BOLD/NORMAL )
 ( EXTRA-LIGHT/LIGHT/DEMI-LIGHT/MEDIUM/DEMI-BOLD/EXTRA-BOLD)
FONT-FAMILY:System; フォント( 字体 )
 Netscape では、[Hu行書体] などの 日本語フォントは、スタイルでは指定できません。
 日本語フォントは、HTML タグで指定します。( 行書体、楷書体、Webdings などは無効。)
 Netscape では、英語フォントの多くが 韓国語ページなどでのみ有効。???
FONT-STYLE:ITALIC; イタリック体 ( 斜字 )  ( ITALIC/NOMAL )

COLOR:BLUE; 文字の ( BLUE = 青 ) ×FONT-COLOR : 使用できません。
COLOR:0000FF; 〃  ( 0000FF = 青 )

LINE-HEIGHT:120% 行間隔。1行の縦幅を指定します。
 スタイルシートに定義するときは、%を使いません。( 対 Netscape )

FONT:30PX/40PX MS 明朝; FONT:ITALIC; FONT:BOLD;  まとめて設定します。
FONT:NORMAL; 字体と太字の指定を、一時的に解除します。( この二つは IExplore のみ。)

TEXT-DECORATION:UNDERLINE; 横線を入れます。
 ( NONE=線なし UNDERLINE=下付き線 LINE-THROUGH=取消し線 )
TEXT-DECORATION:BLINK; 点滅 Netscapeのみ
TEXT-TRANSFORM:LOWERCASE; 大/小文字変換 ( 英語のみ。)
( NONE/無変換 UPPERCASE/大文字 LOWERCASE/小文字 CAPITALIZE/頭文字 )
 Netscape では、無着色の英語ページでのみ有効。

BACKGROUND:FF0000 URL( abc.gif ); 背景色背景画像。
 IExplore は、この書式で 色または画像の一方だけを指定できます。
BACKGROUND-COLOR:FF0000; 背景色のみ。
BACKGROUND-IMAGE:URL( abc.gif ); 背景画像のみ。
BACKGROUND-ATTACHMENT:FIXED; ページの背景を固定します。( IExplore のみ。)
 ( FIXED/SCROLL )

以下 IExplore では、<DIV>
TEXT-ALIGN:CENTER; 画面左右の表示位置を中央に指定。( LEFT/CENTER/RIGHT )
TEXT-ALIGN:JUSTIFY; 行末揃え ( 英語のみ。Netscape は英語ページのみ。)

TEXT-INDENT:30PX; 段落最初のスペース。 ( 最初の一個所だけ。)
WHITE-SPACE:PRE; 半角スペースをそのまま表示します。 Netscape のみ。

PADDING-TOP:40PX; 上部 に内部余白を設けます。
 ( TOP/RIGHT/BOTTOM/LEFT  上部/右側/下部/左側)
PADDING:40PX,30PX,20PX,10PX; 上・右・下・左 に余白を設けます。
PADDING:40PX,30PX,20PX; 上・左右・下 に余白を設けます。
PADDING:40PX,30PX; 上下・左右 に余白を設けます。
PADDING:40PX; 上下左右 に余白を設けます。

MARGIN-TOP:50PX; 上部 に 外部余白を設けます。 ( 負の余白も指定できます。)
 ( TOP/RIGHT/BOTTOM/LEFT  上部/右側/下部/左側)
MARGIN:40PX,30PX,20PX,10PX; 上・右・下・左 に余白を設けます。
MARGIN:40PX,30PX,20PX; 上・左右・下 に余白を設けます。
MARGIN:40PX,30PX; 上下・左右 に余白を設けます。
MARGIN:40PX; 上下左右 に余白を設けます。

BORDER-STYLE:SOLID; 縁取り枠のスタイルを指定します。
 ( SOLID=普通の枠 /NONE=透明の枠/ ...以下省略。)
 Netscape では、枠の太さも同時に指定する必要があります。
 ※ 文字スタイルは、別なスタイル または 別なタグ に分けて書きます。
BORDER-WIDTH:1PX; 枠の太さ ( 辺ごとに 太さを指定できます。...省略。)
BORDER-COLOR:BLUE; 枠の  IExplore は、辺ごとに 色を指定できます。

FLOAT:LEFT; 浮動配置(何かを基準に配置)の指定をします。
 ( LEFT/RIGHT/CENTER or MIDDLE/NONE ) 左右の中央位置は Netscape のみ。
 <BR CLEAR=ALL>までの内容を、基準位置に移動して表示します。
 ※ Netscape では、浮動領域の内側は外側のスタイルと別です。
 文字スタイルは、浮動領域の中で、別なスタイル または 別なタグ に分けて書きます。

WIDTH:300PX; スタイル領域の幅。 省略時 IExplore=100% Netscape=内容の幅
 Netscape では、縁取り枠 または 浮動領域 も指定します。( 幅だけの指定は無効です。)
HEIGHT:100PX; スタイル領域の縦幅 (高さ)。 Netscape では無効です。

POSITION:ABSOLUTE; LEFT:20PX; TOP:50PX; 座標指定配置をします。( 原点はページ左上。)
 この領域は、すでに表示されている内容の上に、重ねて表示されます。
 重ねたくないときは、あらかじめスペースを作っておきます。
 指定する座標によって、座標指定領域同士も重ねることができます。
Z-INDEX:5; 座標指定領域に、重ね順番の番号を付けます。( 大きい番号ほど上。)
POSITION:RELATIVE; 座標指置領域の、基準の領域を作ります。( IExplore のみ。)
 この中に配置する 座標指定領域 は、この領域の左上を原点として使います。
 Netscape では、HTML タグの LAYER を使うことで、同様の表示ができます。
POSITION:RELATIVE;LEFT:20PX; TOP:50PX; 基準領域自身を、ずらして配置します。( IExplore のみ。)
 指定する座標によって、基準領域同士を重ねることができます。
 Netscape では、HTML タグの LAYER を使うことで、同様の表示ができます。

LIST-STYLE-TYPE:DECIMAL; リストの、項目の 番号 や アイコン などを指定します。
 ( DECIMAL/LOWER-ROMAN/UPER-ROMAN/ALPHA/UPER-ALPHA/ DISK/CIRCLE/SQUARE/ NONE )
 ( 1 2 3 / i ii iii / I II III / a b / A B C   / 黒丸 / 白丸 / ■  / ※ )
 ※ NONE は、Netscape=デフォルトの表示、IExplore=何も表示しない。
 リストの種類と違う指定をしたとき
 Netscape=リストの種類に従います。IExplore=スタイルの指定が優先されます。
DISPLAY:LIST-ITEM; リストと同じように、桁下げ表示します。( Netscape のみ。)

INCLUDE-SOURCE:URL(abc.htm); 別ファイルを挿入します。( Netscape のみ。)
 ( HTML タグの LAYER を使った方が、安定しています。)
CLIP:RECT(0PX 500PX 95PX 0PX); 挿入ファイルの、表示部分を指定 (クリッピング) します。

DISPLAY:NONE; まったく表示しません。( IExplore のみ。)
 現段階では、IExplore4.0 以外のブラウザだけに表示する のに使用できます。

OVERFLOW:HIDDEN; スタイル領域の、幅と高さ内に納まらないときの処理。( IExplore のみ。)
 ( HIDDEN=範囲外は非表示/AUTO=必要に応じスクロールバーを設ける/SCROLL=最初から・・ )

FILTER:ALPHA(OPACITY=10); 加工表示します。濃度 0〜100%。 ( IExplore のみ。)
 いずれの場合も、画像よりも大きな 領域幅(WIDTH) を指定すること。
FILTER:WAVE(FREQ=3); 横線表示。細かさ=0〜±12。 ( IExplore のみ。)
 負なら揺らぎの左右が逆。細かさの基準は、行間( LINE-HEIGHT )の値。
FILTER:WAVE(STRENGTH=10); 揺らぎ=横ぶれ の幅。 ( IExplore のみ。)
 揺らぎの分、左右に余白(APDDING) を取ること。この例では 10PX+10PX 。

CURSOR:AUTO; カーソルを変更します。 ( IExplore のみ。)
 ( AUTO/DEFAULT/TEXT/WAIT/MOVE/HAND/CROSSHAIR/HELP )
 ( 普通/空白部分/文字部分/砂時計形/移動時の形/手の形/十字形/?形 )

備考
ネスト 中の領域は、一個の文字と同じように配置されます。( <BR>位置で改行 )
<SPAN STYLE="・・・">aaa
  <SPAN STYLE="・・・">bbb
    <SPAN STYLE="・・・">ccc</SPAN>
  BBB</SPAN>
AAA</SPAN>     aaabbbcccBBBAAA のように表示されます。

入れ子 中の領域を重ね合わせることはできません。( 対 Netscape )
<DIV STYLE="...">aaa                   |   aaa
  <DIV STYLE="...">  bbb               |     bbb
    <DIV STYLE="...">    ccc</DIV>     |       ccc
  BBB</DIV>                            |     BBB
AAA</DIV>                              |   AAA




T スタイルシートファイルの指定  そのページで、abc.css を使用する場合。 <HTML><TITLE>〜<TITLE> <LINK REL=STYLESHEET TYPE ="text/css" HREF="abc.css"> </HEAD> T スタイルシートファイルの内容 次のようなファイルを作り、例えば abc.css として保存します。 <STYLE TYPE="TEXT/CSS"> <!-- /* 以下の内容は、スタイル未対応ブラウザには表示されません。 */ /* ←これはスタイル専用のコメント記号です。→ */ P { FONT-SIZE:20PX; } /* P タグに、文字の大きさを付加する例です。*/ .CL1 { COLOR: BLUE; } /* 既存タグと組み合わせて使う クラスの定義例です。*/ /* ここまでの内容は、スタイル未対応ブラウザには表示されません。 */ --> </STYLE> T ページ内にスタイルを定義 ( ページヘッダ で定義します。) 上記の内容は、別ファイルではなく、ページの中に書くことができます。 <HTML><TITLE>〜<TITLE> <STYLE TYPE="TEXT/CSS"> <!-- /* 以下の内容は、スタイル未対応ブラウザには表示されません。 */ /* ←これはスタイル専用のコメント記号です。→ */ P { FONT-SIZE:20PX; } /* P タグに、文字の大きさを付加する例です。*/ .CL1 { COLOR: BLUE; } /* 既存タグと組み合わせて使う クラスの定義例です。*/ /* ここまでの内容は、スタイル未対応ブラウザには表示されません。 */ --> </STYLE> </HEAD> T スタイル定義の書式 { } の中には、{ COLOR: BLUE; } のように、具体的なスタイルを記述します。 { "COLOR: BLUE;" } のように、" " で囲むと、Netscape では無効になります。 BODY { } ページ全体のスタイルを指定します。 A:LINK { } リンク文字のスタイルを指定します。 P { } 既存のタグ( この例では<P> ) の属性を、スタイルで変更します。 P.C_RED { } 既存のタグの、専用スタイル( この例では C_RED ) を定義します。 P#C_BLUE { } 既存のタグの、専用スタイル( この例では C_BLUE ) を定義します。 .C1 { } 任意のタグと組み合わせて使えるスタイル( この例では C1 ) を定義します。 #C2 { } 任意のタグと組み合わせて使えるスタイル( この例では C2 ) を定義します。 他のタグと組み合わせて使うための RED や C1 などは、クラスと呼ばれます。 あらかじめクラスを定義しておくことで、クラスの指定が単純化されます。 クラスは、同じ名前で再定義できるようです。 例えば、スタイルシートで 文字の大きさだけを定義し、 それを使うページで、文字の色を指定するために 同じ名前のクラスを定義します。 まとめ書きする場合 複数の既存タグ または クラスに、同じスタイルを定義する場合は、まとめ書きできます。 H6,H5,H4.C4,H3#C3,.C2,#C1 { COLOR:D00000; }  H6,H5,H4,H3 . . . 見出し文字用の既存タグ  C4,C3 . . . H4,H3 専用のクラス  C2,C1 . . . 任意のタグと組み合わせて使うためのクラス T 定義したクラスの使用 P { } のように定義したものは、<P>〜</P> のように、従来どおりに使用します。 .C1 { } のように . を付けて定義したものは、SPAN または既存タグと組み合わせて使用します。   <P CLASS="C1">〜</P>   P.C1{ } のように、主タグを指定してあるものは、他のタグとは組み合わせられません。 #C2 { } のように # を付けて定義したものも、SPAN または既存タグと組み合わせて使用します。   <P ID="C2">〜</P>   P#C2{ } のように、主タグを指定してあるものは、他のタグとは組み合わせられません。 主タグに 既存の補助タグがある場合は、それらと合わせて使用できます。   <FONT COLOR=RED CLASS=C1 ID=C2>〜</FONT> クラスまたはIDは、一個だけ使用できます。 複数書くと、一個だけが働きます。   <P CLASS=C1 CLASS=C2>〜</P>  C1 だけが働きます。
T
  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html