CSS

文書レイアウトタグ

<P>( 〜 </P>)

【説 明】

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

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

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

【使用例】

段落1
<P>
段落2

段落1

段落2


-----------------------------------------------------------------------
段落1
<P ALIGN="center">
段落2
</P>
段落3

段落1

段落2

段落3


-----------------------------------------------------------------------
段落1
<P ALIGN="right">
段落2
</P>
段落3

段落1

段落2

段落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
 引っ込んだ感じにせずに、黒く塗りつぶします。

【使用例】

<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">

<< PAGE TOP >>

<CENTER> 〜 </CENTER>

【説 明】

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

【使用例】

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

中央に表示します。


<< PAGE TOP >>

<DIV> 〜 </DIV>

【説 明】

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

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

【使用例】

<DIV ALIGN="left">左寄せ</DIV>
左寄せ


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


<DIV ALIGN="right">右寄せ</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>タグなどとは異なり、この範囲で使用されたタグは有効になります(タグが使用できます)。指定された範囲の最初は改行されて、さらに1行分のスペースがとられてから表示されます。

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

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

【使用例】

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

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

<PRE COLS=20>
ここに長い文字を書きましょう。
全角10文字で折り返すハズです。
123456789012345678901234567890
12345678901234567890 どうでしょうか? </PRE>
ここに長い文字を書きましょう。
全角10文字で折り返すハズです。
123456789012345678901234567890
12345678901234567890 どうでしょうか?

<PRE WRAP>
ここに長い文字を書きましょう。
ちょうど右端で折り返すハズです。
123456789012345678901234567890
12345678901234567890 どうでしょうか? </PRE>
ここに長い文字を書きましょう。
ちょうど右端で折り返すハズです。
123456789012345678901234567890
12345678901234567890 どうでしょうか?

<< PAGE TOP >>

<XMP> 〜 </XMP>

【説 明】

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

【使用例】

<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
北海道札幌市中央区南1条西2丁目
札幌ZSPCビル
</ADDRESS>
株式会社ZSPC
北海道札幌市中央区南1条西2丁目
札幌ZSPCビル

<< PAGE TOP >>

<MULTICOL> 〜 </MULTICOL>

【説 明】

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

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

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

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

【使用例】

<MULTICOL COLS=3 GUTTER=20>

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

</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>
縦方向の空間を指定できます。

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



<SPACER TYPE="block" ALIGN="left" WIDTH=40 HEIGHT=30>

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

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


<< PAGE TOP >>

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

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

ホームページ制作の事なら

何でもお問合せください。

お問合せフォームはこちらから

ホームページ作成は京都のリュウム株式会社

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

TEL 075-257-4588
営業時間 AM10:00-PM7:00


CSS
Ryuumu