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

l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .スタイル .名前. _一覧_
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート    
 左右配置  行末揃え 段落  スペース内部余白  外部余白(移動)  重ね合せの順番      
[ページ内] ( bih-h_gp.htm )
T
 
 左右方向の配置 
<DIV STYLE="TEXT-ALIGN:LEFT;">左側</DIV>
<DIV STYLE="TEXT-ALIGN:CENTER;">中央</DIV>
<DIV STYLE="TEXT-ALIGN:RIGHT;">右側</DIV>

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

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


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

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




T
 
 段落   ( 最初の一個所だけ桁下げ表示します。)
<P STYLE="TEXT-INDENT:1EM;">
いろはにほへと ちりぬるを<BR>
わかよたれそ つねならむ<BR>
うゐのおくやま けふこえて<BR>
あさきゆめみし ゑひもせす<BR>
</P>
 これは擬似表現です。
 
いろはにほへと ちりぬるを<BR>
わかよたれそ つねならむ<BR>
うゐのおくやま けふこえて<BR>
あさきゆめみし ゑひもせす<BR>
EM は、一文字分の長さです。 単位は、[備考] のページにまとめてあります
 このページは、FONT-SIZE:20PX; にしていますから、1EM=20PX です。

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



T
 
 スペースを そのまま表示   ( Netscape のみ )
<DIV STYLE="WHITE-SPACE:PRE;">A B   C       D</DIV>
PRE(そのまま)/ NORMAL(従来どおり一個だけ)



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

<DIV STYLE="PADDING-LEFT:70PX;">
このように<BR>
左側に<BR>
何も表示されない部分が設けられます。<BR>
</DIV>
<DIV STYLE="PADDING-RIGHT:200PX;">
右側スペース を指定すると、右端には何も表示されない部分が作られます。<BR>
</DIV>
※ 折返しが発生する例です。Netscape では、
 枠内でフォントサイズの設定が必要です。
 ページ先頭で指定した[MS Pゴシック]の再設定が必要。
※ 表の中で右余白を指定すると、IExplore では、
 その項目(TD) 全体に余白が作られます。
 上記の文章は、表を二重にして この文章と分けています。

<DIV STYLE="PADDING-TOP:20PX;">
上にスペースが作られます。<BR>
</DIV>
<DIV STYLE="PADDING-BOTTM:20PX;">
下にスペースが作られます。<BR>
</DIV>
※ ここで、[MS Pゴシック] を再指定。

複数同時に指定する場合 (1)
<DIV STYLE=" BORDER-STYLE:NONE; BORDER-WIDTH:1PX;
PADDING-LEFT:50PX; PADDING-RIGHT:200PX; ">
この例では、左/右に 50PX/200PX のスペースを設けています。<BR>
</DIV>
メモ : Netscape では、縁取り枠を指定しないと、右スペースが左と同じになります。
縁取り枠(BORDER-) の記事は、[縁取り枠]のページにあります。

複数同時に指定する場合 (2)
<DIV STYLE=" BORDER-STYLE:SOLID; BORDER-WIDTH:1PX;
PADDING:10PX 200PX 20PX 50PX; ">
この例では、上・右・下・左 に、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 : 指定余白に相当する分移動します。( 例えば、画面左端を越えて見えなくなる。)
余白を取っても変わらない場合もあります。( 例えば、普通の状態で右側に余白を作る。)
<DIV STYLE="MARGIN-TOP:20PX;"></DIV>
<DIV STYLE="MARGIN-BOTTOM:20PX;"></DIV>
<DIV STYLE="MARGIN-LEFT:150PX;"></DIV>
<DIV STYLE="MARGIN-RIGHT:150PX;"></DIV>
<DIV ALIGN=RIGHT STYLE="MARGIN-RIGHT:150PX;"></DIV>
上余白
下余白
左余白
右余白
右配置・右余白

[ 例 ] 余白を指定すると、何も表示されない部分が作られます。
左・外側余白
<DIV STYLE="MARGIN-LEFT:150PX;"></DIV>
<DIV STYLE="MARGIN-RIGHT:150PX;"></DIV>
右・外側余白
    上余白
<DIV STYLE="MARGIN-TOP:15PX;"></DIV>
<DIV STYLE="MARGIN-BOTTOM:30PX;"></DIV>
   下余白

マイナスの余白を指定すると、すでに表示されている内容と重なります。
<DIV STYLE="MARGIN-TOP:-6PX;"></DIV>
 
 ↑上に移動しても、こんな隙間はできません。ちゃんとつながります。

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>を入れています。

用例
<FONT FACE="MS 明朝">
<DIV STYLE=" FONT-SIZE:50PX; COLOR:RED;
MARGIN-TOP:10PX;"></DIV>
<DIV STYLE=" FONT-SIZE:40PX; COLOR:00FF00;
MARGIN-TOP:-25PX; MARGIN-LEFT:25PX; "></DIV>
<DIV STYLE=" FONT-SIZE:30PX; COLOR:BLUE;
MARGIN-TOP:-20PX; MARGIN-LEFT:45PX; "></DIV>
<DIV STYLE="FONT-SIZE:80PX;TEXT-ALIGN:RIGHT;
MARGIN-TOP:-1.1EM; MARGIN-RIGHT:3CM;"></DIV>
</FONT>
コードは省略していますが、負の余白を指定しない場合は、幅も指定できます。
メモ : 文字の大きさと余白に、同じ単位を使うと位置が決め易いです。




T
 
 重ね合せの順番 
重ね表示をした場合は、後に書いたものほど上に表示されます。
<DIV STYLE=" FONT-SIZE:50PX; COLOR:RED; MARGIN-TOP:0PX;">◇下◇</DIV>
<DIV STYLE=" FONT-SIZE:50PX; COLOR:YELLOW; MARGIN-TOP:-30PX;">◇中◇</DIV>
<DIV STYLE=" FONT-SIZE:50PX; COLOR:BLUE; MARGIN-TOP:-30PX;">◇上◇</DIV>
◇下◇
◇中◇
◇上◇

T

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