忍者ブログ

ホームページ作成ビギナーズガイド

HTML4.01とCSSによるWeb標準のホームページ作成入門。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

table(テーブル)レイアウトについて

table(テーブル)でレイアウトするのは論理的におかしい

ページ全体をtableタグで構成しているサイトは多いです。
しかし、論理的・構造的マークアップの意味からすると、tableによるレイアウトはおかしいのです。

tableタグというのは「表」を意味するHTMLタグです。レイアウトのためのタグではありません。
tableタグでレイアウトすると、そのページ全体が一つの表という意味になってしまいます。
tableの中にtableを複雑に入れ子にしてレイアウトすると、もうそれは一体何を意味するのか。

table(テーブル)レイアウトはアクセシビリティ上も好まれない

例えば音声ブラウザで、上から横に順番に読んだ場合に意味が通じるか。
セルを何個所も連結したり、tableを入れ子にしたレイアウトだと意味不明になるでしょう。

PR

[table(テーブル)レイアウトについて]の続きを読む

CSS(スタイルシート)レイアウト:3カラム 3

CSS(スタイルシート)レイアウト:2カラム 3を応用して3段組にしたものです。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}
#header {height:100px;}
#left {position:absolute; top:100px; left:0; width:150px;}
#right {position:absolute; top:100px; right:0; width:150px;}
#center {margin-left:150px; margin-right:150px;}
#footer {height:100px;}

[CSS(スタイルシート)レイアウト:3カラム 3]の続きを読む

CSS(スタイルシート)レイアウト:2カラム 3

divタグとpositionを使った、メニュー部分は固定で、メインコンテンツ部分は可変幅の2段組レイアウトの作り方。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}

#header {height:100px;}

#left {position:absolute; top:100px; left:0; width:200px;}

#right {margin-left:200px;}

#footer {height:100px;}

[CSS(スタイルシート)レイアウト:2カラム 3]の続きを読む

前のページHOME次のページ

メニュー

カテゴリー

リンク

RSS

Appendix

リンクはご自由にどうぞ。

最終更新2008/07/09

Valid XHTML 1.0 Transitional
Valid CSS!
Copyright © ホームページ作成ビギナーズガイド All Rights Reserved.
忍者ブログ[PR]