UAスタイルシートと リセットCSS
- 2. Tomoki Kubo 株式会社まぼろし マークアップエンジニア ブログ: KOJIKA17 Adobe Creative Stationにて、Emmetの連載中
- 3. もくじ • UAスタイルシート - UAスタイルシートの基本 - モダンブラウザのUAスタイルシート • リセットCSS - 全称セレクタ - Reset CSS - Normalize.css - リセットCSS と Normalize.css • まとめ
- 4. UAスタイルシート
- 5. Webサイトの表示に関わるスタイルシート 1. User Agent Style Sheets 2. Cascading Style Sheets (User Style Sheets)
- 9. HTML = 意味付け スタイルシート = 見た目
- 11. head, title, meta, style, script要素も 意味付け
- 12. HTML（body要素は空） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style contenteditable="true"> * { display: block; } title { margin: 1em; color: #f00; } style { white-space: pre; } </style> </head> <body></body> </html>
- 13. ブラウザの表示
- 14. UAスタイルシートの見本 Default style sheet for HTML 4 http://www.w3.org/TR/CSS2/sample.html
- 20. 2009年頃 • Internet Explorer 8, Firefox 2 HTML5の新要素のDOMをうまく作れなかった • Firefox 3.x, Safari, Google Chrome UAスタイルシートに新要素の記述がまだない
- 21. 現在 もちろん、ばらつきがある
- 23. html5jグループにて 「IE11 でmain 要素のwidth,height 指定が 無視されるのはなぜでしょうか？」
- 28. 論理方向プロパティ • margin-start / margin-end • margin-before / margin-after • padding-start /padding-end • padding-before /padding-after
- 29. 論理方向プロパティ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. before after start end writing-mode: lr-tb;
- 31. モダンブラウザ h1要素の見た目
- 32. HTML <h1>Lv 1</h1> <section> <h1>Lv 2</h1> <section> <h1>Lv 3</h1> </section> </section>
- 33. ブラウザの表示
- 42. 全称セレクタ * { margin: 0; padding: 0; border: none; font-size: 100%; } すべての要素の値をまとめて指定できる 意図しない要素までリセットする可能性がある
- 43. Reset CSS • Eric Meyer’s "Reset CSS" 2.0 • Yahoo! (YUI 3) Reset CSS • HTML5 Doctor CSS Reset
- 45. Normalize.css • UAスタイルシートを生かすことを目的とした CSS • ブラウザのスタイルシートの差異を修正 • コード内のコメントに、詳細な説明が入って いる
- 49. Firefox 40が 2015年8月11日にリリース • <abbr>、<acronym> 要素に text-decoration プロパティが 使われるようになった • 具体的に、border-block-end: dotted 1px が text-decoration: dotted underline に置き換えられた • Google Chrome は border-bottom を使用している • Normalize.css が、修正対象になっている
- 52. Rest CSS と Normalize.css
- 53. 好きな方を使えば、 いいと思う
- 54. もし使い分けるなら
- 55. Nicolas Gallagher – Blog & Ephemera http://nicolasgallagher.com
- 61. まとめ • UAスタイルシートは、HTMLの変化が出やすい • Rest CSSやNormalize.cssを重複して 読んでいなければ、なんでもいいと思う
- 62. ありがとうございました。