li、ol、ulなどで構成されているテーブル不使用のサイトについて

Question

質問させて頂きます。
企業のホームページを見ていると、時々テーブルで作ってないサイトを見かけます。


例［三井住友銀行(トップページ)］
http://www.smbc.co.jp/



［疑問点1］リストアイテムタグなどを使って作られているようですが、こういったサイトの利点は何なのでしょうか。SEO対策かな、と推測しているのですが…。

［疑問点2］どういう形式・ルールにのっとって作られているのでしょうか。

［疑問点3］DreamweaverなどのWEBオーサリングソフトでの作成は可能でしょうか。もし不可能である場合は、具体的な作り方・詳細な情報などが紹介されているサイト・書籍など教えて頂けないでしょうか。（形式の正式名称が不明なので、調べようがなくて困っています）


色々質問してしまってすみません。
実際にサイトを作られている方など、いらっしゃいましたら教えて頂けないでしょうか。
宜しくお願い致します。

abril · Accepted Answer

> 具体的にテーブル使用でないサイトを作る時、どうすれば良いのかがわからないのです。 …先程も「内容から導き出される文書構造によって、自ずと適切なマークアップというのは大体決まって」くると申し上げた様に、まず、これからHTMLファイルとして作成するコンテンツの内容を良く見て下さい。そして、文書構造を把握して下さい。文書構造の把握、というのは文書の中の: どれが見出し（）か／見出しだとしたらそのレベルは（）／見出しに続く内容は表（）かリスト（

）か段落（

）か／リストなら順序無しリスト（

）か… といった事を系統立てて明確にして行く、という事です。この段階では、個々の装飾的要素（デザイン性）という事は一切考える必要はありません。論理的な構造にする事だけを考えて下さい。それから、サイトの表示イメージのデザイン・ファイルを見ながらごく大雑把な骨組みを考えます。例えば： -------------------------------------------------- 【ヘッダー】ロゴナビ1ナビ2ナビ3ナビ4ナビ5… -------------------------------------------------- |【サブナビ】 |　【メインコンテンツ】 |サブナビ1 　|　見出しレベル1 |サブナビ2 　|　文章… |サブナビ3 　|　見出しレベル2 |サブナビ3 　|　表 -------------------------------------------------- 【フッター】コピーライト　　　　　　　メールアドレス -------------------------------------------------- といった様な感じで。この様な構成であれば、以下の様にブロックを分けてみます。

～

上記はよくあるパターンの中の更によくあるコーディングの一例です。厳密に言えば全てを

でマークアップする必要はありません。例えば、【サブナビ】の内容が本当に単なるナビゲーションだけで済むのであれば、

～としてしまってもいいし、【フッター】も連絡先だけしか載せないならでもいいですし。「でもいい」というよりむしろ、デザイン上それが可能ならその方が望ましいぐらいです。テーブル・コーディングから移行する際に陥りやすいのが「論理的意味を考えず何でもかんでもdivでレイアウトしてしまい、結果マークアップがdivだらけに」という症状（「div病」と揶揄されたりします）です。

はそれ自体は論理的意味を持たないブロック要素ですので。また、主要の3つのブロックだけで済み全体を囲む

～

については必要ない場合もあります。構成内容とレイアウトに依存（ただしそれも論理的に許容できる範囲で、です。）しケースバイケースで変わります。大事なのはいたずらに入れ子を増やさない、という事です。この段階まで来て初めて、デザインを実現する為の装飾的要素をCSSで当てはめて行きます。その試行錯誤の段階で、若干マークアップを変更する場合もあります。例えばロゴについてはでマークアップするのか、それとも更に何らかのタグで入れ子にする必要があるのか…等。これも上記同様、あくまで論理的に許容できる範囲での変動ですが。また、画像についても、「その画像に重要な意味があるか／単なる背景パターンやリストマークなのか」に依っても、でマークアップすべきか、（当該タグの）背景画像としてスタイル設定するだけに留めるのか、という事も考えます。 …まあその他も色々と考えながら組み上げて行きますが、きりがないので。ごく大雑把なフローの一例はこんな感じです。これは私個人のやり方なので、また他の方は違う方法論を持っておられると思いますが、決定的な事は「デザインからではなくHTMLの論理構造ありきで考える」という事です。つまり、HTML文書のあるべき姿とは本来どういうものであったのか、という事からきちんと理解を深めて行く事が大前提であり、適切なマークアップもCSSの定義もその過程で自然と見えてくる筈の事なのです（勿論HTMLの各タグの意味・性質・文法、CSSのセレクタの書き方や各プロパティの詳細、といった事について学びつつですが）。なので、 > 詳細な方法が載っているサイトを探しているのですが… と仰る意味がもしも「一足飛びに”テンプレート＆小技集”の様なものを知りたい」という事ならば、それは単なる表面上のパターンを（真にその理屈を理解することなく）見よう見まねでマネする、という付け焼き刃の知識に過ぎなくなるので、「具体的にテーブル使用でないサイトを作る時、どうすれば良いのかが」わかる様にはなりません、残念ながら。 1. まずは内容に相応しい適切なHTMLのマークアップができるか、というところから見直して下さい。 2. それがクリアできたらCSSを学んで下さい。「CSSのシンタックスやプロパティを解説しているサイト」であればいくらでもありますから、そこはググれば必ず見つけられる筈（書籍でも良いですが、とにかく一冊読みこなす事です）。 3. そしたら例に挙げた様なよくあるパターンのデザインをいくつか考えて、簡単なテンプレート作成を練習して下さい。 4. もしレイアウト面で「こんなのやってみたい」というサイトに出会ったら必ずそこのHTMLとCSSのソースを見て、「何をやっているのか」を理解し、ご自分で再構成してみて下さい（まあ困った事に参考にしない方がいいケースもままありますが…）。番外：IEを基準に作成しない事。W3Cの仕様に準拠しない独自拡張・解釈をするバグが少なくないので、CSSは適切な定義をした後にIEでの挙動がおかしい部分だけを別途処理するのが望ましいです。 ”上記のステップを踏まえた上でなら”とても参考になるサイトとして、下記を挙げておきます。 http://css-happylife.com/ http://coliss.com/articles/category/build-websites/operation/css http://www.geocities.jp/multi_column/ くどい様ですが、ステップをすっ飛ばして上記のサイトからテンプレート／サンプル部分をただコピペしても力はつきません。長文失礼致しました。

kuzumiHK · Answer

No1さんの回答で答えは出ているようですが、
横から失礼します。

残念ながら、現在のブラウザの実装状況では、
企業が求めるデザイン（カラムレイアウト的な）を
文法を遵守しながら容易に実行できる環境が整っていません。

しかし、これからリリース予定のIE8では、
カラムレイアウトを比較的容易に実現するためのスタイル
display:table、display:table-cellが実装されるようです。
（他ブラウザはすでに実装済み）
これにより、文法を遵守しても企業の志向や好みによって、
テーブルレイアウト的な固定デザインがスタイルでも可能になりそうです。
（IE8がIEユーザのシェアの大半を占めるようになるまでの期間が必要になりますが…）

また、htmlもこれまでに足りなかったタグの追加や、
html4で非推奨になっていながら、どう考えても必要なタグや属性の復帰など、
閲覧者や制作者の声を大きく反映したバージョン5が今後リリースされるようです。

現状では、企業として最低限のアクセシビリティを守りながら、カラムレイアウトも実現するのは、とても手間がかかる作業になりますが、今後は徐々に手間がかからない仕様に改善されていくものと思います。

html自体が発展途上中の段階から首を突っ込むのか、
整備が整うまで、少し待ってみるのかの選択なのかもしれません。

gityotan · Answer

>具体的な作り方
『css 2カラム』や『css 3カラム』で検索してください。
見本が大量にヒットします。

noname#66720 · Answer

テーブルでのレイアウトは閲覧環境によっては問題を引き起こします。
今の流れが、誰でもどんな環境でもwebページを見れるようにしようという感じの流れなので、それを達成するためにHTMLでの最適なコーディングをしようとした結果テーブルを使わなくなったのだと思います。

