.HTML 背景や配置・配色など 背景他 '98. 2. 8
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
[ページの背景・区切等]  ページの背景  文字の配色(全体)  全体の配置(マージン)  文字・画像等の配置( DIV )   区切り線( HR )   左右方向の分割配置( MULTICOL )  LAYER → [フレーム] 
[リスト等]  リスト  番号付リスト  アイコンを指定するリスト  定義型リスト  具体例  備考
その他  そのまま表示  引用文  中央寄せ表示  右・左寄せ表示  タイトル・BODYの上書
 BG=Big-B060.gif img=Big-B060.gif, Big-RNGO.gif
T ページの背景 (背景色と背景画像)

背景は、<BODY>の部分にいっしょに記述しておきます。
必要なものだけを書きます。
<HTML><HADE><TITELE>タイトル</TITEL></HADE>
<BODY
BGCOLOR="#FF,FF,00"
BACKGROUND="../gazou/Big-B060.gif"
BGPROPERTIES=FIXED
>
 (本文の内容)
</BODY>
</HTML>

 
 
背景色=黄
背景画像
背景=固定
背景色
"#FF_FF_00" のように、3原色の組み合わせで指定します。( FFFF00=黄色 )
BGCOLOR="YELLOW" のように、色名での指定も可能です。
# は、色名での指定と区別するための記号です。( 省略可。)
3原色の区切り記号には、_ 以外の スペースや他の文字も使用できます。
" " は、色の指定部分を明確にするための記号です。( 間にスペースがなければ省略可。)
"#FFFF00" や FFFF00 のような省略記述の方法もあります。
Netscape3.0 : 3原色の区切りを省略すると、区切り線<HR>の色が白黒になります。
    4.03 : 背景に GIF画像を使用すると、背景色が変る場合があります。
        例 . . . E0E0D0 → E8E8D8 の色になります。

背景画像は、表示したい画像ファイルを指定します。
この例では、画像ファイルを別なディレクトリに置いているので、 ../gazou/ のように、ディレクトリも指定しています。
画像ファイルが、ソースファイルと同じディレクトリにある場合は、 BACKGROUND="Big-B060.gif" のように、ファイル名だけを指定できます。
画像ファイルには、.jpg または .gif 形式のファイルを指定します。
インターネットエクスプローラ3.0なら、ペイントブラシで描いた .bmp の画像も表示できます。(画像のページ参照。)

背景の固定は、IExplore のみです。
背景を固定すると、画面をスクロールしても背景画像は動きません。
背景を指定した表があるページでは、画面をスクロールするとチラチラします。
このページは、文字が読みにくくなるので背景は固定していません。
カウンタ のページは BGPROPERTIES で背景を固定してあります。

このページは、<BODY BACKGROUND="../gazou/Big-B060.gif">で背景を設定しています。
これが画面いっぱいに、繰り返し表示されています。

 
IExplore では、背景と同じ画像を表示すると、再描画したときに 背景が表示されない場合があります。
( そのため上の絵は 別な画像 Big-B059.jpg を表示しています。)


T 文字の配色 (全体)

配色も、<BODY>の部分にいっしょに記述します。
<HTML><HADE><TITELE>タイトル</TITEL></HADE>
<BODY
BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#0000FF"
VLINK="#A00060"
ALINK="#FF0000"
>
 (本文の内容)
</BODY>
</HTML>

 
 
背景色
文章の色(ページ全体)
リンクの色(未閲覧)
リンクの色(閲覧済)
リンクの色(リンク中)
メモ : リンク文字の色を アンカータグの内側で指定した場合は、そちらが優先されます。

これらを指定しないと、見る人のブラウザにで決められている色になります。
文章の色を部分的に変える場合は、<FONT>タグを使います。(「文字」参照。)

IExplore では、リンクのために表示する部分が、画像やマーキー(スクロール文字)の場合は、LINK VLINK で指定した色の枠で囲まれます。
( この枠を消すには、画像やマーキーに BORDER=0 の指定をします。)

LINK VLINK ALINK いずれかを背景色と同じにすると、当然見えなくなります。


T 全体の配置

ウインドウ内の余白(マージン)を設定します。 ...IExploreのみ。
<HTML><HADE><TITELE>タイトル</TITEL></HADE>
<BODY
TOPMARGIN="10" LEFTMARGIN="10" RIGHTMARGIN="10" BOTTOMMARGIN="10"
>
 (本文の内容)
