リセットCSS検証(normalize.css)

by kazuya nakagawa

HTML

<img src="https://placehold.jp/5a60ff/ffffff/300x150.png?text=image" alt="">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<section>section</section>
<div>div</div>
<p>段落です。段落です。段落です。段落です。段落です。段落です。段落です。段落です。段落です。<br />段落です。段落です。段落です。段落です。</p>
<ul>
    <li>番号無しリスト</li>
    <li>番号無しリスト</li>
    <li>番号無しリスト</li>
</ul>
<ol>
  <li>番号付きリスト</li>
  <li>番号付きリスト</li>
  <li>番号付きリスト</li>
</ol>
<dl>
  <dt>定義リスト（dt）</dt>
  <dd>定義リスト（dd）</dd>
</dl>
<table>
  <tr><th>th</th><td>td</td></tr>
</table>

<input type="text">
<label for=""><input type="checkbox"></label>
<label for=""><input type="radio"></label>
<input type="submit">
<button type="submit">ボタン</button>
<textarea name="" id="" cols="30" rows="3"></textarea>

CSS

/* divとsectionに色付け */
section{
  background: #ccc;
}
div{
  background: #ddd;
}

/* 以下、normalize.css

! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css

Document
   ==========================================================================

*
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.

html {
  line-height: 1.15; 1
  -webkit-text-size-adjust: 100%; 2
} */

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

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  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;
}

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

/**
 * 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. 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 */
}

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

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 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 */
}

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

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct...