質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

4676閲覧

【html5】sectionタグについて

a.m

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/09/08 00:33

html5のsectionタグについてです。
sectionタグは以下のように定義されていることを確認しています。

コンテナ要素ではありませんので、レイアウト目的に使用することはできません。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。
section要素は章や節といった単位で扱うので、セクション内容を表す見出し要素が必ず必要になります。

レイアウト目的というのは具体的にどのような場合を指すのでしょうか?
例えば下記のようにsection要素の中に見出し要素(hタグ)を入れて条件をみたしていれば、<section id="test">にCSSの装飾(float,margin,padding,positionなど)を施してもよいのでしょうか?

<section id="test"> <h1>test</h1> <p>testtesttest</p> </section>

初歩的な質問で申し訳ございません。
アドバイスお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/08 02:21

引用部分は半角で「> 」を行頭に付けることで表現出来ます。また、引用元のURLも追記いただけるとありがたいです。
guest

回答2

0

ベストアンサー

section要素にCSSを適用してはいけないなんて言うルールはありません。
ただしくsection要素を使用した領域を、CSSのセレクタとして利用することはなんら問題ありません。

「レイアウト目的で使ってはいけない」というのは、例えば文書の情報構造と関係ない場所を
要素の配置や装飾の目的でグルーピングしたいような時に、divの代わりのようにsection要素を使うようなことをしてはいけない、という意味です。

例えば見出しではないところを「大きな文字で強調したいから」という理由でh1要素を使ってはいけないのと理屈は同じです。そういう理由でh1要素を使うことも「レイアウト目的・装飾目的で本来の用途ではない使い方をすること」に該当します。
でもだからといってh1要素にCSSを適用してはいけないなんていうことはありませんね?
それと一緒です。

ただしくマークアップした上で、意味付けとして使用した要素に対してCSSで装飾を加え、
それでもなお枠が足りない場合にdivを足して補っていく、という考えで良いと思います。

投稿2016/09/08 04:26

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

a.m

2016/09/09 09:18

分かりやすい解説ありがとうございます。 下記のW3CのHTML5仕様書を読んで疑問だったので質問しました。 https://momdo.github.io/html5/sections.html ずっとどうなのだろうとモヤモヤしていたので、とてもスッキリしました 今後は文章の情報構造を守った上で適宜CSSで装飾を加えていきたいと思います。 ありがとうございました。
aKusano

2016/09/09 16:07

一応補足しておくと、運用ルールとしてsection要素にはレイアウト用のスタイル定義を当てず、必ずdiv要素を追加してそちらに適用するということは考えられます。 たとえば当初の文書構造ではたまたまsection要素がそのままレイアウトの定義にも使える領域を示していたとしても、後日メンテナンスで構造が変わり、レイアウト用の定義を当てることが出来なくなる恐れもあります。section要素はあくまで文書構造を表す要素ですので、構造が変更になれば当然それに合わせてマークアップする領域も変更するのが当然だからです。 この時、もしclass等をつけずに純粋なsectionタグに直接スタイルがあたっていたとしたら、修正が面倒になりますよね。 従って、少なくともスタイルを当てる際にはclass等を設定してそちらに定義しておくべきですし、もっと安全を期するなら、固定のレイアウト枠などについては冗長になってもdiv要素を追加してそちら側で定義をしておいた方が運用的には安全性は高くなります。
a.m

2016/09/12 03:01

具体的な補足説明ありがとうございます。 とても参考になります。 ・section要素にスタイルを当てる場合はidやclassを設定しそちらに定義する。 ・メンテナンスなどで構造が変わる可能性のある固定レイアウト枠についてはdiv要素を追加してそちらにスタイルを当てる アドバイスいただいた上記の点をしっかり踏まえてコーティングしたいと思います。
guest

0

レイアウト目的と言うのはその名の通りレイアウトに使ってはダメということです。
borderbackgroundpaddingmarginもダメです。
要するにデザインに関わる一切のCSSを使えない、と思ってください。

そういった場合はsectionの内側にdivを入れて、そのdivにCSSを付けましょう。

投稿2016/09/08 01:41

Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問