ホームページ作成応用
ここでは知っておくと便利なHTMLタグのテクニックをいくつか紹介します。
 |
HTMLにおけるスペースの扱い | |
|
特殊文字の表示 | |
|
テーブルの中に空白のセルを作る | |
|
テーブルを使ったレイアウト | |
|
テーブルの枠線をきれいにみせる |
| HTMLにおけるスペースの扱い |
|
HTMLではスペースの扱いに注意が必要です。全角のスペースは記述した分だけ画面上に空白を作ることができます。半角スペースは1つ分は空白が空きますが、2つ以上連続していても1つ分の空白しかあきません。したがって画面上に空白を作るために半角スペースをいくら記述しても意味がありません。 また、HTMLソース内で行った改行は無視されますが、空行（文字のない行）は半角スペースと同じ扱いになります。 しかし全角スペースは英語環境では文字化けを起こしてしまうという問題点があります。自由に空白を作るためには特殊コードとして用意されている非改行スペース「 」を使う必要があります。非改行スペースで表示される空白の大きさは半角スペースと同じです。 |
| SOURCE | |
HTMLタグで作る ホームページ ←半角スペースをひとつ入れています。<BR><BR> HTMLタグで作る ホームページ ←半角スペースを５つ入れています。<BR><BR> HTMLタグで作る ホームページ ←&nbsp;を３つ入れています。 <BR><BR> HTMLタグで作る ホームページ ←全角スペースを３つ入れています。<BR><BR> HTMLタグで作る ホームページ ←改行を１回入れています。<BR><BR> HTMLタグで作る ホームページ ←空行を１行分入れています。<BR><BR> |
|
| DISPLAY | |
|
HTMLタグで作る ホームページ ←半角スペースをひとつ入れています。 HTMLタグで作る ホームページ ←半角スペースを５つ入れています。 HTMLタグで作る ホームページ ← を３つ入れています。 HTMLタグで作る ホームページ ←全角スペースを３つ入れています。 HTMLタグで作る ホームページ ←改行を１回入れています。 HTMLタグで作る ホームページ ←空行を１行分入れています。 |
|
| このコードは空白を作るだけでなく、これまで半角のスペースで自動改行されていた箇所に使用することで自動改行されることを防ぐことができます。また、挿入した数の分だけ空白として表示されるため、左インデントを自由に指定することもできます。 |
| 特殊文字の表示 |
| 「<」や「>」や「"」や「&」などタグの表記に用いる文字をブラウザ上に表示させたい場合、そのままHTMLソースに記述してもブラウザはタグの一部と認識するため表示できません。これらの文字を表示するための特殊コードが用意されています。「<」は「<」、「>」は「>」、「"」は「"」、「&」は「&」と表します。もちろんこの１文もソースでは特殊コードを使って書いています。 |
| SOURCE | |
特殊文字の表示<BR><BR> <<BR> ><BR> "<BR> &<BR> |
|
| DISPLAY | |
|
特殊文字の表示 < > " & |
|
| テーブルの中に空白のセルを作る |
<TD></TD>のように中身のないセルは通常塗りつぶされてしまいますが、次の３つの方法で空白のセルを作ることができます。
|
| SOURCE | |
<TABLE BORDER="1" HEIGHT="50"> <TR> <TD WIDTH="50"></TD> <TD WIDTH="50"><BR></TD> <TD WIDTH="50"> </TD> <TD WIDTH="50"> </TD> </TR> </TABLE> |
|
| DISPLAY | |||||
|
|
|||||
| テーブルを使ったレイアウト |
|
テーブルは表を純粋に表示させるためのツールとしてよりも近年では、ページのレイアウト目的で使用されることのほうが多いと思われます。<TABLE>タグを使えばテキストと画像との配置を正確に決めることができたり、余白を自由に設定できます。<TABLE>タグはもともとこのようなレイアウトの目的で用意されたものではないのですが、現在ではウェブデザインにおいて必須のテクニックとされています。 レイアウト目的に限らずテーブルは使用するとソースが複雑になるという欠点があります。複雑なテーブルに関してはタグではなくホームページ作成ソフトを利用する方法もよいでしょう。 テーブルを使ったレイアウトを行うには、まず最初にページの基本骨格を考え、それにあうようにテーブルを組み立てていきます。そしてその中に画像やテキストを組み込んでいくことになります。例としていくつか挙げます。 もちろんこれらの例ではBORDER属性に1を指定して枠線を表示させていますが、実際に使用する際には0を指定します。また、レイアウト例３のようにテーブルの中にテーブルを組み込むことも可能です。 |
| テーブルの枠線をきれいにみせる |
| テーブルを作った場合、どうもうまく枠線が表示されないなと思ったら、罫線の属性である「CELLSPACING」と「CELLPADDING」が指定されているかを確認してください。これらは指定しない場合は「２」と「１」に設定されていますので、適宜変更して枠線の調整をしてください。 |
| SOURCE | |
<TABLE BORDER="1"> <TR><TD>セル１</TD><TD>セル２</TD></TR> <TR><TD>セル３</TD><TD>セル４</TD></TR> </TABLE> <BR> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="4"> <TR><TD>セル１</TD><TD>セル２</TD></TR> <TR><TD>セル３</TD><TD>セル４</TD></TR> </TABLE> |
|
| DISPLAY | |||||||||
|
|||||||||
|
しかし枠線の表示を「CELLSPACING」や「CELLPADDING」で指定しても、もともと枠線は立体的に表示されるようになっているため、あまり見映えがよいとはいえません。これをもっと単色の罫線のように表示する方法があります。これはテーブルをもうひとつのテーブルで囲むことによって可能です。 まず外側のテーブルの背景色に罫線の色として使用したい色を指定します。そして内側のテーブルにはCELLSPACING属性に１ピクセル以上の数値を指定します。CELLSPACING属性は枠線の外枠線と内枠線の間隔を指定する属性でした。この外枠線と内枠線の隙間に外側のテーブルの背景色が見えるようにすることで、それを罫線のように使用することが可能となるのです。 しかし、内側のテーブルで<TABLE BGCOLOR="〜〜">のようにテーブル全体で色を指定しまうと、外枠線と内枠線の隙間にも色がついてしまうので、<TR>もしくは<TD>タグにBGCOLORで色を指定する必要があります。 罫線の幅は内側のテーブルのCELLSPACING属性の値を調整することで変えることができます。 |
| SOURCE | |
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="4"> <TR><TD>セル１</TD><TD>セル２</TD></TR> <TR><TD>セル３</TD><TD>セル４</TD></TR> </TABLE> <BR> <!--外側のテーブル--> <TABLE BORDER="0" BGCOLOR="black" CELLSPACING="0" CELLPADDING="0"> <TR><TD> <!--内側のテーブル--> <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="4"> <TR BGCOLOR="white"><TD>セル１</TD><TD>セル２</TD></TR> <TR BGCOLOR="white"><TD>セル３</TD><TD>セル４</TD></TR> </TABLE> <!--内側のテーブル終--> </TD></TR> </TABLE> <!--外側のテーブル終--> |
|
| DISPLAY | ||||||||||
|
||||||||||
| ページ先頭へ ホームページ作成Tipsへ トップページへ |