リセットCSS検証(destyle.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;
}

/* 以下、destyle.css */

/*! destyle.css v1.0.14 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model */
/* ============================================ */

* {
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

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

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

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

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

body {
  margin: 0;
}

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

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 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 */
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit;
}

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