素材屋さんのテーブルを設置する方法

素材屋さんで配付されているテーブル枠は、とても可愛いものが多くて使いたくなってしまいますよね。ここでは、これをテーブル(table要素)を使って設置する方法と、div要素にCSS(スタイルシート)を指定して設置する方法を解説します。

table要素を使ってテーブルを設置するように解説しているサイトも多いのですが、HTML 4.01の仕様書には、『単に文書をレイアウトする目的で、表を使用するべきではありません。そのような目的で使用された表は、非視覚系ユーザエージェントで内容を表現する場合などに問題を引き起こします。レイアウトを指定するためにはCSSを利用してください。』との記述がありますので、CSSを使った方法も併記しています。

PageTop

table要素を使用したテーブル枠

table要素を使ってテーブル枠を表示させると以下のようになります。

2003/09/22(Mon) ...

今日は気持ちの良い秋晴れでした。お隣さんから栗をいただいたので、晩御飯は栗御飯にしてみました。ホクホクとした甘い栗はとても美味しかったです (*^-^)

素材屋さんで配付されているテーブルは、縦3つ × 横3つに分割して作られていて、真ん中を除く8個のパーツになっています。

上記のテーブルに枠線を表示させると以下のようになります。

　

テーブルを使ったHTMLソースは以下のようになります。

<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/table_top1.gif" width="21" height="29" border="0"></td> … 上段上
<td background="img/table_top2.gif"><img src="img/spacer.gif" width="1" height="1" border="0"></td> … 上段中
<td><img src="img/table_top3.gif" width="21" height="29" border="0"></td> … 上段右
</tr>
<tr>
<td background="img/table_middle1.gif"><img src="img/spacer.gif" width="1" height="1" border="0"></td> … 中段左
<td width="300" bgcolor="#f8f4e6"> … 中段中
<table width="100%" height="100%" cellpadding="15" cellspacing="0"> … (中段中の)日記部分
<tr>
<td>
<p><b>2003/09/22(Mon) ...</b></p>
<p>今日は気持ちの良い秋晴れでした。お隣さんから栗をいただいたので、晩御飯は栗御飯にしてみました。ホクホクとした甘い栗はとても美味しかったです (*^-^)</p>
</td>
</tr>
</table>
</td>
<td background="img/table_middle3.gif"><img src="img/spacer.gif" width="1" height="1" border="0"></td> … 中段右
</tr>
<tr>
<td><img src="img/table_bottom1.gif" width="21" height="6" border="0"></td> … 下段左
<td background="img/table_bottom2.gif"><img src="img/spacer.gif" width="1" height="1" border="0"></td> … 下段中
<td><img src="img/table_bottom3.gif" width="21" height="6" border="0"></td> … 下段右
</tr>
</table>

四隅(上段左、上段右、下段左、下段右)の画像は、テーブル(td要素)内にそのまま指定しますが、テーブルの大きさが変化する箇所(上段中、中段左、中段右、下段中)は、テーブル(td要素)の背景(background属性)で画像を指定し、テーブル(td要素)内には「spacer.gif」を指定しています。この「spacer.gif」は、テーブル(td要素)内に何もないと表示されない場合があるので、レイアウトの邪魔にならない透明な1px×1pxの画像を指定しています。

日記部分にあるテーブル(table要素)の「cellpadding="15"」は、テーブル枠の画像と内容との間隔を指定しています。適宜変更してください。

PageTop

div要素を使用したテーブル枠

div要素は、要素の内容がブロックレベルであるという、文書に構造を付加するのみで、他のプレゼンテーションには影響しない要素です。このdiv要素にCSSを指定して、「table要素を使用したテーブル枠」と同じ表示をさせてみます。

このとき、table要素を使ったときと同じように、テーブル枠を9つに分割して、それぞれをdiv要素で表示させたいところですが、日記部分の大きさが変化するため、高さの指定ができなくなります。中段の左右の画像を日記部分に合わせて伸縮させることはCSSで出来ないのです。そのため、少し画像に手を加えて、左・中・右の画像を作成したいテーブルの大きさに合わせてくっつけてしまいます。素材屋さんによっては画像の加工を禁止しているところもありますので、確認してくださいね。

くっつけた画像を表示させると以下のようになります。

これらの画像を、上段・中段・下段の背景に指定すると以下のようになります。

2003/09/22(Mon) ...

今日は気持ちの良い秋晴れでした。お隣さんから栗をいただいたので、晩御飯は栗御飯にしてみました。ホクホクとした甘い栗はとても美味しかったです (*^-^)

このサンプルのHTMLソースは以下のようになります。

■スタイルシート
<style type="text/css">
<!--
.table_top {background-image:url(img/table_top.gif); width:342px; height:29px;}
.table_middle {background-image:url(img/table_middle.gif); width:342px;}
.table_naiyo {padding-top:15px; padding-bottom:15px; padding-left:36px; padding-right:36px;}
.table_bottom {background-image:url(img/table_bottom.gif); width:342px; height:6px;}
-->
</style>
■HTML文書
<div class="table_top"></div> … 上段
<div class="table_middle"> … 中段
<div class="table_naiyo"> … (中段の)日記部分
<p><b>2003/09/22(Mon) ...</b></p>
<p>今日は気持ちの良い秋晴れでした。お隣さんから栗をいただいたので、晩御飯は栗御飯にしてみました。ホクホクとした甘い栗はとても美味しかったです (*^-^)</p>
</div>
</div>
<div class="table_bottom"></div> … 下段

上段・下段・中段のclass属性には、背景画像(background-image)の指定をします。上段と下段には幅(width属性)と高さ(height属性)を指定しますが、中段は高さがわからないので幅だけを指定します。日記部分の枠と内容の間隔は、上下は開けたい間隔の大きさを指定し、左右は画像と開けたい間隔を合わせた大きさを指定します。

CSSでは画像の加工が必要になりますが、設置する手間はこちらのほうが簡単ですし、HTML 4.01ではCSSを推奨しています。可能であれば、CSSを利用することをお勧めします。

PageTop

関連ページ

PageTop
お気に入りに追加
素材屋さんのテーブルを設置する方法
table要素を使用したテーブル枠 div要素を使用したテーブル枠 関連ページ
スポンサードリンク