新しいdreamwaverでは結構融通が利いていたはずです。
ただ、最初は普通にHTMLエディタ等で作るほうが良いかもしれません。
実際に大切なのはテーブルで作らないことではなく、結果としてどれだけ多くの人・環境でサイトを見せることができるかということなので、しっかりとしたページを作ろうとすると必ず勉強が必要になります。

形式というのがよくわかりませんが、webページを構成するファイルのことですかね？
始めはHTMLとCSSを覚えれば良いと思います。
その後、必要に応じてjavascript、cgi、php等を覚えていけば良いのではないかと。

pick52 · Answer

というか、HTMLではテーブルでのレイアウト記述は好ましくないと
いうことから最近流行りのCSSで作っているだけでは?
Yahoo! JAPANなどもこのような感じになっていると思いますけど。

Wikipediaなどで使用されているMediaWikiもXHTMLを使用している関係で
レイアウトにはCSSを使ってやっていますね。

大抵この様なところは外注ですので下請け判断でやったんじゃない
でしょうか。

abril · Answer

一制作者としての私見です。

> 企業のホームページを見ていると、時々テーブルで作ってないサイトを見かけます。

どちらかというと多分、今時の有る程度の規模を持った企業サイトであれば「テーブルで作ってないサイト」の方が多いのでは…？（日々仕事で接している際での印象ですので根拠となるデータを知っているわけではありません）
確かに大企業のサイトでもCSSは導入していてもHTML側のマークアップはテーブル・レイアウトのまま、というところも未だにありますが。

> ［疑問点1］利点

まず「利点」があるかどうかではなく…「内容」に対してどういうマークアップが相応しいか、という事を考えます。論理的な文書構造ありき、です。
そもそも、tableは「表」であって、単なるレイアウトをする為の機能ではないのですから。

インフラの整っていない時代には、テーブルコーディングだと読み込みが遅くなる、とかも言われてましたが、現在は極端な条件下でもない限り、ほぼその差異を体感できる事はない様に思われます。また、SEO上有利、という事も確かによく言われているのですが、これにしても実際問題確実に差が出るかといったら、その効果が保証されているわけではないです。旧態然としたテーブル・コーディングのサイトでも検索結果で上位にランクされるものはありますし、結局キーワードに対する内容のマッチング率とか、より多くのサイトからリンクされているとか、という事の方が重要になってきますから。ただ、的確な論理構造で構成されたHTMLである事はサーチ・ロボットに対して「マイナスにはならない」という程度の事です。
そもそもSEO云々以前の前に、HTMLコーダーとしては必須正しい／妥当なマークアップにしておく事が必須なので、因果関係を逆転させる様な考え方はしません。

> ［疑問点2］形式・ルール

この答えもほぼ上記と同じです。内容から導き出される文書構造によって、自ずと適切なマークアップというのは大体決まってきます。

・その内容が「表」にするに相応しいものであれば、tableでマークアップ
・その内容が「表」よりも「リスト」が妥当なのであれば、リストタグul/ol/dl/（どれを使うかはこれもまた内容に依ります）でマークアップ

例えば参考にされたURLのコンテンツは、サイトのホームという事もあって、内容をよく見ればその大半が「メニュー」です。現在この「メニュー／ナビゲーション」をマークアップするのに妥当なマークアップとしてはリストタグ（中でも特にul）らいしか用意されていないのです。となると、リストタグでのマークアップがメインになるのは当然（必然）の結果になります。

> ［疑問点3］DreamweaverなどのWEBオーサリングソフトでの作成

私個人はそういう総合的なソフトをオーサリングのメインのツールとしては使用していないので、Dreamweaverは手元にはありますが詳細はわかりかねます。ですが、明らかにDreamweaverまかせで作成したであろうサイトでテーブル・コーディングではないものが見受けられますので、多分有る程度のテンプレートやプリセット的な機能はあるのでは？

li、ol、ulなどで構成されているテーブル不使用のサイトについて

> 具体的にテーブル使用でないサイトを作る時、どうすれば良いのかがわからないのです。

No1さんの回答で答えは出ているようですが、

>具体的な作り方

テーブルでのレイアウトは閲覧環境によっては問題を引き起こします。

というか、HTMLではテーブルでのレイアウト記述は好ましくないと

一制作者としての私見です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング