top
ホームページ ホームページを作ろう
タグについて
 
基本構造
文字を装飾
レイアウト
背景
リンクを貼る
HTMLタグ紹介>レイアウト・表組み
 
 


レイアウト・表組み

ライン

レイアウト


表示位置の設定

<DIV ALIGN="***">~</DIV>
このタグの間にある文字や画像を右寄せ、中央寄せ、左寄せにします。左寄せならば ALIGN="LEFT"、センタリングなら ALIGN="CENTER"、右寄せならば ALIGN="RIGHT" とします。


HTMLタグ紹介へ戻る

 

 


罫線 (区切り線)

文章の意味を区切ったりして、読みやすくするために罫線を引くことができます。以下、罫線の指定のし方を解説いたします。

<HR>

罫線 (区切り線) を挿入します。

<HR SIZE="n">

罫線(区切り線)の太さを変えます。"n" の部分に適当な整数を入れます。数値が大きいほど太い線になります。何も指定しなければ、3 程度に設定されます。

<HR WIDTH="n">

罫線 (区切り線) の長さを変えます。"n" の部分に適当な整数を入れます。数値が大きいほど長くなります。また、ブラウザーの表示画面との相対関係で、**% と言う風に設定することも可能です。何も指定しなければ、WIDTH="100%" と設定されます。

<HR ALIGN="***">

罫線 (区切り線) を右寄せ、中央寄せ、左寄せにします。左寄せならば ALIGN="LEFT"、センタリングなら ALIGN="CENTER"、右寄せならば ALIGN="RIGHT" とします。 何も設定しなければ、中央寄せに設定されます。

<HR NOSHADE>

罫線(区切り線)を“影なし”にします。

 


HTMLタグ紹介へ戻る


line

表組

基本(1)

表を作るだけでなく、レイアウトを自由自在に行おうとする際に便利なのが表組みです。概念的なものがやや難しいかもしれませんが、レイアウトに凝りたい時など、かなり使い勝手のあるタグなので、是非、覚えて下さい。

<TABLE>~</TABLE>

このタグで囲まれた部分が表であることを定義します。<TABLE>~</TABLE> のなかに、<TR>、<TD> タグなどの要素を入れることで表を形作ります。

BORDER="n" で表組みの枠の線の太さを指定することができます。
CELLPADDING="n" でセルと中に入れる文字列や画像との距離を設定することができます。
CELLSPACING="n" でセルとセルの距離を設定することができます。 ("n" はそれぞれ、適当な整数です。)

<TR>~</TR>

表の段落を定義します。

<TD>~</TD>

表のセル (枡) を定義します。<TR>~</TR> タグの中に格納します。

WIDTH="n" でセル (枡) の幅を指定することが可能です。("n" は適当な整数です。)


<TABLE BORDER="n">

表の枠組みの線の太さの設定をします。"n" の部分に数字を代入します。何も指定しないと、BORDER="1" に設定されます。


<TABLE CELLSPACING="n" CELLPADDING="n">

表の枠組みのセル (枡) と中に入る文字との距離、セル同志の距離の設定をします"n" の部分に数字を代入します。何も指定しないと、CELSPACING="0"、CELPADDING="0" に設定されます。

 

<TD WIDTH="n" HEIGHT="n" >

セル(枡)の幅と高さを設定します。"n" の部分には適当な数字を代入します。WIDTH="n" でセル (枡) の幅を指定し、HEIGHT="n" でセルの高さを指定します。縦・横に並んでいるセル(列・行方向のセル)は一番幅・高さの大きなセルに揃います。

 
(例1)

<TABLE>
<TR>
<TD WITDH="80">1段目左</TD>
<TD WITDH="100">1段目中央</TD>
<TD WITDH="200">1段目右</TD>
</TR>
</TABLE>

1段目左 1段目中央 1段目右

(例2)

<TABLE>
<TR><TD WIDTH="100">1段目</TD></TR>
<TR><TD WIDTH="200">2段目</TD></TR>
<TR><TD WIDTH="300">3段目</TD></TR>
</TABLE>

1段目
2段目
3段目


<TD ALIGN="***" VALIGN="***" >

セル (枡) 内でのテキストや画像の位置を設定します。ALIGN="***" は水平方向、VALIGN="***" は垂直方向の位置を設定します。
ALIGN の "***" の部分には、"LEFT (左寄せ)"、"CENTER (中央寄せ)"、"RIGHT (右寄せ)"が入ります。VALIGN の "***" の部分には、"TOP (上寄せ)"、"MIDDLE (中央寄せ)"、"BOTTOM (下寄せ)" が入ります。
何も指定しなければ、ALIGN="LEFT"、VALIGN="MIDDLE" と指定されます。

<TABLE CELLSPACING="n" CELLPADDING="n">

表の枠組みのセル (枡) と中に入る文字との距離、セル同志の距離の設定をします。"n" の部分に数字を代入します。何も指定しないと、CELSPACING="0"、CELPADDING="0" に設定されます。

<TD BGCOLOR="#RRGGBB">

セル (枡) の背景に色を付けます。COLOR="#RRGGBB" の部分は前述の色の指定を参考にして下さい。
<TD BGCOLOR="#RRGGBB">

セル (枡) の背景に色を付けます。COLOR="#RRGGBB" の部分は前述の色の指定を参考にして下さい。


Last update:2015/7/10



HTMLタグ紹介へ戻る

 

Copyright (C) 2001-2008 hatena. All Rights Reserved.