Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

一歩踏み込むHTML&CSS

Avatar for superruuuun superruuuun
April 28, 2021
Programming
1.2k
0

 一歩踏み込むHTML&CSS

Avatar for superruuuun

superruuuun

April 28, 2021

Other Decks in Programming

See All in Programming
新卒PdEのリアル
Avatar for ryu ryu1013
1
480
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
120
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
160
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
130
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
480
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
5.7k
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
180
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
150
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
230
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
55
37k
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
770
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
520

Featured

See All Featured
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
360
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
510
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
300
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k

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