3.文書レイアウト

ここで示すタグは、文書の体裁を指定するものです
ここでは、タグの内、<P><BR><HR><CENTER><DIV><BLOCKQUOTE><CITE><PRE><XMP><CODE><NOBR>
<WBR><ADDRESS><MULTICOL><SPACER>について説明します

(1) <P>
<P
 align="行揃え"
>
</P>

段落を示すタグです
alignは、行揃えを指定します、「left(左詰め)」、「center(中央)」、「right(右詰め)」が指定出来ます
<P>を単独で使用すると、改行が実行され、その上、もう1行、行が送られます
以下は、この使い方の例です
段落1<P>段落2は、
段落1

段落2

<P></P>で囲むとその範囲が、別の段落として扱われます
この場合、alignにて行揃えの指定が可能で、段落の前、後ろで行が送られます
以下は、この使い方の例です
段落<P align="left">左詰めの段落</P>は、
段落

左詰めの段落



段落<P align="center">中央揃えの段落</P>は、
段落

中央揃えの段落



段落<P align="right">右詰めの段落</P>は、
段落

右詰めの段落

(2) <BR
 clear="方向"
>

改行を示すタグです
clearは、画像の回り込みの停止を指示します、「left(左)」、「right(右)」、「all(全部)」が指定出来ます
以下は、この使い方の例です

行1<BR>行2は、
行1
行2

<IMG src="pac1.gif" align="left">たとえば、<BR>この場合<BR clear="left">こうなりますは、
たとえば、
この場合
こうなります

<IMG src="pac1.gif" align="right">たとえば、<BR>この場合<BR clear="right">こうなりますは、
たとえば、
この場合
こうなります

<IMG src="pac1.gif" align="left"><IMG src="pac1.gif" align="right">たとえば、<BR>この場合<BR clear="all">こうなりますは、
たとえば、
この場合
こうなります

(3) <HR
 size="線の太さ"
 width="線の幅"
 align="行揃え"
 noshade
>

水平線で区切りをつけるタグです
sizeは線の太さを示し、ピクセル値(数値)を指示します
widthは線の幅を示し、ピクセル値(数値)、もしくは、全体の幅に対する割合(数値+%)で指示します
alignは、行揃えを指定します、「left(左詰め)」、「center(中央)」、「right(右詰め)」が指定出来ます
noshadeは、凹んだ感じにせず、黒く塗りつぶします
以下は、この使い方の例です

<HR size="1" width="100">は、

<HR size="4" width="100">は、

<HR size="2" width="30%" align="left">は、

<HR size="2" width="30%" align="center">は、

<HR size="2" width="30%" align="right">は、

<HR size="4" width="100" noshade>は、

(4) <CENTER>
</CENTER>

このタグで囲まれた部分を、中央揃えで表示します
同じことは、<P align="center"></P>でも出来ますが、こちらの方は、前後に空行が挿入されません
以下は、この使い方の例です

前の行<CENTER>中央揃えの行1<BR>次の行</CENTER>元に戻った行は、
前の行
中央揃えの行1
次の行
元に戻った行
(5) <DIV
 align="行揃え"
>
</DIV>

このタグで囲まれた部分の、行揃えを指示します
alignは、行揃えを指定します、「left(左詰め)」、「center(中央)」、「right(右詰め)」が指定出来ます
同じことは、<P align="行揃え"></P>でも出来ますが、こちらの方は、後に空行が挿入されません
以下は、この使い方の例です

前の行<DIV align="left">左揃えの行1<BR>次の行</DIV>元に戻った行は、
前の行
左揃えの行1
次の行
元に戻った行

前の行<DIV align="center">中央揃えの行1<BR>次の行</DIV>元に戻った行は、
前の行
中央揃えの行1
次の行
元に戻った行

前の行<DIV align="right">右揃えの行1<BR>次の行</DIV>元に戻った行は、
前の行
右揃えの行1
次の行
元に戻った行
(6) <BLOCKQUOTE>
</BLOCKQUOTE>

このタグで囲まれた部分は、両サイドがインデントされ表示されます
主にある部分からの引用内容を示す場合に使用します
以下は、この使い方の例です

