人気ブログランキング | 話題のタグを見る

授業17回目 website制作⑴ 2018.2.6(tue)

アウトライン

⑴明示的アウトライン
*HTML5ではセクションの始まりと終わりを明示して、意図したアウトラインを生成できるようになった。
*「セクショニング・コンテンツ」と「セクショニング・ルート」となる要素によってアウトラインを明示的に生成できる。
*HTML5では見出しレベルに関係なく、セクショニング・コンテンツとなる要素の入れ子によってセクションの範囲や階層構造を明示することができる。

セクショニング・コンテンツ(セクションを明示する)に分類される要素
 article要素aside要素nav要素section要素
これらの要素でマークアップすると、そのブロックが見出し要素を持つ持たないに関わらず、セクションとして明示されて、アウトラインが生成される。

セクショニング・ルートに分類される要素
 body要素blockquote要素details要素fieldset要素figure要素td要素
これらのセクショニング・ルートとなる要素は、自身でアウトラインを生成するが、全体のアウトラインには影響を与えない。
全体のアウトラインとは独立したものとして扱われる。


⑵暗黙のアウトライン
見出し要素のレベルを使い分けることによって生成されるアウトラインを「暗黙的アウトライン」という。



アウトラインを確認するためのツール

HTML5 Outliner



<section>

見出しを伴う、意味的に関係のあるまとまりを表す。
*見出し必須



<article>

切り出しても独立したコンテンツとして成り立つ記事を表す。
*見出し必須



<aside>

サイドバーなど、メインコンテンツから分離された補足情報を表す。
*見出し必須ではない
*見出しがない場合は、outlinerでUntitled Sectionと表示される。



<nav>

ページ上の主要なナビゲーションを表す。
*見出し必須ではない
*見出しがない場合は、outlinerでUntitled Sectionと表示される。



♣︎参考にしたサイト・本♣︎

WWW WATCH
HTML5におけるアウトラインに関して簡単解説


『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社

by zooori | 2018-02-14 21:18 | 授業まとめ(website制作編)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori