鲍础スタイルシートと リセットCSS
- 2. Tomoki Kubo 株式会社まぼろし? マークアップエンジニア? ブログ: KOJIKA17? Adobe Creative Stationにて、Emmetの連載中
- 3. もくじ ? 鲍础スタイルシート? - 鲍础スタイルシートの基本? - モダンブラウザの鲍础スタイルシート ? リセットCSS? - 全称セレクタ? - Reset CSS? - Normalize.css? - リセットCSS と Normalize.css ? まとめ
- 4. 鲍础スタイルシート
- 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. 鲍础スタイルシートの見本 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? 鲍础スタイルシートに新要素の記述がまだない
- 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 ? 鲍础スタイルシートを生かすことを目的とした 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. まとめ ? 鲍础スタイルシートは、HTMLの変化が出やすい ? Rest CSSやNormalize.cssを重複して? 読んでいなければ、なんでもいいと思う
- 62. ありがとうございました。