|
|
■あなたにもできるテンプレート製作実践編
◆では下図のようなテンプレートを作ってみましょう。
|
タイトル・ヘッダ部分
|
|
メニュー部分
|
メインコンテンツ部分
|
●下記タグはテーブルのみを直接スタイルシートで指定した例です。
まずはこれを基本にして見ていきますので、コピーしてメモなどに貼り付けて下さい。
- ◆メモ帳に写したタグを見ながら説明を読んでもらうと理解しやすいと思います。
- まずはスタイルシートを把握することからはじめましょう。
最初のテーブルの指定 style="border-collapse:collapse;" というのは、テーブルのボーダー（罫線）が二重に表示されて重なる部分が太くなるのを防ぐための指定です。
- 次のセル(td)の指定は style="font-size:8pt; border:1px solid black;" フォントサイズは8ptで罫線は1pxの単線で色は黒という指定です。
- 次のdivの指定は style="padding-top:3px; padding-left:5px; width:301px; height:40px; font-size:8pt; border-top:1px solid #ffffff; border-left:1px solid #ffffff; border-right:1px solid #999999; border-bottom:1px solid #999999;"
となり、順番にセルの上からの距離3px、左からの距離5px、縦横の幅が100％でフォントサイズが8pt、罫線は左と上が1px単線で白、右と下が1px単線で色が#999999という指定になっています。
下のdiv二箇所の指定も同様の指定をしてありますが、多少違うのは文字色が白の部分とかですが、背景が強い色のために文字は白にしてあります。
- 下の二つ（メニューとメイン）のセルは罫線1px単線黒という指定をしてあります。
- ●上記の指定を少し変更するだけでもかなりいろいろなアレンジが可能ですからぜひやってみて下さい。
- 上記のタグを理解できたら次のステップへ進んでいくといいでしょう。
次のステップでは自分なりに難しい表や自分なりのページテンプレートなどを作ってみて下さい。
単に罫線のみのテンプレートの場合には、中の<div>〜</div>の部分を取り去ることでできちゃいます。
※テンプレート製作の上達の近道はやはり他のサイトの作りを見ていろいろ研究してみることだと思います。
その中で思わぬ発見をしたり役に立つ情報が得られたりします。
|
|
|
|
