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

一歩踏み込むHTML&CSS

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

 一歩踏み込むHTML&CSS

C454a40fe6743ec5a9af33a32d9d1f21?s=128

superruuuun

April 28, 2021
Tweet

Other Decks in Programming

See All in Programming
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
130
Chart実装が楽になりました。
622c25352cca9db43a10c0f3d4f73b75?s=48 keisukeyamagishi
0
100
GitHub Actions を導入した経緯
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
420
競プロのすすめ
3a10a8f9ae25b2eb5bf3579dd3141dd8?s=48 uya116
0
650
ドメインモデル方式のクラス設計　座談会
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
3
1k
Android Tools & Performance
7166bc2cbc462ab5fd1987a76d0fe709?s=48 takahirom
1
420
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
1370bcc20551cb822f51b212201de303?s=48 kanamasa
2
1.2k
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
5e1d0f7877241ad4447c6611d9a51fd7?s=48 cohalz
1
820
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
100
JSのウェブフレームワークで高速なルーターを実装する方法
6e34bfefc3edbe746ac7a71ca6635309?s=48 usualoma
1
1.6k
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
E72f241475dfe632c6b1666debc16e8a?s=48 nearme_tech
0
120

Featured

See All Featured
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
19
1.4k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
447
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
10
3.3k
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
830
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
27
6.5k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
126
8.5k

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. ありがとうございました！