-
ID:5l3GkS さんの質問

section要素の使い方が未だに理解できません。
過去の質問など検索して調べたりして

>>マークアップ上正しい位置に配置したsectionなどにスタイルを適用するのは有りですが、たんにレイアウト目的のdivをsectionに置き換えるのは無し

という回答例を見たのですが
http://www.mdn.co.jp/di/articles/2605/?page=5
このページの2カラムレイアウトの例のところに

>>上記はコンテンツエリアと、サイドバーエリアにfloatのleftとrightをそれぞれにかけて2カラムレイアウトをした例です。中に何をいれるかなどを考えずに、section要素でそれぞれのエリアを囲みfloatをかけしてしまった悪い例です。

これはマークアップ上正しい位置に配置していないため
(2カラムレイアウトをすることによって
コンテンツエリア > サイドバーエリア、サイドバーエリア > コンテンツエリア
どちらでマークアップされているかわからない)
という事なのでしょうか?

みんなの回答 4 件

ID:UAqu6k さんの回答

HTML5におけるセクションの概念は、簡単に言うと「見出しとそれに属するコンテンツのまとまり」をセクションと言っている
h1~h6要素を作ると、その見出しに対応するセクションが自動的にできる(暗黙のセクション)
このときsection要素(やarticle要素などのセクショニングコンテンツ)を使うことでセクションの範囲を明示できる
というのがsection要素の役割です

なので、section要素の中身としては対応する見出しとコンテンツが入っていないとだめ
そのサイトでは小さく「内容を考えずにdiv要素をsection要素に置き換えはいけません」と書いてあるが、おそらく内容がセクションとして不適切(見出しがないとか)場合を考えていると思われる

逆に言えば、2カラムレイアウトにsectionを使うのは、section要素の中身が正しければ(ちゃんと見出しと対応するコンテンツという形になっていれば)OK

ID:EZ7mdo

トピ主です。
内容を見て適切なマークアップを意識して使い、そのうえでレイアウトが必要ならレイアウトを加えるといった感じでいいのでしょうか?
ぼんやりとですが分かった気がします。
ありがとうございました。

ID:JRulk/

この説明は、アウトラインとセクションを混同している気がする。

ID:5l3GkS

自分ですか?

ID:eMwceE さんの回答

hタグ使う時は必ずsectionタグでくくる。
決まりだから理屈ぬきで覚えればいい。

ID:69o872

そんな仕様はないぞ

ID:eMwceE

細かいことで揚げ足取るなよ。
分かりやすく端的に説明してるだけだから。
こう覚えときゃ間違いないってことだよ。面倒くさい奴だ。

ID:bfw5xC

分かりやすく端的に説明してるだけなら、決まりだから理屈ぬきで覚えればいいなんて言っちゃダメだろ。

ID:/.kNpT

五月蝿ぞ雑魚ども

ID:EZ7mdo

ちなみにこんな場合なら迷うけどsection要素使わないだろうという例などあったりしますか?

ID:rCOPLP

「いつもここから」
.
案件を多く抱えてる時〜、納期が短い時〜、体調が悪い時〜、なんか面倒くさい時〜、いちいち考える時間が勿体ない時〜。
.
<div class="section">が正解!

ID:eMwceE

sectionはhタグがあれば何も考えずに使えばいいの〜
ただそれだけのことだよ。

ID:WCSoRL

ダメだろ

ID:69o872

だめだね。

ID:aawL/8 さんの回答

記事読んでみました。
解釈が違っていたら申し訳ないけども、floatをさせるためだけ(レイアウト目的)にコンテンツエリアとサイドバーをただsectionにするのは良くないけども、内容としてsectionやarticleを使うのが正しければ使って良い(その上で、floatさせるのであれば問題ない)と言っているように見えました。
特に制約がなければ、コンテンツ部分はsection、広告が入っている部分はasideといった具合にするのがわかりやすくていいかもですね。
間違ってたらごめんなさい。

ID:eMwceE

違うよ。
もしそのコンテンツが独立して成り立つならarticleになる。
sectionはhタグがあれば何も考えずに使えばいいの。

ID:76Ty/H さんの回答

html5は要素が細かく出来るようになってるだけで、別に使う必要は無い。
というか、わからないなら使わない方が良い。

最終更新日:2014-10-14 (3,777 views)

関連するトピックス

ページ上部に戻る