5．基本的なレイアウトを行なうためのタグ(その2）

【見出しをつける】
　　見だしにすると文字を太くすると共に、大きさや表示位置に変化をつけることがで来ます。 これには<H>タグを使用します。

<H★ align="☆">〜</H>

★ は、ヘッダサイズを指定します。１から７まで指定することが出来ます。 数値が小さいほど大きな見出しとなります。この点はフォントタグのsize指定と逆になっていますので注意 して下さい。
align="☆"の☆は、left, center, rightの内いづれかを指定 し位置を決めます。

<H1 align="center">

私の趣味の手帳

<H2 align="center">

私の趣味の手帳

<H3 align="center">

私の趣味の手帳

<H4 align="center">

私の趣味の手帳

<H5 align="center">
私の趣味の手帳
<H6 align="center">
私の趣味の手帳


【レイアウトを整える】
　　レイアウトを整える、即ちページの上下や左右に余白を設けるにはどうすればよいでしょうか
すでに説明した<BODY>タグの属性にleftmargin, topmarginがあります。 これを利用して、次ぎのように記述すると

<BODY bgclor="#ffffff"　text="#000000" leftmargin="60" topmargin="50">

left(左面)に60ピクセルとtop(上部)に50ピクセルのマージン(余白)が出来ます。
 (注) １ピクセルは、０．３５ミリです。したがって６０ピクセルは 約２センチです。
　残念なことに<BODY>タグの属性 leftmargin, topmargin は、Netasape Navigatorでは対応して おりません。

　しかし、レイアウトを制御するタグは他にもあります。<BLOCKQUOTE>は 引用文を示すタグですが左右に余白を作る役目をします。また、<OL>,<UL> は、箇条書きを行なうとき使用するタグですが、左側を余白にする機能があります。
また、文字列や図を中央に持ってくるタグに<center>タグがあります


<center>２１世紀の生きがい広場を目指して！</center>

<BLOCKQUOTE> この度、私たちの創設した『メロウ倶楽部』は、高齢者の生きがいづくりを めざした高齢者の手による高齢者の為のグループです。</BLOCKQUOTE>

<OL> この会はメロウ・フォーラム誕生の基礎となったメロウ・ソサエティ構想、 即ち「高齢者の積極的社会参加を情報化の支援によって促進することにより、 ゆとりある豊かな活力に溢れた２１世紀の長寿社会を構築していこう」という 考えを、具体的に進めようとするものです。</OL>

　　上のようにソースプログラムを記述すると、タイトルは中央に揃い、 第一段落は左右に余白が出来、第二段落は左側だけに余白が出来ます。


２１世紀の生きがい広場を目指して！


この度、私たちの創設した『メロウ倶楽部』は、高齢者の生きがいづくりを めざした高齢者の手による高齢者の為のグループです。

    この会はメロウ・フォーラム誕生の基礎となったメロウ・ソサエティ構想、 即ち「高齢者の積極的社会参加を情報化の支援によって促進することにより、 ゆとりある豊かな活力に溢れた２１世紀の長寿社会を構築していこう」という 考えを、具体的に進めようとするものです。

【箇条書きにする】
　文章や目次などで箇条書きを用いる場合のタグを説明します。箇条書きには大きく分けて、タイトルと 項目だけのもの(定義型リスト)、番号や英字を入れるもの(番号順リスト)などがあります。

(1)定義型リスト
　　<DL>(Definition List)〜</DL>までが箇条書きになります。 <DT>(Definition list Term name)と <DD>(Definition list Term Definition)を繰り返していくわけですが、<DT>が項目や定義する言葉で、 <DD>は項目の説明や言葉の定義が入ります。

<DL> <DT>プロバイダー <DD>インターネットに接続するための窓口となる会社。一般ユーザは、このサービスプロバイザーを とおしてインターネットにアクセスすることになる。 <DT>ネットサーフィン <DD>ホームページを次ぎから次ぎへ渡り歩くことをこう云う。例えば、Aというホームページに入り、 そのリンクからBのホームページに入り、次ぎにそのページからCというホームページに移ると云う ように、ホームページを次々に移動することを波乗りにたとえてサーフィンと呼んでいる。
</DL>

　　上のようにソースプログラムを記述すると、ブラウザには 次ぎのように定義型のリストが出来ます。

(注)　<DT> と <DD> の行の終わりに、改行を入れなくても自動的に一行改行されます


プロバイダー
インターネットに接続するための窓口となる会社。一般ユーザは、このサービスプロバイザーを とおしてインターネットにアクセスすることになる。
ネットサーフィン
ホームページを次ぎから次ぎへ渡り歩くことをこう云う。例えば、Aというホームページに入り、 そのリンクからBのホームページに入り、次ぎにそのページからCというホームページに移ると云う ように、ホームページを次々に移動することを波乗りにたとえてサーフィンと呼んでいる。
(2)番号順リスト
　　先頭に数字などの順番を表す記号が入る箇条書きです。<OL>(Ordered List)〜</DL>までが 箇条書きになります。<LI>(List Item)で始まる行がリスト項目です。 リスト項目の先頭には自動的に数字が入り、順次その値が繰り上がっていきます。
<OL>や <LI>に、 type="value"の属性を付加することによって、先頭に入る数字や英字を 選択することが出来ます(指定しないときは数字が入ります)。 

  　　　            type="1"          1,2,3,4,5 - - - - 
      　　　        type="A"          A,B,C,D,E - - - - 
            　　　  type="a"          a,b,c,d,e - - - -
   　　　           type="T"　　　  T,U,V,W,X - - -　 
         　　　     type="@"　　　　@,A,B,C,D - - -

<OL type="A"> <LI>健康つくり <LI>学校の体育 <LI>競技会 <LI>競技種目 　　　　　 </OL>　
　　上のようにソースプログラムを記述すると、ブラウザには 次ぎのように番号順のリストが出来ます。


  1. 健康つくり
  2. 学校の体育
  3. 競技会
  4. 競技種目 　　　　　

【区切り線を入れる】
　　区切り線(横罫線)を入れるタグ<HR>はいくつかの属性を指定することで 区切り線を色々と変化させることが出来ます。
また、これは単なる区切り線として用いるのではなく、ページの装飾用としても使うことがで来ます。
　

          <HR size="★"　width="☆"　align="※" color="#RRGGBB">　
　
　大きさを変化させるオプション(属性)がsizeとwidthです。
　　・sizeは線の太さを変えられます、属性値★はピクセル数で指定します。
　　・widthは線の長さの指定です、☆の値はピクセル数またはブラウザのウイン
    ドウ画面の横幅に対する%で指定します。
　alignの指定は、<P>や <HI>と同様にleft,center,rightのいづれかを指定し
  ます。 但し、これが有効になるのはwidth値をピクセル数で指定した場合です。
　colorの指定は、<BODY>タグのbgcolorの指定の場合等と同様です。　
<HR width="95%" color="#ffffff">
<HR size="5" width="75%" color="#ff0000">
<HR size="10" width="50%" color="#00ff00">
<HR size="20" width="30%" color="#0000ff">

　　 上のようにソースプログラムを記述すると、ブラウザには次ぎのような線が４本引かれます。
　(注) Netasape Navigatorでは色が付きません

　なお、立体的でない線を引く時は　<HR noshade >　とします。
また、この<HR>タグの属性を利用して、アクセサリー用の正方形等を描くことも出来ます。
 <HR size="20" width="20">と、sizeとwidthの値を同じにすれば正方形が描けます。
<HR size="20" width="40" noshade>とすれば黒い長方形が描けます。

(注) Netasape Navigatorでは両端が丸くなります