テーブルを使ったホームページのレイアウト
文章と写真が混じったホームページをすっきり配置させる方法です。
テーブルを使ったホームページのレイアウト法を説明しています
これで写真・イラスト・文章を思い通りの位置に配置することができるようになります。
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る
文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください
テーブルを使う
▲ テーブルを使い、写真・イラスト・文章を思い通りの位置に配置する
テーブルというものを使います。下に表示していますが、要は枠です。表といったほうがいいかもしれません。
枠自体は見えるようにも、見えないようにもできますし、サイズも自由に変えられます。中身に合わせ
自動的に伸び縮みもします。
この一つ一つの枠(セルと呼びます)の中に文章を書いたり、
写真を入れたりします。セルごとに背景の色を決めたり、セルの位置で画像とか文章の位置をコントロールします。
テーブルを使った例 ▲
まず見せ方の例だけです
文章のブロックを横に二つ並べます
Notepadの
入力内容 |
<HTML>
週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>
|
| IEの表示 |
週間ファミコン通信90年2月2日号です。ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。 |
下のようなテーブルで、縦の枠線を消して使っています。
Notepadの
入力内容 |
<HTML>
週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>
|
| IEの表示 |
週間ファミコン通信90年2月2日号です。ドラクエ4の特集が載っています。汚れ、破れ、
書き込み等なく非常にきれいです。 |
写真の横に文章を添えます
画像が何もない人は、Windows 98の場合は、こんな画像が標準で添付されています。
.jpg のファイルになっていますのでそのまま使うことができます。
|
 |
|
My Documensの中の「私の写真」というファイルに、cat1.jpgという名前で入っています。 |
|
 |
|
同じくMy Documensの中の「私の写真」というファイルに、cat2.jpgという名前で入っています。 |
| |
|
|
|
|
|
|
 |
|
同じところに dog1.jpg という名前で入っています。 |
|
 |
|
同じく dog2.jpg という名前で入っています。 |
これは、こんなテーブルを使い、画像と文章を交互に入れていったものです。各々の間には空白の行と列を
はさんでいます。枠は外枠だけを表示し、他は見えないようにしてあります。
タイトル風にします
枠が一つだけのテーブルを作り、画像を背景に使います。文字は白く、枠は見えないようにしてあります。
テーブルを作ってみる ▲ まず基本的なテーブルを作って見ます
いろいろと実例を見てきましたが、実際にテーブルを作って見ます。
テーブルの基本
<TABLE><TR><TD>〜</TD></TR><TABLE> というタグを使います。
<TABLE>は、これでテーブルを作ると宣言しています。
<TR>は行を表しています
<TD>はセルを表しています。・・・ということになっていますが、実例を見るのが一番です。
一つだけのセルを作る
 |
<TABLE border="1">
<TR><TD>ここに書いた言葉がセルに入る
</TD></TR>
<TABLE>
|
 |
