Upgrade to Pro — share decks privately, control downloads, hide ads and more …

一歩踏み込むHTML&CSS

C454a40fe6743ec5a9af33a32d9d1f21?s=47 superruuuun
April 28, 2021
Programming
0
260

 一歩踏み込むHTML&CSS

C454a40fe6743ec5a9af33a32d9d1f21?s=128

superruuuun

April 28, 2021
Tweet

Other Decks in Programming

See All in Programming
636420dfa4bd120435447924327530f0?s=48 nichimu
0
130
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
250
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
1
530
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
920
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
160
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
PRO
2
200
F5ad19f79685973f5e93124e55ef4d15?s=48 kumasan3
0
260
C27317d1ebe4e4a01504acab9d87fe61?s=48 hellsquirrel
0
370
A45681c58220b58ca83a926b1be52e65?s=48 moriatsushi
2
2.4k
3a622e726b35fe71480166a16edcb66e?s=48 ariarijp
1
320
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
450
2f2c7576c7b5d763ad12f342b9afc3a1?s=48 akkyie
0
470

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.7k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
298
40k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
341
16k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
38k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
42
4.8k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k

Transcript

  1. 一歩ふみこむ HTML / CSS 2021/04/07 キッチハイク社内勉強会

  2. HTML と CSS の責務を理解し 普段の業務での対応に活かそう 本日お話したいこと

  3. 1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の

    引き出しを増やす CSSの役割を 理解する CSSを 管理する

  4. 今日話す割合

  5. 4 CSSを 管理する 今日話す割合 今回は省きました。 まだまだ勉強中なので、 フロントエンド勉強会等で 深堀りしたいです...!!!

  6. 1 歴史からひもとく HTML / CSS の役割

  7. HTMLって？ Hyper Text Markup Language

  8. HTMLって？ Hyper Text Markup Language ハイパーテキストマークアップ ランゲージ

  9. HTMLって？ Hyper Text Markup Language を ハイパーテキスト する マークアップ です

    Language

  10. HTMLとCSSの歴史 1990 WWWの開発 HTMLの 使用開始

  11. HTMLとCSSの歴史 1990 WWWの開発 HTMLの 使用開始 研究者たちの間で、研究結果の情報共有における課題を解決するために編 み出された ツール 論文同士をハイパーリンク（=リンク）を含むハイパーテキストでつなぎ、 文書をマークアップ（コンピューターが理解できる意味をもたせる）する

    ことによって文書構造をコンピューターに理解させる → 文書が検索しやすく / 見つけられやすくなる title cite

  12. HTMLとCSSの歴史 1990 WWWの開発 HTMLの 使用開始 title cite HTMLの起源は、人にしか理解できないテキストの羅列に コンピュータが理解できる目印をつけることで 情報を検索しやすくすること

    研究者たちの間で、研究結果の情報共有における課題を解決するために編 み出された ツール 論文同士をハイパーリンク（=リンク）を含むハイパーテキストでつなぎ、 文書をマークアップ（コンピューターが理解できる意味をもたせる）する ことによって文書構造をコンピューターに理解させる → 文書が検索しやすく / 見つけられやすくなる

  13. HTMLとCSSの歴史 1990 1993 1995 WWWの開発 画像も利用可 フォーム導入 HTMLの 使用開始 HTML1.0

    HTML2.0

  14. HTMLとCSSの歴史 1990 1993 1995 WWWの開発 画像も利用可 フォーム導入 HTMLの 使用開始 HTML1.0

    HTML2.0 閲覧者側からの 情報入力・送信も できるように

  15. HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発 画像も利用可 フォーム導入 　Style 装飾可

    HTMLの 使用開始 HTML1.0 HTML2.0 HTML3.2

  16. 文書の見た目の装飾が可能に <div style=” width: 500px; border: 5px solid gray”> <h1

    style=”color: white; font-size: 20px;”>おはよう </h1> <p>肉じゃが食べたい</p> </div> html output おはよう 肉じゃが食べたい

  17. Structure Presentation vs 文書構造を定義するHTMLが、装飾も定義するのっておかしくない？

  18. HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発 画像も利用可 フォーム導入 　Style 装飾可

    HTMLの 使用開始 HTML1.0 HTML2.0 HTML3.2 CSS Level 1 ” フォン‰ ” カラƒ ” テキス‰ ” ボックス

  19. HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発 画像も利用可 フォーム導入 　Style 装飾可

    CSSとの 切り離し HTMLの 使用開始 HTML1.0 HTML2.0 HTML3.2 CSS Level 1 HTML4.0

  20. HTMLとCSSの歴史 つづき 2000年代 HTML4.0 テーブルレイアウト の頻出

  21. HTMLとCSSの歴史 つづき 2000年代 2011 HTML4.0 テーブルレイアウト の頻出 CSS Level 2.1

    スタイルは外部CSSファイルに 切り出す動きが活発化

  22. HTMLとCSSの歴史 つづき 2000年代 2011 2014 HTML4.0 HTML5.0 テーブルレイアウト の頻出 さらに豊富な

    タグが策定される CSS Level 2.1 スタイルは外部CSSファイルに 切り出す動きが活発化 HTMLコードの見通し◎ HTMLは本来のタグの役割の上でマークアップすべき （セマンティックマークアップ）

  23. HTMLとCSSの歴史 つづき 2000年代 2011 2014 2017 HTML4.0 HTML5.2 HTML5.0 テーブルレイアウト

    の頻出 さらに豊富な タグが策定される CSS Level 2.1 スタイルは外部CSSファイルに 切り出す動きが活発化 HTMLコードの見通し◎ HTMLは本来のタグの役割の上でマークアップすべき （セマンティックマークアップ）

  24. HTMLとCSSの歴史 つづき 2000年代 2011 2014 2017 HTML4.0 HTML5.2 HTML5.0 テーブルレイアウト

    の頻出 さらに豊富な タグが策定される CSS Level 2.1 スタイルは外部CSSファイルに 切り出す動きが活発化 HTMLコードの見通し◎ HTMLは本来のタグの役割の上でマークアップすべき （セマンティックマークアップ） これ以降は機能の追加がモジュールという形で分割実装されており、 ユーザーエージェントは各モジュールに対応するか否かを自由に 選べるようになっている

  25. HTML / CSS の役割 検索効率、 アクセシビリティの向上 文書構造の定義 文書を理解するための 視覚的な補助 スタイルの定義

  26. 1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の

    引き出しを増やす CSSの役割を 理解する CSSを 管理する

  27. 2 HTML活用の 引き出しを増やす

  28. HTMLをきちんと書くことのメリット 文字の羅列以上の意味を 文書に持たせることができ 検索性があがる •••••• •••••• •••••• ??? •••••• 重要ワード！

    •••••• これはリンク！ •••••• ここはフッター！

  29. HTMLをきちんと書くことのメリット U 構造が理解しやすく修正を加えやすい
 コードにな1 U ブラウザに適切な情報を渡せ1 U アクセシビリティの向上

  30. HTMLの活用 より詳細で 文書構造に沿ったHTMLにするために

  31. HTMLの活用 HTML 要素の引き出しを増やして 活用しよう

  32. HTMLの活用 )" 要素の種類を知 #" 使い方を把握す " 選択力を磨く

  33. HTMLの活用 使い方を把握す 選択力を磨く 1& 要素の種類を知 '& &

  34. se> di> bdo> <blockquote> <body> <br> <button> vas> < <div>

    <dl> <dt> <em> <embed> <fieldset> <figcaption> figure> <m <meter> <nav> <noscript> <object> <ol> <optgro <optio utp 現在のHTML要素種類数は 116 ＊4/7時点MDN目視調べ

  35. 元々の論文検索時代の名残もあってか 文書表現に特化した要素も多く残る

  36. abbr: 略語要素

  37. へええ

  38. では、Webページに重要な要素は？ 文書構造だけでなく 視覚要素も加わってくる

  39. Webページは、レイアウトも大事

  40. どのブロックに、何の役割をもたせるか main? aside?

  41. とりあえず、div 使っておけばいいか...

  42. は、もったいない！

  43. 使える要素を、活用しよう！

  44. いろんな要素の紹介に留めますが、 気になったらMDNで 検索してみてください

  45. レイアウト構造を表すHTML要素 3 heade! 3 foote! 3 sectio 3 articl) 3

    na 3 aside

  46. レイアウト構造を表すHTML要素 3 heade! 3 foote! 3 sectio 3 articl) 3

    na 3 aside <nav>

  47. 文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0

    small 0 detail6 0 summar2 0 timE 0 progress

  48. 文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0

    small detail5 summar1 timA 0 0 0 0 progress

  49. 文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0

    small 0 detail6 0 summar2 0 timE 0 progress

  50. 表示する要素の形態を表すHTML要素 % im' % ifram" % vide % audio

  51. HTMLの活用 要素の種類を知 選択力を磨く %( )( 使い方を把握す (

  52. こんなこと、あるかも。

  53. ナビゲーションてフッターにもあるよな... フッターにもつけるべき？

  54. 信頼のおけるソースを参照しに いこう

  55. nav: ナビゲーションセクション要素 https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav

  56. こんなこと、あるかも。

  57. 汎用的に使える section は どのように使うべき？

  58. section: 汎用セクション要素 https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

  59. 悩んだ時は、MDN!!!

  60. HTMLの活用 要素の種類を知 使い方を把握す 0( &( '( 選択力を磨く

  61. 経験積む！ いろいろなサイトのソースを見る！ ぜひセッションしましょう

  62. HTMLの活用 )" 要素の種類を知 #" 使い方を把握す " 選択力を磨く

  63. HTMLをきちんと書くことのメリット 文字の羅列以上の意味を 文書に持たせることができ 検索性があがる •••••• •••••• •••••• ??? •••••• 重要ワード！

    •••••• これはリンク！ •••••• ここはフッター！

  64. はみだしコラム リッチスニペットにも効果的

  65. はみだしコラム リッチスニペットって？

  66. None

  67. 例えば、 time 要素

  68. リッチスニペットの効果 2 UXアップによるアクセス率上 2 検索結果の正確性アップ

  69. リッチスニペットの種類

  70. リッチスニペットの種類

  71. 多くは、構造化データを必要とする HTMLの head タグ内に、 必要な情報を script タグで埋め込む html <head> <title>The

    Adventures of Kira and Morrison</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Event", "name": "南魚沼の日本酒を飲み比べよう", "startDate": "2025-07-21T19:00-05:00", "endDate": "2025-07-21T23:00-05:00", "eventAttendanceMode": "https://schema.org/OfflineEvent", "eventStatus": "https://schema.org/EventScheduled", "location": { "@type": "Place", "name": "Snickerpark Stadium", "address": { "@type": "PostalAddress", "streetAddress": "100 West Snickerpark Dr", https://developers.google.com/search/docs/gu ides/search-gallery?hl=ja

  72. 1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の

    引き出しを増やす CSSの役割を 理解する CSSを 管理する

  73. 3 CSSの役割を 理解する

  74. CSSって？ Cascading Style Sheet

  75. CSSって？ Cascading Style Sheet スタイルのシートです。 継承される

  76. CSSって？ Cascading Style Sheet スタイルのシートです。 継承される

  77. 3 CSSの役割を 理解する

  78. CSSの役割 文書の内容を伝わりやすく、 情緒感のあるものにするために。

  79. None

  80. デザインの  機能È  情緒性 について触れられている本

  81. “例えばスタバの紙コップ。飲みやすく持ちやすくなって いる一方で、外観はおしゃれでスマートです。例えば自 動車のデザイン。より早くより安全であるように設計さ れていますが、同時にエクステリア・インテリアは高級 感やスポーティを感じられるよう演出されています。 このようにデザインとはより分かりやすくさせる・便利 にさせる機能性と、それに触れたユーザの感情に訴え何 かしらの機微や印象をあたえる情緒性があるのではない か、これをウェブに応用し体系化したらどうか.....、と 考えたのが本書籍の大きな特徴です。

    「Webデザインの思考法」 　著者 金 成奎 さんnote https://note.com/seikei_k in/n/n4be27483ea7fhttps ://note.com/seikei_kin/n/ n4be27483ea7f

  82. CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成

  83. CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成

  84. お料理レシピサイト 肉じゃが 材料 ・牛肉 ・じゃがいも 作り ÉÈ 野菜の皮を剥Â !È 材料を切る

    <h1>クックパッド</h1> <h2>肉じゃが</h2> <ul>材料</ul> <li>牛肉</li> <li>じゃがいも</li> <ol>作り方</ol> <li>野菜の皮を剥く</li> <li>材料を切る</li> html output ブラウザはこれで十分わかるし、まあ人も理解できる

  85. でも 人はこっちの方が認識しやすいし、 なんか楽しい お料理レシピサイト 肉じゃが <h1>クックパッド</h1> <h2>肉じゃが</h2> <ul>材料</ul> <li>牛肉</li> <li>じゃがいも</li>

    <ol>作り方</ol> <li>野菜の皮を剥く</li> <li>材料を切る</li> html output 材料 ˆ 牛† ˆ じゃがいも —f 野菜の皮を剥‘ ”f 材料を切る 作り方 情報構造を 理解しやすくする要素が加わw ˆ q ˆ 余o ˆ 文字のジャンプ率...

  86. CSSの役割 視覚的な情報伝達 / 認識補助

  87. CSSの役割 視覚的な情報伝達 / 認識補助 ただ、あくまで視覚的な補助でしかないことは きちんと把握するのが大事

  88. はみだしコラム 聴覚的認識補助 スクリーンリーダー 触覚的認識補助 点字ディスプレイ

  89. CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成

  90. こんなサイト見たことありますか？

  91. None
  92. None

  93. 雰囲気・情緒がどうしても似てくる 年代によっては懐かしい気分にもなる 阿部さんのサイトはファンの方が作ってくださったものを事務所がそのまま公式のものとして使ってらっしゃるそうです ️

  94. ブランド・情緒・雰囲気 銀行のサイトの中でも、それぞれに個性が

  95. CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成

  96. CSSの役割 視覚的な情報伝達 / 認識補助 ただ、あくまで視覚的な補助でしかないことは きちんと把握するのが大事 まずは、伝えるべき情報の整理から。

  97. CSSよりHTML, HTMLより言葉が先行する 情報設計 文書構造 デザイン

  98. 1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の

    引き出しを増やす CSSの役割を 理解する CSSを 管理する

  99. 4 CSSを 管理する coming soon...!!!

  100. 1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の

    引き出しを増やす CSSの役割を 理解する CSSを 管理する coming soon...!!! まとめます

  101. HTML / CSS の責務 検索効率、 アクセシビリティの向上 文書構造の定義 視覚的な補助 スタイルの定義

  102. HTMLの活用 )" 要素の種類を知 #" 使い方を把握す " 選択力を磨く

  103. CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成

  104. CSSよりHTML, HTMLより言葉が先行する 情報設計 文書構造 デザイン

  105. 本日お話したかったこと 機能性,情緒性を併せもつ 強力な補助線で あることを理解し、 情報伝達に役立てる！ 文書構造を正しく マークアップする ことの意義を理解し、 それを実行する！

  106. ありがとうございました！