授業17回目 website制作⑴ 2018.2.6(tue)
2018年 02月 14日
■アウトライン
⑴明示的アウトライン
*HTML5ではセクションの始まりと終わりを明示して、意図したアウトラインを生成できるようになった。
*「セクショニング・コンテンツ」と「セクショニング・ルート」となる要素によってアウトラインを明示的に生成できる。
*HTML5では見出しレベルに関係なく、セクショニング・コンテンツとなる要素の入れ子によってセクションの範囲や階層構造を明示することができる。
*セクショニング・コンテンツ(セクションを明示する)に分類される要素
article要素・aside要素・nav要素・section要素
これらの要素でマークアップすると、そのブロックが見出し要素を持つ持たないに関わらず、セクションとして明示されて、アウトラインが生成される。
*セクショニング・ルートに分類される要素
body要素・blockquote要素・details要素・fieldset要素・figure要素・td要素
これらのセクショニング・ルートとなる要素は、自身でアウトラインを生成するが、全体のアウトラインには影響を与えない。
全体のアウトラインとは独立したものとして扱われる。
⑵暗黙のアウトライン
見出し要素のレベルを使い分けることによって生成されるアウトラインを「暗黙的アウトライン」という。
■アウトラインを確認するためのツール
HTML5 Outliner
見出しを伴う、意味的に関係のあるまとまりを表す。
*見出し必須
■<article>
切り出しても独立したコンテンツとして成り立つ記事を表す。
*見出し必須
■<aside>
サイドバーなど、メインコンテンツから分離された補足情報を表す。
*見出し必須ではない
*見出しがない場合は、outlinerでUntitled Sectionと表示される。
■<nav>
ページ上の主要なナビゲーションを表す。
*見出し必須ではない
*見出しがない場合は、outlinerでUntitled Sectionと表示される。
♣︎参考にしたサイト・本♣︎
WWW WATCH
HTML5におけるアウトラインに関して簡単解説
『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社
by zooori
| 2018-02-14 21:18
| 授業まとめ(website制作編)