セクショニング・ルートについてまとめる

スポンサーリンク
レクタングル大

セクショニング・ルートとは?

セクションのルートとして扱われる要素のこと。

属する要素は下記の通りです。

blockquote
body
details
fieldset
figure
td
これらの要素は、その内部に独自のアウトラインを持つことができます。

とあるのですが、ルートとして扱われるってなに?独自のアウトラインってなに?と、頭の中「???」。なので、段階的に読み砕いていこうと思います。

まずルート。

直訳したら経路とか道筋とかですけど、、、ここでいうルートの場合意味が違う気が。

ということは専門用語かな?

で、ググってみると、「階層型の最上位」とかそんな感じの説明あり。

つまり、セクションの中に忽然と現れるこの要素は、いったん階層型の最上位として扱われるので独自のアウトラインを持てる!というような意味でしょうか?

独自のアウトラインっていうのは、

祖先のアウトラインは、セクショニング・ルート要素内には継承されない。
セクショニング・ルート要素内のアウトラインは、祖先のアウトラインに何ら影響しないで、その要素内で完結する。

というわけで、独立国家の中に独立国家があるイメージですかね?

セクショニング・ルートに属する要素の解説

ついでなので、セクショニング・ルートに属する要素のおさらい。

  • blockquote

長めの文章を引用するときに使います。

ちなみに引用元のURLは”cite”属性で。

  • body

文書の本体を表す要素で、htmlの直下に置きます

そういえばbody要素ってなんだろう?と考えたことなかったなあ。

セクショニング・ルートなのは当然なのかも。あれ、でもじゃあhtmlは?

html HTMLドキュメントのルートを表します。

つまり、HTMLは最上位要素で、その次にセクショニング・ルートであるbodyが続くと。

なるほど!

  • details

ユーザーのリクエストに応じて提供される詳細情報を表します。

うーん?使ったことがないから分からない。

この要素で囲むと表示/非表示をユーザー側で切り替えることができるようです。この要素の目的は「詳細を隠しておくことにある」と。見たい人だけ見てね~、ということらしいです。

  • fieldset

フォームアイテムをグループ化します。

お問い合わせフォームなどのそれぞれの部品(項目)をまとめて囲ってグループ化するための要素で、通常ボーダーで囲まれます。色々と決まりごともあるみたい。こんど使ってみよう。

  • figure

本文から参照される図版を表します。

文章に組み入れられない挿絵的なコンテンツを表すときに使いましょう!でいいのかなー?

画像、動画、コード、詩、アスキーアートなどを挿入するときに、今までul要素やdl要素でやっていたちょっとこじ付け的なマークアップをしなくてもいいということらしいです。

  • td

表のデータセルを表します。

そうなんだー、なるほど。td要素の中に見出しとかつけていいんだ。

ちなみにth要素にはフレージングコンテンツ(つまりインライン要素)しか含められないとあります。

まとめ

今まで要素のカテゴリーとかほったらかしにしてましたが、素敵なマークアップをするにはけっこう大事なんですね。

スポンサーリンク
レクタングル大
レクタングル大
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA