セクションについて1
・セクションを分けるとアウトラインが出来上がる
見出しレベルで構造がネストされる
h1
body
h1
p p
h2 h2
p p
h2 h2
p p
body
< >
< >HTML5について >
< >これから教えるよ〜... >
< >セマンティクスについて >
< >いい感じにやるやつ >
< >新しいタグについて >
< >headerとかfooterとか... >
>
1.HTML5について
1.セマンティクスについて
2.新しいタグについて
Slide 19
Slide 19 text
アウトラインの確認は
・https://gsnedders.html5.org/outliner/
Slide 20
Slide 20 text
セクションについて2
・セクションは明示的にも(見出しで)暗黙的にも定義できる
h1
body
section
h1
p p
/section
body
< >
< >
< >HTML5について >
< >これから教えて... >
< >
>
h1
body
h1
p p
body
< >
< >HTML5について >
< >これから教えて... >
>
明示的 暗黙的
divはセクションとして区切れない
body
div div
div
p p
h2 h2
p p
div
h3 h3
p p
div
div
body
< >
< >2019-10-04 kenshir0f >
< >
< >日報書き忘れた... >
< >お仕事 >
< >いい感じにやっている >
< >
< >Netflix >
< >転スラ7話まで見た >
>
>
>
h1
body
h1
article
p p
h2 h2
p p
section
h2 h2
p p
/section
article
body
< >
< >2019-10-04 kenshir0f >
< >
< >日報書き忘れた... >
< >お仕事 >
< >いい感じにやっている >
< >
< >Netflix >
< >転スラ7話まで見た >
< >
>
>
可能ならなるべくdivは避けたい
意味を持たないタグ
div
span
< >:ブロック要素をひとかたまりの範囲として使う。単体では意味を持たない。
< >:インライン要素(テキスト)をひとつの範囲として定義する。
単体では意味を持たない。
・先に思考停止になりやすいタグについて説明
・スタイルを当てるには便利だけど、意味を持たないので極力避けたい
Slide 26
Slide 26 text
グループを分けるタグ
p
ul
ol
li
hr
blockquote
< >:ひとつの段落を表す
< >:順序のないリスト
< >:順序のあるリスト
< >:リスト内の子要素(項目)としてつかう
< >:テーマなどの区切りとしてつかう。いわゆる罫線。
< >:引用や転載されたテキスト。
Slide 27
Slide 27 text
テキストの意味によるタグ1
b
strong
i
em
small
big
< >:注意を惹きたいけど、特に重要でないテキスト。太字になる。
< >:強い重要性、緊急性のあるテキスト。太字になる。
< >:技術用語や外国語のフレーズなど、他と区別したいテキスト。イタリック体。
< >:強調したいテキスト。イタリック体。
< >:著作権表示や法的表記のような、注釈や小さく表示されるテキスト。
< >:なくなったタグ。フォントサイズが大きくなる
Slide 28
Slide 28 text
テキストの意味によるタグ2
s
del
ins
q
cite
time
mark
< >:すでに適切または正確ではなくなった事柄を表現するテキスト。取り消し線。
< >:削除されたテキスト。取り消し線。とセットで使うことが多い
< >:文書に追加されたテキスト。とセットで使うことが多い
< >:短い引用のテキスト。段落が必要なら