(注)border="1"の指示を書かないと 枠線は表示されません
|
横に伸びるセル
横に広がるセルを作る
<TD>〜</TD>を一つのブロックとし欲しい数だけ書いていきます
一つだけのセルはこう書きました
|
|
<TABLE border="1">
<TR><TD>ここに書いた言葉がセルに入る
</TD></TR>
<TABLE>
|
二つ横に並ぶセルはこのように書きます
|
|
<TABLE><TR>
<TD>テーブルの実例1 </TD>
<TD>テーブルの実例2 </TD>
</TR><TABLE>
|
三つ横に並べてみます
|
|
<TABLE><TR>
<TD>テーブルの実例1 </TD>
<TD>テーブルの実例2 </TD>
<TD>テーブルの実例3 </TD>
</TR><TABLE>
|
|
|
| テーブルの実例1 |
テーブルの実例2 |
テーブルの実例3 |
|
縦に伸びるセル
縦に伸びるセルを作る
<TR><TD>〜</TD></TR>が行を表すブロック
ですから、これを欲しい数だけ書いていきます。
縦に二つ並ぶセルはこのように書きます
|
|
<TABLE>
<TR><TD>テーブルの実例1 </TD></TR>
<TR><TD>テーブルの実例2 </TD></TR>
<TABLE>
|
次は縦に三つ並べてみます。
|
|
<TABLE>
<TR><TD>テーブルの実例1 </TD></TR>
<TR><TD>テーブルの実例2 </TD></TR>
<TR><TD>テーブルの実例3 </TD></TR>
<TABLE>
|
|
|
| テーブルの実例1 |
| テーブルの実例2 |
| テーブルの実例3 |
|
縦と横に広がるセル
縦と横に広がるセルを作る
今までの組み合わせです。横に二つ縦に三つ広げたいときは横二つを作るタグを三つ重ね、
最初と最後に<TABLE></TABLE>を追加します。横に二つ並べた行が３行できると考えます。
横に二つ、縦に三つ並べてみます。
|
|
<TABLE>
<TR><TD>テーブルの実例1</TD><TD>テーブルの実例2</TD></TR>
<TR><TD>テーブルの実例3</TD><TD>テーブルの実例4</TD></TR>
<TR><TD>テーブルの実例5</TD><TD>テーブルの実例6</TD></TR>
</TABLE>
|
|
|
| テーブルの実例1 |
テーブルの実例2 |
| テーブルの実例3 |
テーブルの実例4 |
| テーブルの実例5 |
テーブルの実例6 |
|
枠線の表示、非表示を切り替える ▲ テーブルのイメージを変える
テーブルの基本はこれでできました。
しかしここ迄の内容を自分でやった人は「違っている」と思われたことでしょう。
実はテーブルは標準状態では枠線を表示しないようになっています。表示させるには「border="数字"」を
<TABLE>の中に追加します。<TABLE>は<TABLE border="1">となります。
TABLEとborderの間には半角スペースが入ります。これで枠がすべて表示されます。
この数字はいくらでも変えられます。border="0"と書けば枠線はなくなります。
|
|
<TABLE border="1"><TR>
<TD>テーブルの実例</TD>
</TR><TABLE>
|
|
|
<TABLE border="8"><TR>
<TD>テーブルの実例</TD>
</TR><TABLE>
|
テーブルの大きさを決める ▲ テーブルの大きさ、セルの大きさを決める
全体の幅を決める
テーブルの大きさは、中に入る文章とか画像の大きさに合わせ、勝手に伸び縮みします。
レイアウトに使おうとすると不便ですので大きさを決めてしまいます。
「width="640"」とか「width="100%"」とかを使います。
<TABLE>タグの中に追加するとテーブル全体の幅が、<TD>タグの中に記入するとセルの幅が
その数値で固定されます。高さは自動調整でもそれほど不都合は
ないと思いますが、決めたいときは「height="数字"」と書きます。
|
|
<TABLE border="1" width="640"><TR>
<TD>1</TD><TD>2</TD><TD>3</TD></TR> <TABLE>
|
「width="640"」と書いたときの単位は640ピクセルです。今、表示されている大きさが640ピクセルです。
「width="%表示"」で書くと、開いている画面の何%になるかを指示することになり、画面の大きさが変化
しますから、レイアウトには使いづらくなります。
ホームページの幅の設定
ホームページを作る際に、ページ全体の表示幅をいくつにするかは、非常に大事な要素です。
大きく作りすぎて、縦と横のスクロールをしなければならないホームページは、非常に見づらくなります。
小さくしすぎても縦に長くなってしまいやはり見づらいものです。
幅の考え方はいろいろありますが次の二つから選べばいいと思います。
一つは640ピクセル・・・プリンターでA4に印刷したとき何もしなくても収まるサイズです。
二つ目は800ピクセル前後・・・大部分の人が表示できる最大のサイズです
このあたりを参考にして、自分のホームページのサイズを決めていけばいいと思います。
部分部分の幅を決める
<TABLE border="1" width="640">で全体の表示幅は決定できました。
セルごとの表示幅は<TD>に入れますが、このときは%表示が便利です。
最初のセルを50%、後ろ二つを25%づつに表示してみます。幅の指定は最初の1行目に入れるだけでOKです。
|
|
<TABLE border="1" width="640">
<TR><TD width="50%">1</TD><TD width="25%">2</TD><TD width="25%">3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
|