SlideShare a Scribd company logo

UAスタイルシートと リセットCSS

2105/08/30 Back to Basics

1 of 62
Download to read offline
UAスタイルシートと
リセットCSS
Tomoki Kubo
株式会社まぼろし

マークアップエンジニア

ブログ: KOJIKA17

Adobe Creative Stationにて、Emmetの連載中
もくじ
• UAスタイルシート

- UAスタイルシートの基本

- モダンブラウザのUAスタイルシート
• リセットCSS

- 全称セレクタ

- Reset CSS

- Normalize.css

- リセットCSS と Normalize.css
• まとめ
UAスタイルシート
Webサイトの表示に関わるスタイルシート
1. User Agent Style Sheets
2. Cascading Style Sheets
(User Style Sheets)
UAスタイルシートと リセットCSS

Recommended

第10回勉強会 CSS設計について
第10回勉強会 CSS設計について第10回勉強会 CSS設計について
第10回勉強会 CSS設計についてtakumaro web
 
css基本。
css基本。css基本。
css基本。web12
 
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法Kenji Karahashi
 
CSS設計のお勉強
CSS設計のお勉強CSS設計のお勉強
CSS設計のお勉強MarlboroLand
 
シラサギ勉強会1201
シラサギ勉強会1201シラサギ勉強会1201
シラサギ勉強会1201okusakazuya
 

More Related Content

Viewers also liked

HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2michaeljm007
 
background-(image|size) の深みへようこそ
background-(image|size) の深みへようこそbackground-(image|size) の深みへようこそ
background-(image|size) の深みへようこそShota Kubota
 
フリーランスデザイナーとクライアントとのつきあい方
フリーランスデザイナーとクライアントとのつきあい方フリーランスデザイナーとクライアントとのつきあい方
フリーランスデザイナーとクライアントとのつきあい方kenji goto
 
CSS設計とデザインとの距離
CSS設計とデザインとの距離CSS設計とデザインとの距離
CSS設計とデザインとの距離Manabu Yasuda
 
デザインしないデザイナーになる
デザインしないデザイナーになるデザインしないデザイナーになる
デザインしないデザイナーになるkenji goto
 
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計コンポーネント指向と余白の設計
コンポーネント指向と余白の設計Manabu Yasuda
 
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?Minoru Yokomichi
 

Viewers also liked (8)

HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2
 
background-(image|size) の深みへようこそ
background-(image|size) の深みへようこそbackground-(image|size) の深みへようこそ
background-(image|size) の深みへようこそ
 
フリーランスデザイナーとクライアントとのつきあい方
フリーランスデザイナーとクライアントとのつきあい方フリーランスデザイナーとクライアントとのつきあい方
フリーランスデザイナーとクライアントとのつきあい方
 
Review the OOCSS
Review the OOCSSReview the OOCSS
Review the OOCSS
 
CSS設計とデザインとの距離
CSS設計とデザインとの距離CSS設計とデザインとの距離
CSS設計とデザインとの距離
 
デザインしないデザイナーになる
デザインしないデザイナーになるデザインしないデザイナーになる
デザインしないデザイナーになる
 
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
 
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
 

Similar to UAスタイルシートと リセットCSS

悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャMayu Kimura
 
カスタムCSSについて
カスタムCSSについてカスタムCSSについて
カスタムCSSについてSatoru Shinmura
 
CSS勉強会(第1回)
CSS勉強会(第1回)CSS勉強会(第1回)
CSS勉強会(第1回)Bao Linh Le
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Yasuhito Yabe
 
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編ksimoji
 
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレMuyuu Fujita
 
シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26Yu Ito
 
Qlik Replicateでのタスクの定義と管理
Qlik Replicateでのタスクの定義と管理Qlik Replicateでのタスクの定義と管理
Qlik Replicateでのタスクの定義と管理QlikPresalesJapan
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目Takashi Endo
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法decode2016
 
20130225 pronet study
20130225 pronet study20130225 pronet study
20130225 pronet studySix Apart
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)Shin Takeuchi
 

Similar to UAスタイルシートと リセットCSS (20)

悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
CSS3がやってきた
CSS3がやってきたCSS3がやってきた
CSS3がやってきた
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
カスタムCSSについて
カスタムCSSについてカスタムCSSについて
カスタムCSSについて
 
カスタムCSSについて
カスタムCSSについてカスタムCSSについて
カスタムCSSについて
 
CSS勉強会(第1回)
CSS勉強会(第1回)CSS勉強会(第1回)
CSS勉強会(第1回)
 
about CSS3 vol.2
about CSS3 vol.2about CSS3 vol.2
about CSS3 vol.2
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
 
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
 
シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26
 
Css2
Css2Css2
Css2
 
Qlik Replicateでのタスクの定義と管理
Qlik Replicateでのタスクの定義と管理Qlik Replicateでのタスクの定義と管理
Qlik Replicateでのタスクの定義と管理
 
シークレット・オブ・CSSシークレット改訂版
シークレット・オブ・CSSシークレット改訂版シークレット・オブ・CSSシークレット改訂版
シークレット・オブ・CSSシークレット改訂版
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
 
First sass
First sassFirst sass
First sass
 
20130225 pronet study
20130225 pronet study20130225 pronet study
20130225 pronet study
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
 

More from 知己 久保

ラクするCSSツール
ラクするCSSツールラクするCSSツール
ラクするCSSツール知己 久保
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ知己 久保
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則知己 久保
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015知己 久保
 
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ
知己 久保
 
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~知己 久保
 

More from 知己 久保 (7)

L
LL
L
 
ラクするCSSツール
ラクするCSSツールラクするCSSツール
ラクするCSSツール
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

 
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
 

Recently uploaded

解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHubK Kinzal
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfMatsushita Laboratory
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)Kanta Sasaki
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんtoshinori622
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdfAyachika Kitazaki
 
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishinMakoto Mori
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227ssuserf8ea02
 

Recently uploaded (8)

解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
 
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227
 

UAスタイルシートと リセットCSS