html-配置(背景・区切)　

.HTML　背景や配置・配色など背景他 '98. 2. 8

.お知らせ　内容　 LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　

.全般_	.文字	_配置	表	_リンク	.フレ-ム	ＣＧＩ	.タグ一覧.
登録_	.音・画.	.スタイル	.マ-キ-.	.ActiveX.	---	.色の名前.	_色一覧

[ページの背景・区切等]　ページの背景　文字の配色(全体) 　全体の配置(マージン) 　文字・画像等の配置( DIV ) 　区切り線( HR ) 　左右方向の分割配置( MULTICOL ) 　LAYER → [フレーム]　

[リスト等]　リスト　番号付リスト　アイコンを指定するリスト　定義型リスト　具体例　備考
その他　そのまま表示　引用文　中央寄せ表示　右・左寄せ表示　~~タイトル・BODYの上書~~

　BG=Big-B060.gif　img=Big-B060.gif, Big-RNGO.gif

T⇔ ページの背景 (背景色と背景画像)

背景は、<BODY>の部分にいっしょに記述しておきます。
必要なものだけを書きます。

<BODY
BGCOLOR="#FF,FF,00"
BACKGROUND="../gazou/Big-B060.gif"
BGPROPERTIES=FIXED
>

　(本文の内容)
</BODY>
</HTML>

　
背景色=黄
背景画像
背景=固定

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

<BODY
BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#0000FF"
VLINK="#A00060"
ALINK="#FF0000"
>

　(本文の内容)
</BODY>
</HTML>


背景色文章の色(ページ全体) リンクの色(未閲覧) リンクの色(閲覧済) リンクの色(リンク中)

メモ : リンク文字の色をアンカータグの内側で指定した場合は、そちらが優先されます。

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

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

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

T⇔ 全体の配置

ウインドウ内の余白(マージン)を設定します。　...IExploreのみ。

　(本文の内容)
</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>　....１本の線を引きます。↓例。

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

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

具体例　( Netscape は、このページの背景色＝水色を濃くした色になります。)
<HR COLOR=RED>

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
　