吐きそう.pdf

再アップロード

Transcript

1. お疲れさまです
2. 本日は貴重なお時間をいただき ありがとうございます。 へたくそな説明ですが よろしくお願いいたします。
3. さて
4. 本日は、
5. <section>と<div> について話します
6. まず
7. なぜ題材に <section>と<div> を選んだか をお伝えします
8. それは
9. <section>と<div> の違いが わからなかったから です
10. <section>とか<article>とか なんだかよくわからないし とりあえず<div>使って あとはCSSでかっこよく なってればいいじゃ〜ん
11. って思ってました
12. だめです
13. <section>と<div> の 違い は 重要です
14. ということで
15. 今日はそんな話を していきます
16. まず 話をわかりやすく するために
17. イメージの話 から
18. それでは
19. まずHTMLとは
20. H T M L ハイパー テキスト マークアップ ランゲージ
21. ランゲージ ＝ 言語
22. 言語っていうと 日本語／英語／中国語／フラン ス語／ドイツ語／イタリア語／ロ シア語…などなど
23. じゃあ
24. HTMLは誰と会話する 言語なのか？
25. 答え
26. HTMLは誰と会話する 言語なのか？
27. HTMLを使って コンピュータ君と 会話します。 （イメージの話です）
28. 会話を するとは？
29. サンプル 見せます
30. ←　　　　 エディタで 打ちました
31. ←　　　　 カレーの レシピ ぽいとわかる
32. ←　　　　 これを ブラウザで 見ます
34. ？
35. これはどういうことか というと
36. コンピュータ君に ちゃんと 伝わっていない ということです。
37. ここで 思い出してください
38. HTMLはコンピュータと 会話する言語でした
39. そこで！
40. HTMLを使って コンピュータ君に 話しかけてみようと 思います！
41. HTML 書きます
42. これを ブラウザで 見ると…
44. 伝わった！
45. こんな感じで HTMLを使うと ・文章のカタマリ ・タイトル、見出し 　小見出し、本文 などを コンピュータ君に 伝えることができる
46. ここで肝になってくるのが
47. セクショニングコンテンツ です
48. 教材の27ページに 書いてあります
50. ↓重要なのはこの4つ
51. これらが セクショニングコンテンツ です
52. この セクショニングコンテンツ を使って 文章の構造を コンピュータ君に伝えます
53. 使い方は そんなに難しくないです
54. 試しに
55. ← この文章は こういう構造だよ ってことを セクショニング コンテンツで 伝えていきます
56. まず、 <section>で 囲みます。 イメージとしては タイトルが及ぶ範囲 を囲む感じです。 言い換えると「章」 （カンペ）第1章材料、第2章手順
57. ← 次に、これは 「カレーのレシピ」 っていう １個の記事だよ～ ってときは 全体を<article>で 囲んだりします
58. セクショニングコンテンツは そんな感じで書きます
59. ちなみに
60. 模写してるNRIもN高も 文章構造を コンピュータ君に ちゃんと伝えています
61. どんな風に伝えているか わかりやすく見れる 便利なツールがあります
63. 試しにN高を見てみます
64. 試しにN高を見てみます
65. このページを
66. で
67. 見てみます
68. 結果の画像
69. 結果の画像 タイトル 見出し 小見出し ナビゲーション
70. こんな感じで、 模写をするときは 文章構造というものも 気にしてみてください
71. （間）
72. さてここからが 今日のミソです
73. セクショニングコンテンツ とか 文章構造がうんぬんかんぬん とか やってきましたが
75. これ<section>とか 使わないで 全部<div>でも 再現できるじゃん
76. って思いませんか
77. どういうことかというと
78. 試しに
79. divとh1だけ使いました
81. これをブラウザで見ます
83. 再現できた！
84. ということは
85. <section>とか<article>とか 使わなくても <div>だけで伝わるじゃん！
86. だったら
87. <section>とか<article>とか よくわかんないし
88. 面倒だし
89. やっぱ全部 <div>でいっか！
90. って思いませんか
91. めっちゃ 思います
92. はい
93. ここで復習です
94. HTMLは誰と会話する 言語？
95. 答え
96. HTMLは誰と会話する 言語？
97. HTMLはコンピュータと 会話する言語でした
98. ということで
99. ←　　　　　　　 （divとh1だけ） これが コンピュータ君に どう伝わっているの か
100. 確認します
101. さっきの便利ツール使います
103. ぶちこむ
104. 結果
106. ？
107. 本来ほしかった結果は
109. 比べます
110. divとh1だけ ほしかった結果 （全部タイトル） （見出しと小見出しある）
111. つまり
112. <div>だけでは コンピュータ君に 正しく伝わっていない
113. ってことです
114. コンピュータに 正しく伝えるためには
115. ちゃんとHTMLを書く 必要があります
116. ここで言う ちゃんとHTMLを書く とは
117. セクショニングコンテンツ （ article / aside / nav / section ） を使う ということです
118. divをsectionに変更
119. コンピュータ君への 伝わり方を 確認します
121. ぶちこむ
122. 結果
124. ちゃんと伝わりました！
125. よかったです
126. ということで
127. 面倒がらずに ちゃんとHTMLを 書きましょう
128. （間）
129. ちなみに （補足）
130. HTMLをちゃんと書くと いいことがあります
131. それは
132. SEO ってやつです
133. これは当たり前 っちゃー 当たり前の話なのですが
134. コンピュータ君に 正しく伝わっていない のであれば
135. 当然のことながら 検索エンジン君にも 正しく伝わっていません 検索エンジン君
136. どんなにCSSをがんばって すごくかっこいい デザインのページを 作ったとしても
137. 検索しても出てこない から 誰も見に来てくれない のは
138. かなしいです
139. CSSをがんばる前に まずは HTMLをちゃんと 書きましょう
140. 補足おわり
141. ということで
142. まとめに 入ります
143. <section>と<div>は 役割が違います
144. <section> で囲むと 文章構造を 伝えられる <div> で囲んでも 文章構造は 伝わらない
145. ちゃんと 使い分けていきましょう
146. 使い分けるコツとしては
147. 文章構造をつくるとき は <section>
148. で
149. デザインやレイアウトの ために囲みたいとき は <div>
150. てな感じです （私はそうしてます）
151. まぁ要するに
152. 最初から なんでもかんでも <div>に頼るのは だめってことです
153. さもないと
154. こういう悲劇が起きます
155. 繰り返しになりますが 模写をするときは 文章構造というものも 気にしてみてください
156. できれば 自分の書いたHTMLを で確認してみてください
157. そんな感じで
158. このLTが何かヒントになれば 幸いです
159. 以上です ありがとうございました