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

6,758 views

Published on

2105/08/30 Back to Basics

Published in: Technology
0 Comments
36 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,758
On SlideShare
0
From Embeds
0
Number of Embeds
537
Actions
Shares
0
Downloads
13
Comments
0
Likes
36
Embeds 0
No embeds

No notes for slide

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

  1. 1. UAスタイルシートと リセットCSS
  2. 2. Tomoki Kubo 株式会社まぼろし
 マークアップエンジニア
 ブログ: KOJIKA17
 Adobe Creative Stationにて、Emmetの連載中
  3. 3. もくじ • UAスタイルシート
 - UAスタイルシートの基本
 - モダンブラウザのUAスタイルシート • リセットCSS
 - 全称セレクタ
 - Reset CSS
 - Normalize.css
 - リセットCSS と Normalize.css • まとめ
  4. 4. UAスタイルシート
  5. 5. Webサイトの表示に関わるスタイルシート 1. User Agent Style Sheets 2. Cascading Style Sheets (User Style Sheets)
  6. 6. HTMLの見た目は、 UAスタイルシートが 決めているにすぎない
  7. 7. HTML = 意味付け スタイルシート = 見た目
  8. 8. HTMLとスタイルシートは 分離して考えましょう
  9. 9. head, title, meta, style, script要素も 意味付け
  10. 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. 11. ブラウザの表示
  12. 12. UAスタイルシートの見本 Default style sheet for HTML 4
 http://www.w3.org/TR/CSS2/sample.html
  13. 13. 基本的に 上下のmargin指定が ついている
  14. 14. モダンブラウザの UAスタイルシート
  15. 15. HTML5の新要素の UAスタイルシートは?
  16. 16. 2009年頃 • Internet Explorer 8, Firefox 2
 HTML5の新要素のDOMをうまく作れなかった • Firefox 3.x, Safari, Google Chrome
 UAスタイルシートに新要素の記述がまだない
  17. 17. 現在 もちろん、ばらつきがある
  18. 18. html5jグループにて 「IE11 でmain 要素のwidth,height 指定が 無視されるのはなぜでしょうか?」
  19. 19. display: block;以外も 追加されている要素がある
  20. 20. margin-before?after?
  21. 21. 論理方向プロパティ • margin-start / margin-end • margin-before / margin-after • padding-start /padding-end • padding-before /padding-after
  22. 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. 23. beforeafter start end 論理方向プロパティ writing-mode: tb-rl;
  24. 24. モダンブラウザ h1要素の見た目
  25. 25. HTML <h1>Lv 1</h1> <section> <h1>Lv 2</h1> <section> <h1>Lv 3</h1> </section> </section>
  26. 26. ブラウザの表示
  27. 27. h1要素の見た目は セクショニング・コンテンツの 深度によって変わる
  28. 28. Firefox resource://gre-resources/html.css
  29. 29. WebKit html.css http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  30. 30. アウトライン・アルゴリズムは 視覚的にわかりやすくなっているだけ
 HTMLとスタイルシートを混同しない
  31. 31. リセットCSS 各ブラウザの差異を埋める手法
  32. 32. リセットCSSの目的 ブラウザ間の表示を統一させる
  33. 33. 全称セレクタ * { margin: 0; padding: 0; border: none; font-size: 100%; } すべての要素の値をまとめて指定できる 意図しない要素までリセットする可能性がある
  34. 34. Reset CSS • Eric Meyer’s "Reset CSS" 2.0 • Yahoo! (YUI 3) Reset CSS • HTML5 Doctor CSS Reset
  35. 35. Normalize.css • UAスタイルシートを生かすことを目的とした CSS • ブラウザのスタイルシートの差異を修正 • コード内のコメントに、詳細な説明が入って いる
  36. 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. 37. Rest CSSや Normalize.cssも たまには見直しが必要
  38. 38. Rest CSSと Normalize.cssの折衷 sanitize.cssやReboot
  39. 39. Rest CSS と Normalize.css
  40. 40. 好きな方を使えば、 いいと思う
  41. 41. もし使い分けるなら
  42. 42. Nicolas Gallagher – Blog & Ephemera http://nicolasgallagher.com
  43. 43. UAスタイルシートを生かしたまま、 要素をひとつのモジュールとして 機能させられるサイト
  44. 44. 楽天市場 http://www.rakuten.co.jp
  45. 45. プロパティを初期化した方が 構築しやすいなら Rest CSS
  46. 46. まとめ • UAスタイルシートは、HTMLの変化が出やすい • Rest CSSやNormalize.cssを重複して
 読んでいなければ、なんでもいいと思う
  47. 47. ありがとうございました。

×