<BLOCKQUOTE>HTMLは元来、研究者のためのレポート、論文の記述方式を統一し、自由な閲覧を可能にするための方法として考え出されました</BLOCKQUOTE>は、
HTMLは元来、研究者のためのレポート、論文の記述方式を統一し、自由な閲覧を可能にするための方法として考え出されました
(7) <CITE>
</CITE>

このタグで囲まれた部分は、イタリック(斜体)で表示されます
書籍名等、短い引用元情報を示す場合に使用します
以下は、この使い方の例です

このテキストは、<CITE>ZSPC Super HTML Reference</CITE>を参考にしていますは、
このテキストは、ZSPC Super HTML Referenceを参考にしています
(8) <PRE
 cols="文字数"
 wrap
>
</PRE>

このタグで囲まれた部分は、等幅フォントでHTML文書に記述された通りに表示されます
colsは、1行の最大文字数を指定します
wrapを指定すると、文字は、ウィンドウの右端で折り返されます
改行や、スペースなどもそのまま表示されますが、タグは解釈されます
以下は、この使い方の例です

<PRE>
ここで改行
 ここで半角空白
BRタグはこの後(見えないけど)<BR>これでおしまい
</PRE>
は、
ここで改行
  ここで半角空白
BRタグはこの後(見えないけど)
これでおしまい
<PRE cols="60">
等幅フォントでHTML文書に記述された通りに表示されます。その確認のため、1行で長い文章を表示してみて、colsの効果を確認して見ましょう
</PRE>
は、
等幅フォントでHTML文書に記述された通りに表示されます。その確認のため、1行で長い文章を表示してみて、colsの効果を確認して見ましょう
注1)wrapの作用については、欄外に例を示します
(9) <XMP>
</XMP>

このタグで囲まれた部分は、等幅フォントでHTML文書に記述された通りに表示されます
改行や、スペースなどは、もちろん、タグまでもそのまま表示されますが、</XMP>タグだけは解釈されます
以下は、この使い方の例です

<XMP>
ここで改行
 ここで空白
 BRタグはこの後(見えないけど)<BR>
これでおしまい
</XMP>
は、 ここで改行  ここで空白  BRタグはこの後(見えないけど)<BR> これでおしまい
(10) <CODE>
</CODE>

このタグで囲まれた部分は、等幅フォントで表示されます
プログラムコードなどを表示するために使用します
以下は、この使い方の例です
<CODE> var move = 2;<BR> var speed = 150;<BR> var msg1=" このサンプルはスクリプトでマーキーするためのコードです ";<BR> var msg2=" このサンプルの文書を適当な内容に変えれば、自由なメッセージが表示出来ます ";<BR> var message=msg1+msg2;<BR> var message=message+message;<BR> function scroll() {<BR>   message=message.substring(move,message.length)+message.substring(0,move);<BR>   document.line_message.text.value = message;<BR>   setTimeout("scroll()",speed); <BR> }<BR> </CODE> は、
var move = 2;
var speed = 150;
var msg1=" このサンプルはスクリプトでマーキーするためのコードです ";
var msg2=" このサンプルの文書を適当な内容に変えれば、自由なメッセージが表示出来ます ";
var message=msg1+msg2;
var message=message+message;
function scroll() {
message=message.substring(move,message.length)+message.substring(0,move);
document.line_message.text.value = message;
setTimeout("scroll()",speed);
}
(11) <NOBR>
</NOBR>

このタグで囲まれた部分は、改行しません
注2)NOBRの作用については、欄外に例を示します
(12) <WBR>

<NOBR></NOBR>で囲まれた部分は、改行しませんが、その中で改行してもよい場所を指定します
注3)WBRの作用については、欄外に例を示します
(13) <ADDRESS>
</ADDRESS>

このタグで囲まれた部分は、住所を示します
ブラウザにより表示方法は異なりますが、斜体なんかで表示されます
以下は、この使い方の例です

<ADDRESS>兵庫県明石市中崎1丁目5番1号</ADDRESS> は、
兵庫県明石市中崎1丁目5番1号
(14) <MULTICOL
 cols="段数"
 gutter="段間隔"
 width="段幅"
>
</MULTICOL>

このタグで囲まれた部分を、段組して表示します
colsは、段組する段数を指示します
gutterは、段と段の間隔を、ピクセル値で指示します
widthは、段の幅を、ピクセル値で指示します
以下は、この使い方の例です

