テキストのレイアウト

テキストの改行

• テキストは、ブラウザの端までいくと自動的に改行して表示されるようになっている。
• これは便利な機能のようでいて、実際は、ブラウザの幅を変えるとそのつど自動的に改行される箇所が変わるということであり、画面のレイアウトという点からは不都合な面も多い。
• そのためレイアウトの乱れを防ぐためには、改行を示すタグを効果的に用いるなどの工夫をするとよい。

<BR>

• 行間を空けずに改行する。
• エンプティタグ(終了タグが必要ないタグ)である。

【例】

これからこの文章を改行します。<BR>改行するとこうなります。

これからこの文章を改行します。 改行するとこうなります。

<P> 〜 </P>

• パラグラフ(段落)であることを示すタグ。
• 改行し、改行後に続くテキストとの間に行間をあける。
• テキストの揃い(ALIGN="X")を指定しないときは、エンプティタグ(終了タグが必要ないタグ)として用いてもよい。
• 行間をあける目的で、<P>タグを連続して用いても、通常、1つ分しか効かない。

【例1】

<P>これからこの文章を改行します。</P><P>改行するとこうなります。</P>

これからこの文章を改行します。 改行するとこうなります。

【例2】

こんなふうに「<P>」タグを重ねても、<P><P><P><P>表示のされ方は【例1】と同じです。

こんなふうに「<P>」タグを重ねても、 表示のされ方は【例1】と同じです。

<PRE>〜</PRE>

• HTML文書内で書かれたとおりの改行で表示する。
• 文字幅や空白は、等幅フォントで表わされる。

【例】

<PRE> 　ここに書いてあるのと同じ 　　改行のしかたで表示されます。 </PRE>

ここに書いてあるのと同じ 　　改行のしかたで表示されます。

テキストの揃いを決める

ALIGN="X"

• 段落ごとにテキストの揃いを指定する。
• <P>タグのアトリビュート。
• ただしこれらのアトリビュートを用いたときは、<P>タグは開始タグと終了タグではさむやり方で使用する。
• Xには、Left、Center、Rightが入る。

【例1】段落を左揃えにする場合

• ただし普通は、何も設定しなくても、左揃えになる。

<P ALIGN="Left">この段落が左揃えになります。</P>

この段落が左揃えになります。

【例2】段落を中央揃えにする場合

<P ALIGN="Center">この段落が中央揃えになります。</P>

この段落が中央揃えになります。

【例3】段落を右揃えにする場合

<P ALIGN="Right">この段落が右揃えになります。</P>

この段落が右揃えになります。

行の左右の端を下げる(ブロック引用)

<BLOCKQUOTE> 〜 </BLOCKQUOTE>

• 段落の左右の端が、数文字分下がります。
• このタグを指定した段落の前後に、1行分の間隔が空きます。

【例】

ブロック引用の前の段落です。 <BLOCKQUOTE>この段落の左右の端が、数文字分下がります。もし右端が下がるのが気になるようであれば、表を用いたり、透明画像をインデント代わりに用いるなどして、左端だけを下げる工夫が必要です。</BLOCKQUOTE> ブロック引用の後の段落です。

ブロック引用の前の段落です。 この段落の左右の端が、数文字分下がります。もし右端が下がるのが気になるようであれば、表を用いたり、透明画像をインデント代わりに用いるなどして、左端だけを下げる工夫が必要です。 ブロック引用の後の段落です。

Home >> Manual >> HTMLの使い方 >> テキストのレイアウト