</BODY></HTML>
TOPMARGIN : ページ上端の余白。( 無指定時 = 10 Netscape=8 )
LEFTMARGIN : ページ左側の余白。( 無指定時 = 10 Netscape=8 )
RIGHTMARGIN : ページ右側の余白。( 無指定時 = 10 Netscape=8 )
BOTTOMMARGIN : ページ下端の余白。( 無指定時 = 2 Netscape=16 )
(このページは TOPMARGIN=0 にしています。)



T 文字や画像などの表示位置の指定
左右の、どの位置に表示するのかを指定します。

これらはひとつの段落として扱われます。
以前は、前後に<P>と</P>が自動的に付加されました。
4.0 のブラウザでは、改行されます。二行ならべても空行は入りません
<CENTER>表示する内容</CENTER>
<DIV ALIGN=LEFT>表示内容</DIV>
<DIV ALIGN=CENTER>表示内容</DIV>
<DIV ALIGN=RIGHT>表示内容</DIV>
左右の中央に表示
左側に表示
中央に表示
右側に表示
 Iexplore2.0 では、DIV は使用できません。

「表示する内容」には、何が何個(何行分)入ってもかまいません。
配置を詳しく設定したい場合には、表を使用する方法があります。


T 区切り線 画面を見やすく区切るための線です。
<HR> ....1本の線を引きます。↓例。

<HR      以下、必要なものだけを書きます。
SIZE=5    太さを 5 にします。 省略時 : IExplore=1, Netscape=2 
WIDTH=100   横幅(長さ)を 100 にします。%での指定も可。
ALIGN=LEFT  LEFT/CENTER/RIGHT 描く位置を指定します。
COLOR="#0000FF" 青色(0000FF) の線にします。
NOSHADE 平面的な線にします。 ( 幅があり、無着色のとき )
>
( COLOR )
 Netscape3.0 は、<BODY>で指定した背景色より 少し暗い色になります。
 ただし、背景色は色名ではなく、省略しない色コードで指定してあること。
 例 RGB(16,255,255) または 10,FF,FF ( 各3原色は 10 以上であること。)
   . . . Netscape4.03 は 省略記述でも着色されます。

実際の太さ ( SIZE )
指定値 →
IExplore
Netscape
 〃
無指定
   1
   3
   2
0 1 2 3 4 5
1 1 2 3 4 5
1 1 3 4 5 6
1 1 2 3 4 5 ( NOSHADE の指定をしたとき )

平面表示 ( NOSHADE )
実際の太さが3以上では、凹んだ長方形状に表示されます。
NOSHADE の指定をすると、平面的に表示されます。
Netscape : SIZE=6 以上では、角がまるく なります。
Netscape : SIZE=7 以上の奇数 では、上側の角がまるく なります。

<HR>は 段落の区切りの働きもあります。
つまり、<HR>の前に<BR>がなくても、<HR>の前後では改行されます。

具体例 ( Netscape は、このページの背景色=水色 を濃くした色になります。)
<HR COLOR=RED>
<HR WIDTH=30% ALIGN=LEFT>
<HR SIZE=0 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR SIZE=1 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR SIZE=2 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR SIZE=3 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR COLOR=Gold SIZE=10 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR COLOR=Orange SIZE=11 WIDTH=30% ALIGN=LEFT NOSHADE>
<HR SIZE=20 WIDTH=30% ALIGN=LEFT>
Netscape では、線の下側が見えにくくなっていますが、別な色にすればはっきりします。
 

T 左右方向の分割 ( Netscape4.0 のみ )
指定範囲内を、列に分けます。
<MULTICOL COLS=3 GUTTER=100
あいうえおかきくけこさしすせそ<BR> たちつてとなにぬねのはひふへほ<BR>
あいうえおかきくけこさしすせそ<BR> たちつてとなにぬねのはひふへほ<BR>
あいうえおかきくけこさしすせそ<BR> たちつてと<BR>
</MULTICOL>
上下には空行が設けられます。
次のように表示されます。( 表を使った擬似表現 )

あいうえおかきくけこさしすせそ<BR>
たちつてとなにぬねのはひふへほ<BR>
GUTTER あいうえおかきくけこさしすせそ<BR>
たちつてとなにぬねのはひふへほ<BR>
GUTTER あいうえおかきくけこさしすせそ<BR>
たちつてと<BR>

実際には、そのときのウィンドウ幅に応じて、各列の行数が同じになるように、文章が左右の列にシフトします。
これは擬似表現なので、文章は各列の間を移動しません。


T → 続き ( リスト )

     
    mtoga@sannet.ne.jp    登録日 '96. 6.15
  URL : http://www.page.sannet.ne.jp/mtoga/index.html