<MULTICOL cols="3" width="300"> この機能は同じことをしようとした場合、TABLEタグで可能でした
でもTABLEタグの場合は、自分で段組をする必要があって、面倒でしたが、MULTICOLならそんな事も心配いりません
</MULTICOL>
は、 この機能は同じことをしようとした場合、TABLEタグで可能でした でもTABLEタグの場合は、自分で段組をする必要があって、面倒でしたが、MULTICOLならそんな事も心配いりません <MULTICOL cols="3" gutter="100"> この機能は同じことをしようとした場合、TABLEタグで可能でした
でもTABLEタグの場合は、自分で段組をする必要があって、面倒でしたが、MULTICOLならそんな事も心配いりません
</MULTICOL>
は、 この機能は同じことをしようとした場合、TABLEタグで可能でした でもTABLEタグの場合は、自分で段組をする必要があって、面倒でしたが、MULTICOLならそんな事も心配いりません
(15) <SPACER
 type="タイプ"
 size="間隔"
 width="幅"
 height="高さ"
 align="位置"
>

このタグは、指定サイズの空白ブロックを挿入します
typeは、挿入するブロックの形態を指示します
タイプは、「horizontal(横方向の空白)」、「vertical(縦方向の空白)」、「block(方形の空白)」が指定できます
sizeは、ブロックのサイズをピクセル値で指示します
間隔は、タイプがblock以外の場合、その空白のサイズを指定出来ます
widthは、ブロックの幅をピクセル値で指示します
heightは、ブロックの高さをピクセル値で指示します
幅、高さは、タイプがblockの場合、その空白のブロックサイズを指定出来ます
alignは、ブロックの位置を指示します
位置は、タイプがblockの場合、その位置を指定出来、次のいずれかが可能です
    top:一番高さのあるものにあわせます
    texttop:一番高さのある文字にあわせます
    middle:中心を文字のベースラインをあわせます
    absmiddle:中心にラインの中心をあわせます
    baseline:文字のベースラインにあわせます
    bottom:下を文字のベースラインをあわせます
    absbottom:下をラインの下にあわせます
基本的には、その位置に透明な画像があるのと等価な振る舞いをします
以下は、この使い方の例です

次の行の横に挿入します<BR>
<SPACER type="horizontal" size="50">
この行の横に挿入します<BR>
は、
次の行の横に挿入します
この行の横に挿入します

次の行の前に挿入します<BR>
<SPACER type="vertical" size="30">
この行の前に挿入します<BR>
は、
次の行の前に挿入します
この行の前に挿入します

次の行の横に挿入します<BR>
<SPACER type="block" width="50" height="20">
この行の横に挿入します<BR>
この行の横に挿入します<BR>
この行の横に挿入します<BR>
は、
次の行の横に挿入します
この行の横に挿入します
この行の横に挿入します
この行の横に挿入します

alignの使用例については、<IMG>で説明します

注1)wrapの作用
<PRE wrap>
等幅フォントでHTML文書に記述された通りに表示されます。その確認のため、1行で長い文章を表示してみて、wrapの効果を確認して見ましょう </PRE>
は、
等幅フォントでHTML文書に記述された通りに表示されます。その確認のため、1行で長い文章を表示してみて、wrapの効果を確認して見ましょう

注2)NOBRの作用
<NOBR>
あまり長い行だと横スクロールして見る必要があって、面倒だけど、それでもあえてそうせざるを得ない場合は、NOBRタグで改行を禁止するしかないのでしょう
</NOBR>
は、 あまり長い行だと横スクロールして見る必要があって、面倒だけど、それでもあえてそうせざるを得ない場合は、NOBRタグで改行を禁止するしかないのでしょう


注3)WBRの作用
<NOBR>
あまり長い行だと横スクロールして見る必要があって、面倒だけど、それでもあえてそうせざるを得ない場合は、NOBRタグで改行を禁止するしかないのでしょう<WBR>でもここでは改行してもいいですよ
</NOBR>
は、 あまり長い行だと横スクロールして見る必要があって、面倒だけど、それでもあえてそうせざるを得ない場合は、NOBRタグで改行を禁止するしかないのでしょうでもここでは改行してもいいですよ