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オプションを使えるタグは色々あります。
<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行空きにはなりません。文字はもちろん、画像やテーブルにも使えます。
<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>