|
| いまさらHTML,CSS講座トップ > HTMLテンプレート インデックスページ > TABLEテンプレート |
|
|
本稿では、メニューや、トピックスなどを格納するボックスを作成します。
|
| ■ BOX TABLEテンプレート |
 表 示 |
|
|
|
 ソース 例 |
|
<table cellspacing="0">
<tr><td style="border: 1px solid #cdcdcd; background:#cdcdcd;">メニューのタイトル</td></tr>
<tr><td style="border: 1px solid #cdcdcd;">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</td></tr>
|
|
| カスタマイズ |
|
|
|
|
| ソース 例 |
|
<table cellspacing="0" width="224">
<tr><td style="border: 0px; background-image:url(template/menu_back.gif);">メニューのタイトル</td></tr>
<tr><td style="border: 1px solid #4d99e5;background: #ddf4ff">
<ul style="margin-left:0px;padding-left:20px;">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</td></tr>
|
|
| ■ 解説 |
|
背景画像→ |
|
table要素に、横幅(224px)を指定し、メニュータイトル部の td要素には、border（罫線）を、0pxで指定し、background-imageプロパティで背景画像を指定します。
|
|
2段目のメニュー内容の td要素の罫線に、メニュータイトル部で指定した背景画像の色と同じ色(#4d99e5)を指定し、少し薄めの色（#ddf4ee）を背景色に指定しています。
|
|
ul要素の、marginプロパティとpaddingプロパティは、表示位置の調節です。
|
| スタイルシートの記述が長くなりましたので、head要素に記述するか、外部スタイルシートで指定すると、HTMLの記述がすっきりします。 |
|
|
|
|
|
|
|
