一歩踏み込むHTML&CSS

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

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

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

今日話す割合

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

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

HTMLって？ Hyper Text Markup Language

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

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

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

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

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

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

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

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

文書の見た目の装飾が可能に <div style=” width: 500px; border: 5px solid gray”> <h1
style=”color: white; font-size: 20px;”>おはよう </h1> <p>肉じゃが食べたい</p> </div> html output おはよう肉じゃが食べたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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目視調べ

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

abbr: 略語要素

へええ

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

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

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

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

は、もったいない！

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

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

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

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

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

small detail5 summar1 timA 0 0 0 0 progress

small 0 detail6 0 summar2 0 timE 0 progress

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

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

こんなこと、あるかも。

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

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

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

こんなこと、あるかも。

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

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

悩んだ時は、MDN!!!

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

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

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

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

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

例えば、 time 要素

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

リッチスニペットの種類

多くは、構造化データを必要とする 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

3 CSSの役割を理解する

CSSって？ Cascading Style Sheet

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

3 CSSの役割を理解する

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

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

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

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

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

でも人はこっちの方が認識しやすいし、なんか楽しいお料理レシピサイト肉じゃが <h1>クックパッド</h1> <h2>肉じゃが</h2> <ul>材料</ul> <li>牛肉</li> <li>じゃがいも</li>
<ol>作り方</ol> <li>野菜の皮を剥く</li> <li>材料を切る</li> html output 材料牛じゃがいも f 野菜の皮を剥 f 材料を切る作り方情報構造を理解しやすくする要素が加わw q 余o 文字のジャンプ率...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一歩踏み込むHTML&CSS

一歩踏み込むHTML&CSS

Other Decks in Programming

Featured

Transcript