anysense tyankatsu

1. マークアップの
おまじないをしっかり理解する
とりあえずで済ませてない？

2. Tyankatsu
•フロントエンドエンジニアになりたいデザイナー
•ほうれん草⼤好き
•gulp⼤好き
•jQuery飽きた
•nativeJS勉強中
•https://github.com/tyankatsu0105
•https://twitter.com/tyankatsu5
•https://anysense.co.jp/

3. おまじない⼀覧
テキストはpタグで囲う
imgはfigureで囲う
時間はtimeタグ
クリックできる箇所はaタグにする
テーブルはtableタグ

4. テキストは
pタグで囲う

5. テキストはpタグで囲う

6. テキストはpタグで囲う

7. テキストはpタグで囲う
「P」aragraph：段落
p要素は段落を表す。
https://momdo.github.io/html5/grouping-content.html#the-p-
element

8. テキストはpタグで囲う
段落ってことは
2⽂以上ありそう

9. テキストはpタグで囲う
もしかして、
W3Cが指定している
段落って、
⽇本⼈が思う段落と
違うのでは？

10. テキストはpタグで囲う
A paragraph is typically a run of
phrasing content that forms a block of
text with one or more sentences that
discuss a particular topic, as in
typography, but can also be used for
more general thematic grouping.
https://dev.w3.org/html5/spec-preview/content-
models.html#paragraph

11. テキストはpタグで囲う
わっかんね！！

12. テキストはpタグで囲う
段落とは、通常、特定の話題を扱う1つ以
上の⽂を伴うテキストのブロックを形成す
るフレージング・コンテントの連なりのこ
とで、印刷における段落と同様です。
http://www.html5.jp/tag/models/index.html#paragraph

13. テキストはpタグで囲う
1⽂でも段落になる。
だったら
テキストは全部pタグ?

14. テキストはpタグで囲う
そうとは限らない

15. テキストはpタグで囲う
テキストを必ず
タグで囲うルールはない

16. テキストはpタグで囲う
暗黙の段落
がどうやら
関係ありそう

17. テキストはpタグで囲う
フレージング・コンテンツが通常のセク
ションやセクショニング・ルートの直下に
置かれた場合、その直前から暗黙の段落が
始まる
http://webcre8.jp/investigate/html-implied-
specifications.html#title2

18. テキストはpタグで囲う
つまり、
pタグは明⽰的に段落を
指定しているのであって、暗黙
の段落がある限り、
テキストは絶対pタグで囲う
ということではない。

19. テキストはpタグで囲う
補⾜
狭義のHTML5として、
「Semantic Elements」が
追加されているので、適したタグ
をつけよう。
なんでもpタグではないぞ！！

20. imgは
figureで囲う

21. imgはfigureで囲う

22. imgはfigureで囲う
画像がでたらとりあえず
figureで囲おう！

23. imgはfigureで囲う
ちょっと待て！！！！

24. imgはfigureで囲う
ふつう <figure> は画像、イラスト、グ
ラフ、コードの断⽚など、⽂書の本⽂の流
れから参照されるものの、本⽂の流れに影
響を与えることなく、⽂書のほかの部分や
付録に移動することが可能なものに⽤いま
す。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/
figure

25. imgはfigureで囲う
画像に使うの
合ってんじゃん

26. imgはfigureで囲う
ちょっと待て！！！！

27. imgはfigureで囲う
ふつう <figure> は画像、イラスト、グ
ラフ、コードの断⽚など、⽂書の本⽂の流
れから参照されるものの、本⽂の流れに影
響を与えることなく、⽂書のほかの部分や
付録に移動することが可能なものに⽤いま
す。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/
figure

28. imgはfigureで囲う
つまり
こういうこと

29. imgはfigureで囲う
figureを抜き出しても抜かれた側
には問題はない
figureを抜き出してもfigure単体
で⾃⼰完結してないといけない

30. imgはfigureで囲う
抜き出してみました

31. imgはfigureで囲う

32. imgはfigureで囲う

33. imgはfigureで囲う

34. imgはfigureで囲う

35. imgはfigureで囲う
これは不正解
理由：抜き出しても意味分からない

36. imgはfigureで囲う
これは正解
理由：抜き出しても意味分かる

37. imgはfigureで囲う
補⾜
figureの中にのみ使えるfigcaption
は、絶対必要ではない。キャプショ
ンが盛り込まれている画像であれば、
figureの中にimgだけでも良いし、
figureでのマークアップは正解。
ここが詳しい→https://qiita.com/kyoyababa/items/
154953226358a0e833d7

38. 時間は
timeタグ

39. 時間はtimeタグ

40. 時間はtimeタグ
これは不正解

41. 時間はtimeタグ
この要素は計算を⾏えない特殊な⽇付に対
しては適切でなく、またグレゴリオ暦導⼊
前の⽇付に対して使⽤するべきではありま
せん
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

42. 時間はtimeタグ
「⽉」「⽇」は機械不可読

43. 時間はtimeタグ
正解パターンの
5⽉16⽇
の⼀例

44. 時間はtimeタグ
⾊々あるが
yyyy-mm-dd hh:mm:ss
のフォーマットが基本的
https://qiita.com/YusukeHirao/items/
6140a58a1dd1d5d60a7c
http://www.html5.jp/tag/elements/time.html

45. クリックできる
箇所はaタグにする

46. クリックできる箇所はaタグにする
aタグで要素を囲うと
カーソルがこうなる

47. クリックできる箇所はaタグにする
うわークリックできそう
（＾q＾）ｼﾞｭﾙﾘ

48. クリックできる箇所はaタグにする
でもそれ

49. クリックできる箇所はaタグにする
:hover{
cursor: pointer;
}

50. クリックできる箇所はaタグにする
だったら
違うタグでも良くね？

51. クリックできる箇所はaタグにする
そこで・・

52. クリックできる箇所はaタグにする
<button type=“button”>

53. クリックできる箇所はaタグにする
buttonの説明を
⾒てみる

54. クリックできる箇所はaタグにする
type 属性に button を指定したボタンに
は、既定の動作はなく、クリックするなど
しても何も起こりません。クライアントサ
イドスクリプトで要素にイベントを設定す
ることにより、操作時の挙動を設定するこ
とができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/
button

55. クリックできる箇所はaタグにする
噛み砕いてみる

56. クリックできる箇所はaタグにする
button type=“button”はボタン
である。ボタンであってそれ以外
でもそれ以上でもない
Javascriptの処理のトリガーにな
る

57. クリックできる箇所はaタグにする
つまり
<a href=“javascript:void(0)”>
にせずに
<button type=“button”>
にすればいい

58. クリックできる箇所はaタグにする

59. クリックできる箇所はaタグにする
クリックできるけど、
リンクではない箇所は
buttonでマークアップ
しよう

60. テーブルは
tableタグ

61. たぶん説明無理！！！
（時間）

62. html5.2で
dl直下にdivを置けるよう
になった

63. tableタグもいいけど
レスポンシブな時代
dlも視野に⼊れては？

64. 終わり