html-スタイル(配置)　

lHTML　スタイル　文字の配置 '98. 4. 7/'96.11.25

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

.全般_

.スタイル

.色の名前.

_色一覧_

　備考　スタイル　文字 ( 配置 ) 　縁取り枠　領域　浮動域　座標　シート　他　

　左右配置　行末揃え段落　スペース・内部余白　外部余白(移動) 　重ね合せの順番　　　

[ページ内]　( bih-h_gp.htm )

T	左右方向の配置

IExplore では、<FONT> などとは組み合わせられません。
配置のスタイルは、配置用のＨＴＭＬタグと組み合わせて使用します。
配置用のＨＴＭＬタグとは、
DIV P CENTER PRE　TABLE TR TD　UL OL LI　H1 H5 などです。
これらは、改行または空行などにはさまれて、前後の内容と区切られるものです。
なお、TABLE タグに配置スタイルを使用した場合は、
表の内容ではなく、表自体の配置を指定したことになります。

以下、このようなスタイルは <DIV> を使って書いてあります。

行末揃え

( 欧文のみ )

分かち書き文の、スペース量を調整して、行末を揃えます。
Netscape では、ブラウザの設定を[英語]にしないと効果が出ません。
分かち書き : 文章の意味を分かり易くするために、[スペース] で区切って書くこと。

この例では、幅 650 のフローティングフレームで表示しています。
PADDING:0 170 で、上から０の位置に、左右に幅 170 のスペースを作っています。
これは、行末揃えの効果をはっきりさせるためで、必要ではありません。
日本語は、文字がひとつの単語として処理されます。
<NOBR>を使用したとき、<NOBR>～</NOBR>が表示幅より長いときは、はみ出して表示されます。
ですからもし表の中で使うときは、<TD>の幅を<NOBR>～</NOBR>の幅よりも長くします。

老子は楚の <NOBR><U>苦県厲郷曲仁里</U></NOBR> の人でした。<BR>
Taiwan Honshu Nihon Nippon Japan <NOBR><U>the Republic of Chinese</U></NOBR>
(Hongkong) Ceylon Iran Denmark Sweden Switzerland Austria Belgium
Finland Argentina Chile United States of America Peru Brazil Canada<BR>

</DIV>

段落

( 最初の一個所だけ桁下げ表示します。)

<P STYLE="TEXT-INDENT:1EM;">
いろはにほへとちりぬるを<BR>
わかよたれそつねならむ<BR>
うゐのおくやまけふこえて<BR>
あさきゆめみしゑひもせす<BR>
</P>

　これは擬似表現です。
　
□いろはにほへとちりぬるを<BR>
わかよたれそつねならむ<BR>
うゐのおくやまけふこえて<BR>
あさきゆめみしゑひもせす<BR>

EM は、一文字分の長さです。単位は、[備考] のページにまとめてあります。
　このページは、FONT-SIZE:20PX; にしていますから、1EM=20PX です。

NetScape : 表の中で使用した場合、一つ目の段落の桁下げが指定値の２倍になります。

スペースをそのまま表示

( Netscape のみ )

<DIV STYLE="WHITE-SPACE:PRE;">A B   C       D</DIV>

PRE(そのまま)/ NORMAL(従来どおり一個だけ)

T	スタイルの内部余白

上・下・左・右に、何も表示しない部分を設けます。
内部余白とは、<DIV>～<DIV>などの、領域の内部に作る余白です。
余白を取って表示するだけですから、[内部] を意識する必要はありません。
もし、[縁取り枠]のページのように、スタイル領域を縁取り枠で囲むと、
余白を含んだ内容全体が縁取り枠で囲まれます。

TOP/LEFT/RIGHT/BOTTOM　. . . 上／左／右／下

このように<BR>
左側に<BR>
何も表示されない部分が設けられます。<BR>

</DIV>

右側スペースを指定すると、右端には何も表示されない部分が作られます。<BR>

</DIV>

※　折返しが発生する例です。Netscape では、
　枠内でフォントサイズの設定が必要です。
　ページ先頭で指定した[ＭＳＰゴシック]の再設定が必要。
※　表の中で右余白を指定すると、IExplore では、
　その項目(TD) 全体に余白が作られます。
　上記の文章は、表を二重にしてこの文章と分けています。

上にスペースが作られます。<BR>

</DIV>

下にスペースが作られます。<BR>

</DIV>

※　ここで、[ＭＳＰゴシック] を再指定。

複数同時に指定する場合 (１)

この例では、左／右に 50PX／200PX のスペースを設けています。<BR>

</DIV>

メモ : Netscape では、縁取り枠を指定しないと、右スペースが左と同じになります。
縁取り枠(BORDER-) の記事は、[縁取り枠]のページにあります。

複数同時に指定する場合 (２)

この例では、上・右・下・左に、10PX, 200PX, 20PX, 50PX のスペースを設けています。<BR>

</DIV>

縁取り枠を指定していますが、この書式では必要ありません。

PADDING:10PX 200PX 20PX 50PX;　上・右・下・左に余白を設けます。
PADDING:10PX 200PX 20PX;　　　上・左右・下に余白を設けます。
PADDING:10PX 200PX;　　　　　上下・左右に余白を設けます。
PADDING:30PX;　　　　　　　上下左右に余白を設けます。

T	スタイルの外側余白

<DIV>～<DIV>などの領域の、外側に余白を設けます。

普通の表示では、上記の PADDING(スタイルの内部余白) とまったく同じです。
縁取り枠を描いたり背景を付けると、上記 PADDING と区別できます。

上記 PADDING(スタイルの内部余白) との大きな違いは、
マイナスの余白を指定できることです。

負の余白を指定すると、すでに表示済みの内容に重なります。
負の余白を指定することで、重ね表示が可能になります。

IExplore では、幅を指定したときには、負の外側領域は無効です。
幅を指定した領域は、後のページにある POSITION で動かします。

余白が取れないとき。
Netscape : 余白を取りません。( 移動されません。)
IExplore : 指定余白に相当する分移動します。( 例えば、画面左端を越えて見えなくなる。)
余白を取っても変わらない場合もあります。( 例えば、普通の状態で右側に余白を作る。)

上余白
下余白
左余白
右余白
右配置・右余白

[ 例 ]　余白を指定すると、何も表示されない部分が作られます。

左・外側余白

右・外側余白

　　　　上余白

　　　下余白

マイナスの余白を指定すると、すでに表示されている内容と重なります。

　↑上に移動しても、こんな隙間はできません。ちゃんとつながります。

Netscape は、<DIV>, <P>以外のタグとも組み合わせができます。

<SPAN STYLE="MARGIN-LEFT:170PX;">
Netscape
<SPAN STYLE="MARGIN-LEFT:170PX;">Communicator</SPAN>
</SPAN>

170PX　　

Netscape　　170PX

Communicator

Netscape では、<SPAN>で余白を作ると、</SPAN>で改行されます。
横方向にならべるために、この例では<SPAN>の中に<SPAN>を入れています。

用例

朝

昼

夕

夜

コードは省略していますが、負の余白を指定しない場合は、幅も指定できます。
メモ : 文字の大きさと余白に、同じ単位を使うと位置が決め易いです。

T	重ね合せの順番

重ね表示をした場合は、後に書いたものほど上に表示されます。

◇下◇

◇中◇

◇上◇

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