Qiita Jobsに登録して最高の仕事を見つける！詳しくはこちら
y_sekitoba@y_sekitoba
Improve article
Send edit request
Article information
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

備忘録_normalize.css v5.0.0 に関して_Part1

CSS
More than 3 years have passed since last update.

自分ように記録を残しておく。力尽きた部分もあるので随時修正予定。
※あくまで自分ようですが、間違ってら教えていただけると凄く嬉しいです。

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* 1 /でfont-familyプロパティをsans-serifに統一・
/ 2 */でline-heightプロパティを1.15に統一

/* 3 */でランドスケープにした際の文字の拡大を防ぐために下記を記述
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

bodyのデフォルトマージンを0に指定

// chrome
body {
    display: block;
    margin: 8px
}
// Edge
body {
    display: block;
    margin: 8px;
}
// FF
body {
  display: block;
  margin: 8px;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

IE9以下に対してHTML5対応のためにdisplay: block;を指定

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Chrome, Firefox, Safariに関して section / article要素の中に入れ子で使用していくとデフォルトスタイルで修正されてしまうのを共通化
※Edgeは入れ子にしても変わらない。 / font-whightプロパティは 700 = bold 

// chrome
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
}
// Edge
h1 {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    page-break-after: avoid;
}
// FF
h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}
h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

IE9以下に対してHTML5対応のためにdisplay: block;を指定

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

figure要素のIE8対応のためにmarginを指定
要するにfigure要素のmarginの統一

// chrome
figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
// Edge
figure {
    display: block;
    margin: 0.5em 40px;
    unicode-bidi: embed;
}
// FF
figure {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  -moz-margin-start: 40px;
  -moz-margin-end: 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* 1 /でFFのbox-sizingプロパティをデフォ化する
/ 2 */でEdge、IEのoverflowプロパティをデフォ化する

// chrome
hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px
}
// Edge
hr {
    border: 1px inset;
    display: block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
}
// FF
hr {
  display: block;
  border: 1px inset;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  -moz-margin-start: auto;
  -moz-margin-end: auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
  • 1.すべてのブラウザでフォントサイズの継承とスケーリングを修正します。
  • 2.すべてのブラウザで奇数の emフォントサイジングを修正します。
// chrome
pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
}
// Edge
pre {
    display: block;
    font-family: "Courier New";
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    white-space: pre;
}
// FF
pre {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/* 1 /でIE 10のアクティブなリンクの灰色の背景を削除
/ 2 */でiOS 8+とSafari 8+のアンダーラインリンクの隙間を削除

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

すべてのブラウザで :active / :hover 時のアウトラインを0に

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/* 1 /でFirefox 39-の下の枠を削除
/ 2 */でChrome、Edge、IE、Opera、Safariで正しいテキストの装飾を追加

// chrome
指定なし
// Edge
指定なし
// FF
abbr[title] {
  text-decoration: dotted underline;
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

Safari 6 でfont-weight: bolder;の重複適用を防ぐ

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

Chrome、Edge、Safariでフォントの太さを統一

// chrome
strong, b {
    font-weight: bold
}
// Edge
b {
    font-weight: 700;
}
strong {
    font-weight: 700;
}
// FF
b, strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
  • 1.すべてのブラウザでフォントサイズの継承とスケーリングを修正します。
  • 2.すべてのブラウザで奇数の emフォントサイジングを修正します。
// chrome
code, kbd, samp {
    font-family: monospace
}
// Edge
code {
    font-family: "Courier New";
}
kbd {
    font-family: "Courier New";
}
samp {
    font-family: "Courier New";
}
// FF
code, kbd, samp {
  font-family: -moz-fixed;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

Android 4.3-で正しいフォントスタイルを追加

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

IE 9-ようにパロパティを指定

// chrome
mark {
    background-color: yellow;
    color: black
}
// Edge
mark {
    background-color: #ffff00;
    webkit-tap-highlight-color: black;
}
// FF
mark {
  background: yellow;
  color: black;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

*すべてのブラザで正式サイズを追加してください。

// chrome
small {
    font-size: smaller
}
// Edge
指定なし
// FF
small {
  font-size: smaller;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

すべてのブラウザでsub要素と、sup要素が行の高さに影響しないように指定を追加

// chrome
sub {
    vertical-align: sub;
    font-size: smaller
}
sup {
    vertical-align: super;
    font-size: smaller
}
// Edge
sub {
    font-size: 0.5em;
    vertical-align: sub;
}
sup {
    font-size: 0.5em;
    vertical-align: super;
}
// FF
sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}
sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Part2はこちら
http://qiita.com/y_sekitoba/items/cc897e079f1fbbdca59e

Edit request
1
y_sekitoba
@y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした