文書レイアウト。ＨＴＭＬ文章解説無料ホームページ作成は京都のリュウム

文書レイアウトタグ

<P>（　～　</P>）

【説　明】

このタグは、段落を表わします。文書がそこで改行されて、さらに１行分のスペースがとられます。このタグは、続けて複数記述しても１つ分の効果しか現われません。

</P> を使用してタグを閉じると、そこでも改行されて、さらに１行分のスペースがとられます。属性の「ALIGN」を使用して行揃えを指定する場合にもタグを閉じます。

・ALIGN="行揃え"
　「行揃え」には、left・right・center が指定できます。

【使用例】

段落１
<P>
段落２

段落１

段落２

-----------------------------------------------------------------------
段落１
<P ALIGN="center">
段落２
</P>
段落３

段落１

段落２

段落3

-----------------------------------------------------------------------
段落１
<P ALIGN="right">
段落２
</P>
段落３

段落１

段落２

段落3

<< PAGE TOP >>

<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">
いいんでないかい。

北海道には
こんな川があります。
いいんでないかい。

<< PAGE TOP >>

<HR>

【説　明】

引っ込んだ感じの影のついた水平線（横線）を引きます。

・SIZE="線の太さ"
　「線の太さ」は、ピクセル数で指定します。

・WIDTH="幅ピクセル数"
　「幅ピクセル数」は、ピクセル数で指定します。

・WIDTH="幅パーセント%"
　「幅パーセント」は、パーセントで指定します。

・ALIGN="行揃え"
　「行揃え」には、left・right・center が指定できます。

・NOSHADE
　引っ込んだ感じにせずに、黒く塗りつぶします。

【使用例】

<< PAGE TOP >>

<CENTER>　～　</CENTER>

【説　明】

センタリングして表示します。

【使用例】

<CENTER>中央に表示します。</CENTER>

中央に表示します。

<< PAGE TOP >>

<DIV>　～　</DIV>

【説　明】

ある程度の範囲に対して、行揃えやスタイルを適用したい場合に使用します。指定した範囲の最初は改行されます。

・ALIGN="行揃え"
　「行揃え」には、left・right・center が指定できます。

【使用例】

左寄せ

<DIV ALIGN="center">センタリング</DIV>

センタリング

右寄せ

<< PAGE TOP >>

<BLOCKQUOTE>　～　</BLOCKQUOTE>

【説　明】

引用文を記述するためのタグで、両サイド（左右）がインデントされて表示されます。

【使用例】

<BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
</BLOCKQUOTE>

砂浜には、結構たくさんの種類の甲殻類がいるものだ。例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。

<BLOCKQUOTE>
砂浜には、結構たくさんの種類の甲殻類がいるものだ。
<BLOCKQUOTE>
例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。
</BLOCKQUOTE>
</BLOCKQUOTE>

砂浜には、結構たくさんの種類の甲殻類がいるものだ。
例えば、貝殻を背負ったサメハダヘイケガニなどは、どこの海岸にも生息している。

<< PAGE TOP >>

<CITE>　～　</CITE>

【説　明】

本のタイトルなど短い引用文を記述するためのタグで、イタリックで表示されます。

【使用例】

<CITE>
Super Color Chart
</CITE>
も便利です。

Super Color Chart も便利です。

<< PAGE TOP >>

●<PRE>　～　</PRE>

【説　明】

ブラウザのプリファレンスで設定した等幅フォントで、 HTMLソースに記述した通りに（スペース・改行もそのまま）表示されます。ただし、<XMP>タグなどとは異なり、この範囲で使用されたタグは有効になります（タグが使用できます）。指定された範囲の最初は改行されて、さらに１行分のスペースがとられてから表示されます。

★4.0 ～
・COLS="文字数"
　「文字数」には、一行の最大文字数を指定します。一行がこの文字数に達すると、自動的に折り返されます。この場合、半角は１文字、全角は２文字で数えます。

★4.0 ～
・WRAP
　この属性を指定すると、文字がウインドウの右端まで来たところで自動的に折り返されます。

【使用例】

<PRE>
例えば、ここで改行
        を入れて...
        ここでスペース を入れて...
</PRE>

例えば、ここで改行
        を入れて...
        ここでスペース を入れて...

<PRE COLS=20>
ここに長い文字を書きましょう。
全角10文字で折り返すハズです。
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

１２３４５６７８９０１２３４５６７８９０
どうでしょうか？
</PRE>

ここに長い文字を書きましょう。
全角10文字で折り返すハズです。
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

１２３４５６７８９０１２３４５６７８９０
どうでしょうか？

<PRE WRAP>
ここに長い文字を書きましょう。
ちょうど右端で折り返すハズです。
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
１２３４５６７８９０１２３４５６７８９０
どうでしょうか？
</PRE>

ここに長い文字を書きましょう。
ちょうど右端で折り返すハズです。
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
１２３４５６７８９０１２３４５６７８９０
どうでしょうか？

<< PAGE TOP >>

<XMP>　～　</XMP>

【説　明】

ブラウザのプリファレンスで設定した等幅フォントで、 HTMLソースに記述した通りに（スペース・改行もそのまま）表示されます。しかも、このタグを使用すると「<」・「>」・「&」・「"」もそのまま表示されますので大変便利です。HTMLのサンプルソースがそのまま表示できるのですが、やはり</XMP>だけは表示できません（有効になってしまう）ので一応注意してください。指定された範囲の最初は改行されて、さらに１行分のスペースがとられてから表示されます。

【使用例】

<XMP>
<HTML>
    <HEAD>
        <TITLE>Ryuumu HomePage</TITLE>
    </HEAD>

    <BODY>
    
</body>
</HTML>
</XMP>

<< PAGE TOP >>

<CODE>　～　</CODE>

【説　明】

プログラムのソースコードを表示する場合に使用し、ブラウザのプリファレンスで設定した等幅フォントで表示されます。

【使用例】

<CODE>
function company(name, tel) {<BR>
    this.name = name;<BR>
    this.tel = tel;<BR>
}
</CODE>

function company(name, tel) {

this.name = name;

this.tel = 
tel;

}

<< PAGE TOP >>

<NOBR>　～　</NOBR>

【説　明】

改行しないで表示します。

【使用例】

<NOBR>
改行しないで表示するというのは、
あまり関心しません。
隠しリンクにでも利用するのでしょうか？
</NOBR> 改行しないで表示するというのは関心しません。隠しリン....。

<< PAGE TOP >>

<WBR>

【説　明】

改行しないで表示する<NOBR>タグの中で改行したい場合に使用します。

【使用例】

<NOBR>
改行しないで表示するというのは、
あまり関心しません。<WBR>
隠しリンクにでも利用するのでしょうか？
</NOBR>
改行しないで表示するというのは関心しません。隠しリンクにでも利用するのでしょうか？

<< PAGE TOP >>

<ADDRESS>　～　</ADDRESS>

【説　明】

住所を表示する部分に使用します。ブラウザによって表示のされ方は異なりますが、Netscape Navigator ではイタリックで表示されます。

【使用例】

<ADDRESS>
株式会社ＺＳＰＣ
北海道札幌市中央区南１条西２丁目
札幌ZSPCビル
</ADDRESS>

株式会社ＺＳＰＣ
北海道札幌市中央区南１条西２丁目
札幌ZSPCビル

<< PAGE TOP >>

<MULTICOL>　～　</MULTICOL>

【説　明】

段組を指定します。段の幅を指定することができますが、各段の幅は常に同じになります。

・COLS="段数"
　「段数」には、何段組にするかを整数で指定します。

・GUTTER="段間隔"
　「段間隔」には、段と段の間隔をピクセル単位で指定します。デフォルトは 10 です。

・WIDTH="段幅"
　「段幅」は、段の幅を指定します。指定しない場合は、自動的に調整されます。

【使用例】

やっと、正式な段組がサポートされました。
今まで、これを実現するために、
テーブル機能を利用していましたが、
あれは、あれで利用価値はあると思われます。

</MULTICOL>

やっと、正式な段組がサポートされました。今まで、これを実現するために、テーブル機能を利用していましたが、あれは、あれで利用価値はあると思われます。

<< PAGE TOP >>

<SPACER>

【説　明】

文字間・行間・ブロック型のスペース（空間）を挿入します。このタグは、範囲を指定して「文字間隔」「行間隔」を指定できるものではありません。

・TYPE="タイプ"
　「タイプ」には、horizontal・vertical・block が指定できます。

　horizontalは、文字と文字の間に横方向の空間を作ります。空間のサイズは「SIZE=」で指定します。

　verticalは、行と行の間の縦方向の空間を作ります。これを使用すると自動的にそこで改行されます。空間のサイズは「SIZE=」で指定します。

　blockは、あたかも見えない画像があるかのような空間を作り出します。画像と同様に「WIDTH」「HEIGHT」「ALIGN」を指定することができます。

・SIZE="間隔"
　「間隔」は、「TYPE=」でhorizontal または verticalを指定した場合のみ指定できます。ピクセル単位で指定します。

・WIDTH="幅"
　「幅」は、「TYPE=」でblockを指定した場合のみ指定できます。ピクセル単位でblockの横幅を指定します。

・HEIGHT="高さ"
　「高さ」は、「TYPE=」でblockを指定した場合のみ指定できます。ピクセル単位でblockの高さを指定します。

・ALIGN="位置"
　「位置」は、「TYPE=」でblockを指定した場合のみ指定できます。left ・ right ・ top ・ texttop ・ middle・ absmiddle ・ baseline ・ bottom ・ absbottom が指定できます。<IMG> タグの場合と同様に使用できます。

【使用例】

<SPACER TYPE="horizontal" SIZE=40>
横方向の空間を指定できます。<P>

<SPACER TYPE="horizontal" SIZE=60>
横方向の空間を指定できます。<P>

横方向の空間
<SPACER TYPE="horizontal" SIZE=20>
を指定できます。

横方向の空間を指定できます。

縦方向の空間を指定できます。<BR>
縦方向の空間を指定できます。
<SPACER TYPE="vertical" SIZE=2>
縦方向の空間を指定できます。
<SPACER TYPE="vertical" SIZE=4>
縦方向の空間を指定できます。
<SPACER TYPE="vertical" SIZE=6>
縦方向の空間を指定できます。
<SPACER TYPE="vertical" SIZE=8>
縦方向の空間を指定できます。
<SPACER TYPE="vertical" SIZE=10>
縦方向の空間を指定できます。

縦方向の空間を指定できます。
縦方向の空間を指定できます。縦方向の空間を指定できます。縦方向の空間を指定できます。縦方向の空間を指定できます。縦方向の空間を指定できます。縦方向の空間を指定できます。

ブロック型の空間を作成します。<BR>
ブロック型の空間を作成します。<BR>
ブロック型の空間を作成します。<BR>
ブロック型の空間を作成します。<BR>
ブロック型の空間を作成します。<BR>

ブロック型の空間を作成します。
ブロック型の空間を作成します。
ブロック型の空間を作成します。
ブロック型の空間を作成します。
ブロック型の空間を作成します。

<< PAGE TOP >>

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
ＳＥＯ・月次更新・リニュアルetc

京都市中京区橋弁慶町222番地
ヒライビル3階

ＨＴＭＬ文章解説

ホームページ作成サポート

ホームページ制作のことなら、格安で成功するSEO対策に強い京都のホームページ作成リュウムへ

無料お見積はこちらから

TEL : 075-257-4588
京都市中京区橋弁慶町222番地ヒライビル3階

無料ホームページ作成講座|京都のホームページ制作会社リュウム

文書レイアウトタグ

<P>（ ～ </P>）

【説 明】

【使用例】

<BR>

【説 明】

【使用例】

<HR>

【説 明】

【使用例】

<CENTER> ～ </CENTER>

【説 明】

【使用例】

<DIV> ～ </DIV>

【説 明】

【使用例】

<BLOCKQUOTE> ～ </BLOCKQUOTE>

【説 明】

【使用例】

<CITE> ～ </CITE>

【説 明】

【使用例】

●<PRE> ～ </PRE>

【説 明】

【使用例】

<XMP> ～ </XMP>

【説 明】

【使用例】

<CODE> ～ </CODE>

【説 明】

【使用例】

<NOBR> ～ </NOBR>

【説 明】

【使用例】

<WBR>

【説 明】

【使用例】

<ADDRESS> ～ </ADDRESS>

【説 明】

【使用例】

<MULTICOL> ～ </MULTICOL>

【説 明】

【使用例】

<SPACER>

【説 明】

【使用例】

<P>（　～　</P>）

【説　明】

【説　明】

【説　明】

<CENTER>　～　</CENTER>

【説　明】

<DIV>　～　</DIV>

【説　明】

<BLOCKQUOTE>　～　</BLOCKQUOTE>

【説　明】

<CITE>　～　</CITE>

【説　明】

●<PRE>　～　</PRE>

【説　明】

<XMP>　～　</XMP>

【説　明】

<CODE>　～　</CODE>

【説　明】

<NOBR>　～　</NOBR>

【説　明】

【説　明】

<ADDRESS>　～　</ADDRESS>

【説　明】

<MULTICOL>　～　</MULTICOL>

【説　明】

【説　明】