"My Pure Lady" Junko Sakurada
桜田淳子資料館 管理人室
3.文書レイアウト
段 落
HTML INDEX
●<P>（ 〜 </P>）
【説 明】
段落が変わることを意味し、文書がそこで改行されて、さらに１行分のスペースがとられます。このタグは、続けて複数記述しても１つ分の効果しか現われません。また、オプションの「ALIGN」を使用して行揃えを指定する場合には、 </P> を使用してタグを閉じます。
・ALIGN="行揃え"
「行揃え」には、left・right・center が指定できます。
【使用例】
-
段落１<P>段落２
段落１段落２
段落１<P ALIGN="center">段落２</P>段落３
段落１段落２ 段落3
段落１<P ALIGN="right">段落２</P>段落３
段落１段落２ 段落3
改 行
HTML INDEX
●<BR>
【説 明】
文書がそこで改行されます。また、「CLEAR」オプションを使用して、画像の回り込みをクリアすることもできます。
・CLEAR="方向"
「方向」には、left・right・all が指定できます。
【使用例】
-
文書を<BR>改行して<BR>表示
文書を
改行して
表示
<IMG SRC="river.gif" ALIGN="left">
北海道には<BR>
こんな名前の川があります。
<BR CLEAR="left">
いいんでないかい。
北海道には
こんな名前の川があります。
いいんでないかい。
<IMG SRC="river.gif" ALIGN="right">
北海道には<BR>
こんな名前の川があります。
<BR CLEAR="right">
いいんでないかい。
北海道には
こんな名前の川があります。
いいんでないかい。
<IMG SRC="river.gif" ALIGN="left">
<IMG SRC="river.gif" ALIGN="right">
北海道には<BR>
こんな川があります。
<BR CLEAR="all">
いいんでないかい。
北海道には
こんな川があります。
いいんでないかい。
水 平 線
HTML INDEX
●<HR>
【説 明】
引っ込んだ感じの影のついた水平線（横線）を引きます。
・SIZE="線の太さ"
「線の太さ」は、ピクセル数で指定します。
・WIDTH="幅ピクセル数"
「幅ピクセル数」は、ピクセル数で指定します。
・WIDTH="幅パーセント%"
「幅パーセント」は、パーセントで指定します。
・ALIGN="行揃え"
「行揃え」には、left・right・center が指定できます。
・NOSHADE
引っ込んだ感じにせずに、黒く塗りつぶします。
【使用例】
-
<HR SIZE=1 WIDTH=40%>
<HR SIZE=2 WIDTH=40%>
<HR SIZE=3 WIDTH=40%>
<HR SIZE=4 WIDTH=40%>
<HR SIZE=5 WIDTH=40%>
<HR SIZE=10 WIDTH=10>
<HR SIZE=4 WIDTH=40% NOSHADE>
<HR SIZE=50 WIDTH=5 ALIGN="left">
センタリング
HTML INDEX
●<CENTER> 〜 </CENTER>
【説 明】
センタリングして表示します。
【使用例】
-
<CENTER>中央に表示します。</CENTER>
中央に表示します。
行 揃 え
HTML INDEX
●<DIV> 〜 </DIV>
【説 明】
行揃えを指定します。
・ALIGN="行揃え"
「行揃え」には、left・right・center が指定できます。
【使用例】
-
<DIV ALIGN="left">左寄せ</DIV>
左寄せ
<DIV ALIGN="center">センタリング</DIV>
センタリング
<DIV ALIGN="right">右寄せ</DIV>
右寄せ
引 用 文
HTML INDEX
●<BLOCKQUOTE> 〜 </BLOCKQUOTE>
【説 明】
引用文を記述するためのタグで、両サイド（左右）がインデントされて表示されます。
【使用例】
-
<BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
</BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
<BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。
<BLOCKQUOTE>
例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
</BLOCKQUOTE>
</BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。
例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
等幅フォント
HTML INDEX
●<PRE> 〜 </PRE>
【説 明】
ブラウザのプリファレンスで設定した等幅フォントで、 HTMLソースに記述した通りに（スペース・タブ・改行もそのまま）表示されます。
【使用例】
-
<PRE>
例えば、ここで改行
を入れて...
ここでスペース を入れて...
ここでタブ を入れて...
</PRE>
例えば、ここで改行
を入れて...
ここでスペース を入れて...
ここでタブ を入れて...
等幅フォント
HTML INDEX
●<XMP> 〜 </XMP>
【説 明】
ブラウザのプリファレンスで設定した等幅フォントで、 HTMLソースに記述した通りに（スペース・タブ・改行もそのまま）表示されます。しかも、このタグを使用すると「<」・「>」・「&」・「"」もそのまま表示されますので大変便利です。HTMLのサンプルソースがそのまま表示できるのですが、やはり</XMP>だけは表示できません（有効になってしまう）ので一応注意してください。
【使用例】
-
<XMP>
<HTML>
<HEAD>
<TITLE>ZSPC HomePage</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
</XMP>
<![CDATA[
<HTML>
<HEAD>
<TITLE>ZSPC HomePage</TITLE>
</HEAD>
<BODY>
<script><!--
var fc2footerparam = 'charset=' + encodeURIComponent(document.charset ? document.charset : document.characterSet) + '&url=' + encodeURIComponent(document.location) + '&service=0&r=' + Math.floor(Math.random()*99999999999);
var fc2footertag = "//vip.chps-api.fc2.com/apis/footer/?" + fc2footerparam;
var script = document.createElement('script');
script.src = fc2footertag;
script.charset = "UTF-8";
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);
//--></script>
<!-- FC2, inc.-->
<img src="//media.fc2.com/counter_img.php?id=50" style="visibility:hidden" alt="inserted by FC2 system" width="0" height="0">
<!-- FC2, inc.--></BODY>
</HTML>
]]>
改行せず
HTML INDEX
●<NOBR> 〜 </NOBR>
【説 明】
改行しないで表示します。
【使用例】
-
<NOBR>
改行しないで表示するというのは、
あまり関心しません。
隠しリンクにでも利用するのでしょうか？
</NOBR>
改行しないで表示するというのは、
あまり関心しません。
隠しリンクにでも利用するのでしょうか？
★3.0b5 〜
●<MULTICOL> 〜 </MULTICOL>
【説 明】
段組を指定します。段の幅を指定することができますが、各段の幅は常に同じになります。
・COLS="段数"
「段数」には、何段組にするかを整数で指定します。
・GUTTER="段間隔"
「段間隔」には、段と段の間隔をピクセル単位で指定します。デフォルトは 10 です。
・WIDTH="段幅"
「段幅」は、段の幅を指定します。指定しない場合は、自動的に調整されます。
【使用例】
-
<MULTICOL COLS=3 GUTTER=20>
やっと、正式な段組がサポートされました。
今まで、これを実現するために、
テーブル機能を利用していましたが、
あれは、あれで利用価値はあると思われます。
</MULTICOL>
やっと、正式な段組がサポートされました。
今まで、これを実現するために、
テーブル機能を利用していましたが、
あれは、あれで利用価値はあると思われます。
|