Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
一歩踏み込むHTML&CSS
superruuuun
April 28, 2021
Programming
0
460
一歩踏み込むHTML&CSS
superruuuun
April 28, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
130
Chart実装が楽になりました。
keisukeyamagishi
0
100
GitHub Actions を導入した経緯
tamago3keran
1
420
競プロのすすめ
uya116
0
650
ドメインモデル方式のクラス設計 座談会
masuda220
PRO
3
1k
Android Tools & Performance
takahirom
1
420
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
cohalz
1
820
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
100
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.6k
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
180
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
120
Featured
See All Featured
Navigating Team Friction
lara
175
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.3k
Become a Pro
speakerdeck
PRO
3
830
Producing Creativity
orderedlist
PRO
333
37k
Practical Orchestrator
shlominoach
178
8.6k
GraphQLの誤解/rethinking-graphql
sonatard
27
6.5k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Building Adaptive Systems
keathley
25
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
126
8.5k
Transcript
一歩ふみこむ 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とCSSの歴史 1990 1993 1995 1997 WWWの開発 画像も利用可 フォーム導入 Style 装飾可
HTMLの 使用開始 HTML1.0 HTML2.0 HTML3.2 CSS Level 1 フォン カラ テキス ボックス
HTMLとCSSの歴史 1990 1993 1995 1997 WWWの開発 画像も利用可 フォーム導入 Style 装飾可
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 の役割 検索効率、 アクセシビリティの向上 文書構造の定義 文書を理解するための 視覚的な補助 スタイルの定義
1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の
引き出しを増やす CSSの役割を 理解する 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
文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0
small detail5 summar1 timA 0 0 0 0 progress
文書構造を表すHTML要素 0 h1...h" 0 ! 0 stron% 0 labe 0
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の活用 )" 要素の種類を知 #" 使い方を把握す " 選択力を磨く
HTMLをきちんと書くことのメリット 文字の羅列以上の意味を 文書に持たせることができ 検索性があがる •••••• •••••• •••••• ??? •••••• 重要ワード!
•••••• これはリンク! •••••• ここはフッター!
はみだしコラム リッチスニペットにも効果的
はみだしコラム リッチスニペットって?
None
例えば、 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
1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の
引き出しを増やす CSSの役割を 理解する CSSを 管理する
3 CSSの役割を 理解する
CSSって? Cascading Style Sheet
CSSって? Cascading Style Sheet スタイルのシートです。 継承される
CSSって? Cascading Style Sheet スタイルのシートです。 継承される
3 CSSの役割を 理解する
CSSの役割 文書の内容を伝わりやすく、 情緒感のあるものにするために。
None
デザインの 機能È 情緒性 について触れられている本
“例えばスタバの紙コップ。飲みやすく持ちやすくなって いる一方で、外観はおしゃれでスマートです。例えば自 動車のデザイン。より早くより安全であるように設計さ れていますが、同時にエクステリア・インテリアは高級 感やスポーティを感じられるよう演出されています。 このようにデザインとはより分かりやすくさせる・便利 にさせる機能性と、それに触れたユーザの感情に訴え何 かしらの機微や印象をあたえる情緒性があるのではない か、これをウェブに応用し体系化したらどうか.....、と 考えたのが本書籍の大きな特徴です。
「Webデザインの思考法」 著者 金 成奎 さんnote https://note.com/seikei_k in/n/n4be27483ea7fhttps ://note.com/seikei_kin/n/ n4be27483ea7f
CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成
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の役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成
こんなサイト見たことありますか?
None
None
雰囲気・情緒がどうしても似てくる 年代によっては懐かしい気分にもなる 阿部さんのサイトはファンの方が作ってくださったものを事務所がそのまま公式のものとして使ってらっしゃるそうです ️
ブランド・情緒・雰囲気 銀行のサイトの中でも、それぞれに個性が
CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成
CSSの役割 視覚的な情報伝達 / 認識補助 ただ、あくまで視覚的な補助でしかないことは きちんと把握するのが大事 まずは、伝えるべき情報の整理から。
CSSよりHTML, HTMLより言葉が先行する 情報設計 文書構造 デザイン
1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の
引き出しを増やす CSSの役割を 理解する CSSを 管理する
4 CSSを 管理する coming soon...!!!
1 3 2 4 歴史からひもとく HTML / CSS の役割 HTML活用の
引き出しを増やす CSSの役割を 理解する CSSを 管理する coming soon...!!! まとめます
HTML / CSS の責務 検索効率、 アクセシビリティの向上 文書構造の定義 視覚的な補助 スタイルの定義
HTMLの活用 )" 要素の種類を知 #" 使い方を把握す " 選択力を磨く
CSSの役割 機能的役割 視覚的な 文書構造の 認識補助 情緒的役割 雰囲気・ブランド ・メッセージ性の 醸成
CSSよりHTML, HTMLより言葉が先行する 情報設計 文書構造 デザイン
本日お話したかったこと 機能性,情緒性を併せもつ 強力な補助線で あることを理解し、 情報伝達に役立てる! 文書構造を正しく マークアップする ことの意義を理解し、 それを実行する!
ありがとうございました!