by superruuuun

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の引き出しを増やす CSSの役割を理解する CSSを管理する

Slide 4

Slide 4 text

今日話す割合

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

HTMLって？ Hyper Text Markup Language

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

HTMLとCSSの歴史 1990 WWWの開発 HTMLの使用開始 title cite HTMLの起源は、人にしか理解できないテキストの羅列にコンピュータが理解できる目印をつけることで情報を検索しやすくすること研究者たちの間で、研究結果の情報共有における課題を解決するために編み出されたツール論文同士をハイパーリンク（=リンク）を含むハイパーテキストでつなぎ、文書をマークアップ（コンピューターが理解できる意味をもたせる）することによって文書構造をコンピューターに理解させる → 文書が検索しやすく / 見つけられやすくなる

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

HTMLとCSSの歴史 1990 1993 1995 WWWの開発画像も利用可フォーム導入 HTMLの使用開始 HTML1.0 HTML2.0 閲覧者側からの情報入力・送信もできるように

Slide 15

Slide 15 text

HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発画像も利用可フォーム導入　Style 装飾可 HTMLの使用開始 HTML1.0 HTML2.0 HTML3.2

Slide 16

Slide 16 text

文書の見た目の装飾が可能に

おはよう

肉じゃが食べたい

html output おはよう肉じゃが食べたい

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発画像も利用可フォーム導入　Style 装飾可 HTMLの使用開始 HTML1.0 HTML2.0 HTML3.2 CSS Level 1 フォンカラテキスボックス

Slide 19

Slide 19 text

HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発画像も利用可フォーム導入　Style 装飾可 CSSとの切り離し HTMLの使用開始 HTML1.0 HTML2.0 HTML3.2 CSS Level 1 HTML4.0

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HTMLとCSSの歴史つづき 2000年代 2011 HTML4.0 テーブルレイアウトの頻出 CSS Level 2.1 スタイルは外部CSSファイルに切り出す動きが活発化

Slide 22

Slide 22 text

HTMLとCSSの歴史つづき 2000年代 2011 2014 HTML4.0 HTML5.0 テーブルレイアウトの頻出さらに豊富なタグが策定される CSS Level 2.1 スタイルは外部CSSファイルに切り出す動きが活発化 HTMLコードの見通し◎ HTMLは本来のタグの役割の上でマークアップすべき（セマンティックマークアップ）

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の引き出しを増やす CSSの役割を理解する CSSを管理する

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

se> di> bdo>

vas> <

figure>

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

abbr: 略語要素

Slide 37

Slide 37 text

へええ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

は、もったいない！

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0 small 0 detail6 0 summar2 0 timE 0 progress

Slide 48

Slide 48 text

文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0 small detail5 summar1 timA 0 0 0 0 progress

Slide 49

Slide 49 text

文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0 small 0 detail6 0 summar2 0 timE 0 progress

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

こんなこと、あるかも。

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

こんなこと、あるかも。

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

悩んだ時は、MDN!!!

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

例えば、 time 要素

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

リッチスニペットの種類

Slide 70

Slide 70 text

リッチスニペットの種類

Slide 71

Slide 71 text

多くは、構造化データを必要とする HTMLの head タグ内に、必要な情報を script タグで埋め込む html The Adventures of Kira and Morrison { "@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

Slide 72

Slide 72 text

1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の引き出しを増やす CSSの役割を理解する CSSを管理する

Slide 73

Slide 73 text

3 CSSの役割を理解する

Slide 74

Slide 74 text

CSSって？ Cascading Style Sheet

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

3 CSSの役割を理解する

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

クックパッド

肉じゃが

材料

牛肉

じゃがいも

作り方

野菜の皮を剥く

材料を切る

html output ブラウザはこれで十分わかるし、まあ人も理解できる

Slide 85

Slide 85 text

でも人はこっちの方が認識しやすいし、なんか楽しいお料理レシピサイト肉じゃが

クックパッド

肉じゃが

材料

牛肉

じゃがいも

作り方

野菜の皮を剥く

材料を切る

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の引き出しを増やす CSSの役割を理解する CSSを管理する

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の引き出しを増やす CSSの役割を理解する CSSを管理する coming soon...!!! まとめます

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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