NICS-NET HTML講座　第９話

第９話 『センタリングと罫線』の巻

センタリングをする

この章では文字や絵等を画面の中央に表示させるタグについてお話します。ワープロの機能でいう『センタリング』『中央寄せ』というものです。

センタリングのタグ
<center>テキスト／写真等</center>

◇　注意　◇: HTMLで文章を入力すると<br>で改行等をしない限り画面一杯に表示され、その行で表示出来なくなった部分が次の行へ自動的に改行されるようになります。ですから長い文章などに、この<center>タグを利用しても、効果が無い場合もあります。

では、Ａ子のホームページを全体的に中央に寄せてみますね。

htmlの画面

とっても簡単な作業なので、ホームページに表示して見るのは少し待って、次の罫線の勉強に入りましょう。

罫線を引いてみる

罫線といってもワープロの罫線とは少し違います。
HTMLでは、

というような点でしょうか。ではタグを勉強して、実際にどんな線が引けるかをみて見ましょう。

罫線の基本タグ
<hr>

<hr>は単独で使用するタグで、終了タグは必要ありません。上記の基本タグ<hr>を使用すると画面の横幅いっぱいに2ピクセルサイズ(太さ）の横罫線が引けます。

罫線の応用 part１

１．太さを変える。　　<hr size=数字>: 基本が２ピクセルですから、それよりも太くしたい場合は、 <hr size=3>、<hr size=5>とhrのあとに半角スペース、 size=数字を入力します。size=数字は文字サイズを変更するときにも利用しましたよね。
２．幅を変える。　　　<hr width=数字%>: 基本は画面一杯に線が引けるのですが、width=数字%を設定することで画面に対して数字%の線が引けるようになります。ちなみにこのホームページで利用している線は<hr width=90%>です。
３．幅を変える。その２<hr width=数字>: 画面に対して何%という引き方ではなく、直接数字（単位：ピクセル）を入れて長さを指定できます。
４．黒い線を引く。　　<hr noshade>
　: 基本の罫線は、透明でくぼんで見える（エンボス調）線ですが、hrの後に半角のスペース noshadeと入力することで、黒い線になります。

罫線の応用 part２

罫線は場所を指定しないと、画面の中央に配置されます。勝手にセンタリングされるわけですね。ですから、長さが100%でない場合に、『画面の右に寄せたい』『左に寄せたい』という場合は配置場所を設定する必要があります。


　１．右寄せ　　<hr width=数字% align=right>
　２．左寄せ　　<hr width=数字% align=left>: 罫線の長さをwidth=数字%またはwidth=数字で指定した後、半角のスペースをあけて align=のあとに"right"か"left"を指定すれば出来上がりです。