HTML5をCSSでレイアウトする場合

Question

section 　articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで

……………

のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？

……………

と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは

でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m

ORUKA1951 · Accepted Answer

No.1です。仕様書を一度は目を通すと疑問は払拭されるでしょう。 HTML4.01自体がなぜ作られたかを御存知でしたら、HTML5の目的のひとつがよくわかると思います。　ユーザー登録（無料）が必要かもしれませんが　⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから □ 【問題2】文書内に埋め込まれた「意味」が不明確　・・・前略・・・「以前のHTMLは、文書構造の「意味」を表すための機能が不足していた」ということが挙げられます。　例えば、「見出し」「本文」といった文書構造を表すのに、これまでは＜div＞要素を用いることが一般的でした。しかし、＜div＞要素は厳密にいうと「意味を持たない」という意味の要素です。＜div＞が多用されたHTML文書は、開発者が目で見て読むのであれば、文書構造の意味を把握することは容易かもしれません。　しかし、例えば検索エンジンやスクリーンリーダーなどのプログラムにとっては、「どこからどこまでが重要な本文なのか」「この＜ul＞要素はナビゲーションメニューを表しているのか、文書中の個条書きなのか」すらも分からないのです。　→ 【解決】文書内に埋め込まれた「意味」を明確にする　HTML5では、この問題に対処するため、数多くの意味的要素（「セマンティックな要素」と呼ばれます）が追加されました。それだけではなく・・・【後略】・・・￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで　この記事を読まれただけで、『そもそも、DIVでレイアウトする』という思考自体が誤りであることに気が付かれると思います。 [例]　タブは　(全角スペース二個)に置換してあるので戻す。　　　　

本文タイトル

項目タイトル

項目タイトル

補足記事

　　 ★HTML4.01が仕様どおりに記述されていれば、文書構造が分かりますよね。　これをスタイルシートで div.header,div.section,div.footer{ width:80%;min-width:620px;max-width:900px; margin:0 auto; padding:5px; } div.section{position:relative;min-height:400px;} div.section div.nav,div.section div.aside{/* 子孫セレクタ */ position:absolute;top:0; width:200px;height:100%; } div.section div.nav{left:0;} div.section div.aside{right:0;} div.section h2,div.section div.section{ width:auto;min-width:0;min-height:0; margin:0 210px; } /* たったこれだけ!---おまけに分かりやすく色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white} div.section div.nav{background-color:yellow;} div.section div.aside{background-color:lime;} div.footer{background-color:fuchsia;} とすると5カラムのスマホにも対応したリキッドのデザインができます。 ★必ず試してください。なお、DOCTYPEは　　ブラウザ間の差もないはずです。　もちろん、div.section div.navやdiv.section div.asideの左右を入替えたり、すべて右によせたりとデザインの自由度も高くなりますし、文書構造自体も分かりやすいのでメンテナンスも容易になるでしょう。　HTMLを見なくてもスタイルシートが記述できますよ。 ★そして、そのままHTML5に変更できます。　⇒

　section,nav,aside,footerも同様 No.1で引用した『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。』の意味が理解いただけると思います。 ★HTML4.01strictでDIVを本来の使い方で使用して文書構造をマークアップする。 ★HTML5で要素を正しく使用して文書構造をマークアップする。　いずれであっても構いません。プレゼンテーションとは切り離して・・・　さすれば、自由自在にデザインできますし、そもそも製作やメンテナンスが楽になる。

taloo · Answer

>No.3回答 >No.3お礼一応補足しておきます。

でレイアウトが可能というのは、スタイルシートで div {position: absolute; width: 50%; right: 0;} このように書けば

を右寄せする事が可能ですが、 section {position: absolute; width: 50%; right: 0;} このように書けば

を右寄せする事が可能だというだけです。レイアウトを目的として

を使うのではなく、 sectionは「セクション（和訳すると章や節など）」の区切りのために使用し、レイアウトを行う場合は上記の様にスタイルシートで指定してください。また、たとえばナビゲーションには

を使用し、

のレイアウトを変更したいのであれば

に対してスタイルシートを適用してください。（つまり、

taloo · Answer

や

、もちろん

、

ORUKA1951 · Answer

一度、仕様書を通して読んでください。 HTML 4.01仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) HTML5( http://www.w3.org/TR/html5/ ) 　ネット上に散乱している情報をいくら見ても役には立ちません。とりあえず、HTML4.01strictをマスターしてください。★ただしstrict★ですよ。HTML5は、その改訂ですから、 HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) で概略は理解できます。そもそもDIVはHTML4.01のときから『HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれていました。必ず私の説明ではなく仕様書を読んで確認すること!! 　それを理解しているだけで、そのような質問は出てこないはずです。　HTML4.01で「文書構造とプレゼンテーションの分離」が言われながら、DIVをデザインのために使用したページや解説がたくさん存在しています。　DIVやSPANはidやclassを併用して文書構造を補完する為のものです。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　その文書構造に基づいてスタイルシートでデザインしていくと書かれていたのに!!! これは非常に多くの利点があります。・誰が見ても、自身が後日見返しても、検索エンジンにも内容が理解しやすくなります。・HTMLに余計なものがないためHTMLもスタイルシートも簡潔で分かりやすくなります。　もちろん文書構造とデザインが分かれていますから、スタイルシートを変更するだけでデザインを簡単に変更できます。スクリーンリーダー、プリンターは無論、幅の狭いディスプレイや広いディスプレイ用にスタイルシートを用意できます。 [HTML4.01]だと、下記のように書かなければならなかった物が　　

　 [HTML5]だと　

タイトル

　と書くことになります。 ★HTML5でWEBページ作成をするのに、レイアウトは

でネストするのは意味がないように　じゃないです。重要なのでわざわざMEMOとして、 NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors 　著者は、他に適切な要素がないときの、最後の手段の手段としてdiv要素を使用することが強く奨励される。divの代わりにより適切な要素を使用することにより、読者にとってはアクセシビリティの向上に、著者にとってはメンテナンス性の向上につながる。　⇒4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) ★HTMLはデザインのための物じゃないです!!!! 　文書構造をマークアップするマークアップ言語です。 ★スタイルシートは、その文書楮を利用して、プレゼンテーションを指定する物です。　この二つが理解できていないサイトがあまりにも多すぎます。　　仕様書を全く読んだ形跡もないのに解説しているのじゃないかと・・(^^) ＞sectionを使ったレイアウトは駄目で、divでレイアウトするとか… ★新しい要素を使わずにDIVを使用するのは、古いブラウザに新しい要素が理解できないからです。javascript・・と書いておけば、古いIEはとりあえず使える。

HTML5をCSSでレイアウトする場合

No.1です。

この回答への補足

>No.3回答

<section>や<article>、もちろん<header>、<footer>、<aside>、<nav>など、全要素でレイアウトしてもかまいません。

一度、仕様書を通して読んでください。

この回答への補足

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

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

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