HTML編 14/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
レイアウト
見出しと段落の位置を変える
その他の位置を変える




見出しと段落の位置を変える

●<Hn ALIGN="n"><P ALIGN="n">
とりあえず<CENTER>で全体を囲んでしまいましたが、<Hn>や<P>にALIGNオプションをつけることで、真ん中表示はもちろん、右に、左に、表示位置を変えられます。パラメータには左ならleft、真ん中はcenter、右ならrightを入れます。デフォルトは左なので「left」を入れることはあまりないかもしれません。先ほどの<CENTER>を一度外して、まずは見出しの「ようこそ!」だけ真ん中に表示してみます。

<H2 ALIGN="center">ようこそ!</H2>

<P>にも同様に<P ALIGN="center">〜</P>と指定できます。
<Hn><P>以外にもALIGNオプションを使えるタグは色々あります。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
<FONT SIZE="2" COLOR="#3300ff">◆</FONT>
<FONT SIZE="2" COLOR="#6600ff">◆</FONT>
<FONT SIZE="2" COLOR="#9900ff">◆</FONT>
<FONT SIZE="2" COLOR="#cc00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00cc">◆</FONT>
<FONT SIZE="2" COLOR="#ff0099">◆</FONT>
<FONT SIZE="2" COLOR="#ff0066">◆</FONT>
<FONT SIZE="2" COLOR="#ff0033">◆</FONT>
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<P ALIGN="left">左合わせの段落</P>
<P ALIGN="center">真ん中合わせの段落</P>
<P ALIGN="right">右合わせの段落</P>
</BODY>
</HTML>




その他の位置を変える

●<DIV ALIGN="n">
ALIGNオプションが使えないタグはどうすればいいでしょう。<CENTER>は基本的に万能ですが、真ん中表示だけですので、右や左には表示できません。そういう場合は<DIV ALIGN="n">を使います。</DIV>で閉じられるまでの内容が、パラメータで指定された位置に揃います。パラメータは同じく「left」「center」「right」が使えます。<P ALIGN>と違い段落ではないので、前後の行は1行空きにはなりません。文字はもちろん、画像やテーブルにも使えます。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
<FONT SIZE="2" COLOR="#3300ff">◆</FONT>
<FONT SIZE="2" COLOR="#6600ff">◆</FONT>
<FONT SIZE="2" COLOR="#9900ff">◆</FONT>
<FONT SIZE="2" COLOR="#cc00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00cc">◆</FONT>
<FONT SIZE="2" COLOR="#ff0099">◆</FONT>
<FONT SIZE="2" COLOR="#ff0066">◆</FONT>
<FONT SIZE="2" COLOR="#ff0033">◆</FONT>
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
</DIV>

<DIV ALIGN="left">左合わせの文字</DIV>
<DIV ALIGN="right">右合わせの文字</DIV>
</BODY>
</HTML>

backindexnext