無料でホームページ素材を提供しています。

サイトマップ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

ホーム	掲示板	ブログ	FAQ	お問い合わせ

tableを使った3カラムレイアウト

本文をアチコチに配置するには、<table>や<div>等を使います。最近は外部CSSファイルを使う事が多いですが、閲覧する環境によるレイアウト崩れを防ぐのはかなり難しいので、未だに<table>を使ったレイアウトは重宝されています。

ブラウザー表示例

ブラウザー表示

タイトル枠

メ
ニ
ュ
ー
枠

本
文
枠

そ
の
他
枠

著作権枠

ソース

<!-- TTL枠▼ -->
<table align="center" style="background-color: #FF0000;" border="1" cellspacing="0" width="256">
 <tr class="text-align_center" valign="middle">
  <td>ここにホームページのタイトルを書く。</td>
 </tr>
</table>
<!-- TTL枠▲ -->

<!-- メイン枠▼ -->
<table align="center" style="background-color: #FFFFFF;" border="1" cellspacing="0" width="256">
 <tr class="text-align_center" valign="middle">
  <td style="background-color: #FFFFFF;" width="64">ここにメニューを書く。</td>
  <td style="background-color: #FFFFFF;" width="128">ここにメインの記事を書く。</td>
  <td style="background-color: #FFFFFF;" width="64">ここにその他の記事を書く。</td>
 </tr>
</table>
<!-- メイン枠▲ -->

<!-- 著作権枠▼ -->
<table align="center" style="background-color: #FFFFFF;" border="1" cellspacing="0" width="256">
 <tr class="text-align_center" valign="middle">
  <td>著作権枠</td>
 </tr>
</table>
<!-- 著作権枠▲ -->

</body>
</html>

《もくじへ│▲このページのトップへ

メニュー

グラフィック素材
HTMLとJavaScript素材
資料
おすすめランキング
HTML辞典
JavaScript辞典
便利情報
ホームページ運営講座
ホームページ用語集
リンク

Sponcerd Links

Recommend

│ホーム │FAQ │動作環境について │注意事項 │素材と資料の使い方 │

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送