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

1. 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)

6. HTMLの見た目は、 UAスタイルシートが決めているにすぎない

7. HTML = 意味付けスタイルシート = 見た目

8. HTMLとスタイルシートは分離して考えましょう

9. head, title, meta, style, script要素も意味付け

10. 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>

11. ブラウザの表示

12. UAスタイルシートの見本 Default style sheet for HTML 4  http://www.w3.org/TR/CSS2/sample.html

13. 基本的に上下のmargin指定がついている

14. モダンブラウザの UAスタイルシート

15. HTML5の新要素の UAスタイルシートは?

16. 2009年頃 • Internet Explorer 8, Firefox 2  HTML5の新要素のDOMをうまく作れなかった • Firefox 3.x, Safari, Google Chrome  UAスタイルシートに新要素の記述がまだない

17. 現在もちろん、ばらつきがある

18. html5jグループにて「IE11 でmain 要素のwidth,height 指定が無視されるのはなぜでしょうか？」

19. display: block;以外も追加されている要素がある

20. margin-before?after?

21. 論理方向プロパティ • margin-start / margin-end • margin-before / margin-after • padding-start /padding-end • padding-before /padding-after

22. 論理方向プロパティ 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;

23. beforeafter start end 論理方向プロパティ writing-mode: tb-rl;

24. モダンブラウザ h1要素の見た目

25. HTML <h1>Lv 1</h1> <section> <h1>Lv 2</h1> <section> <h1>Lv 3</h1> </section> </section>

26. ブラウザの表示

27. h1要素の見た目はセクショニング・コンテンツの深度によって変わる

28. Firefox resource://gre-resources/html.css

29. WebKit html.css http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

30. アウトライン・アルゴリズムは視覚的にわかりやすくなっているだけ  HTMLとスタイルシートを混同しない

31. リセットCSS 各ブラウザの差異を埋める手法

32. リセットCSSの目的ブラウザ間の表示を統一させる

33. 全称セレクタ * { margin: 0; padding: 0; border: none; font-size: 100%; } すべての要素の値をまとめて指定できる意図しない要素までリセットする可能性がある

34. Reset CSS • Eric Meyer’s "Reset CSS" 2.0 • Yahoo! (YUI 3) Reset CSS • HTML5 Doctor CSS Reset

35. Normalize.css • UAスタイルシートを生かすことを目的とした CSS • ブラウザのスタイルシートの差異を修正 • コード内のコメントに、詳細な説明が入っている

36. Firefox 40が  2015年8月11日にリリース • <abbr>、<acronym> 要素に text-decoration プロパティが使われるようになった • 具体的に、border-block-end: dotted 1px が  text-decoration: dotted underline に置き換えられた • Google Chrome は border-bottom を使用している • Normalize.css が、修正対象になっている

37. Rest CSSや Normalize.cssもたまには見直しが必要

38. Rest CSSと Normalize.cssの折衷 sanitize.cssやReboot

39. Rest CSS と Normalize.css

40. 好きな方を使えば、いいと思う

41. もし使い分けるなら

42. Nicolas Gallagher – Blog & Ephemera http://nicolasgallagher.com

43. UAスタイルシートを生かしたまま、要素をひとつのモジュールとして機能させられるサイト

44. 楽天市場 http://www.rakuten.co.jp

45. プロパティを初期化した方が構築しやすいなら Rest CSS

46. まとめ • UAスタイルシートは、HTMLの変化が出やすい • Rest CSSやNormalize.cssを重複して  読んでいなければ、なんでもいいと思う

47. ありがとうございました。

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

You are reading a preview.

Check these out next

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

More Related Content

Viewers also liked (9)

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

More from 知己久保 (7)

Recently uploaded (20)