テンプレートのスタイルをリセットするには

「P」や「H1～H6」「PRE」「TABLE」などの一般的なタグのスタイルが、使用しているテンプレートやテーマによって既に規定されていて、記事の中で使う時に予想外の表示になって困惑することがあります。

※このブログは「Simplicity2」というテーマを使わせていただいていおりますが(※)、Simplicityでもちょっと面食らってしまった部分がありました。

（※この記事を書いている時点---今の所変える予定はありませんが、将来的には可能性はゼロではないので。)

これを防ぐために、タグのスタイルを記事の中だけリセットするようにスタイルを追記したら良いわけですね。

では、各タグのスタイルの初期値はどうなっているのか？

検索してみたら、「リセットCSS」という言葉がでてきますね。

リセットCSS とは？

各ブラウザ毎にデフォルトのスタイルが独自に規定されていますが、それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。WEBデザインにおいて、ブラウザ間の表示の差異に悩まされることがありますが、それを解消するためのものです。

なるほど、テーマやテンプレートの設定をリセットするのではなく、ブラウザごとの差異を解消するために考えられたのですね。

リセットCSSは「イニシャライズCSS」とも言われるそうですが、それに代わって「ノーマライズCSS」というのもあるのだそうで。

すべてをリセットして一からCSSを書くイニシャライズCSSに対して、ブラウザのデフォルトを活かしつつ、必要な部分だけ修正を行うのをノーマライズCSSというようです。

（確かに、すべてのタグの全てのプロパティの既定値を書き出すのは大変ですよね・・・）

ちょっと意外だったのは、HTML 5 の標準では(HTML4でも？)、見出し文字（H1～H5）などの文字のサイズが全て「100%」にされていること。

道理で、試しに規定値（initial）を見出し文字に設定してみたら、全部同じ大きさになってしまったわけだ・・・(￣-￣;)

（このブログのテーマは「HTML 5」に準拠して書かれている）

initial: その要素のすべてのプロパティを初期値に指定
inherit: その要素のすべてのプロパティを「継承」に指定
unset: inherit以外のすべてのプロパティを初期値に指定

HTML5で書く人は、自分で最初にちゃんと文字サイズを設定しておきなさいよ、と言う事なんですかね。。。

HTML 5 の初期値

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

HTML4 RESET CSS

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

CSS2.1 での h1-h6 要素、および font 要素との対照表

h1-h6要素	絶対サイズ	font要素	％
		7	300%
h1	xx-large	6	200%
h2	x-large	5	150%
h3	large	4	120%
h4	medium	3	100%
h5	small	2	89%
	x-small		75%
h6	xx-small	1	60%

とりあえず、見出し文字のサイズに関しては、下記のように書けばデフォルトに戻るってことですね

h1{font-size:xx-large;}
h2{font-size:x-large;}
h3{font-size:large;}
h4{font-size:medium;}
h5{font-size:x-small;}
h6{font-size:xx-small;}

※Simplicity2の見出し文字はサイズ意外にもスタイルが設定されているので、全部リセットするよう下記のように書いてみた。(マージン等、一部初期値が分からないものがあったので、全部リセットすることにしました。)

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
display: block;
unicode-bidi: isolate;
margin: 0;padding: 0;
font-weight: bold;
border:none;
background: transparent;
border-radius: 0;
line-height: 1;
}

#main h1 {font-size: xx-large;}
#main h2 {font-size: x-large;}
#main h3 {font-size: large;}
#main h4 {font-size: 1.1rem;}
#main h5 {font-size: 1.1rem;}
#main h6 {font-size: medium;}

でも、そもそも見出し文字が、標準より小さくなるというのは、あまりないような気がするのですが・・・小さい文字を使った文章があるなら、必要なのかな？

このブログでは標準（medium）より小さい文字を使うことはないので、H5とH6も標準(medium)か、それより少しだけ大きい値に変えました(上記赤字)

CSS 各種プロパティの初期値一覧、覚書

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
backface-visibility: visible;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom: 0;
border-bottom-color: currentColor;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-style: none;
border-bottom-width: medium;
border-collapse: separate;
border-color: currentColor;
border-image: none;
border-left: 0;
border-left-color: currentColor;
border-left-style: none;
border-left-width: medium;
border-radius: 0;
border-right: 0;
border-right-color: currentColor;
border-right-style: none;
border-right-width: medium;
border-style: none;
border-spacing: 0;
border-top: 0;
border-top-color: currentColor;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-style: none;
border-top-width: medium;
border-width: medium;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
caption-side: top;
clip: auto;
clear: none;
column-fill: balance;
column-count: auto;
column-gap: normal;
column-rule-color: currentColor;
column-rule-style: none;
column-rule-width: none;
column-span: none;
column-width: auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: itr;
display: inline;
empty-cells: show;
float: none;
font-size: medium;
font-size-adjust: none;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
hyphens: manual;
left: auto;
letter-spacing:  normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1.0;
orphans: 2;
outline-color: invert;
outline-offset: 0;
outline-style: none;
outline-width: medium;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
perspective: none;
perspective-origin: 50% 50%;
position: static;
resize: none;
right: auto;
table-layout: auto;
tab-size: 8;
text-align: start;
text-align-last: auto;
text-decoration-color: currentColor;
text-decoration-line: none;
text-decoration-style: solid;
text-indent:  0;
text-overflow: clip;
text-rendering:  auto;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-origin: 50% 50% 0;
transform-style: flat;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: auto;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
z-index: auto;

/* ショートハンドなもの */
animation: none;
background: none;
border: none;
columns: auto;
column-rule: none;
font: normal;
list-style: none;
outline: 0;
text-decoration: none;
transition: none;

/* 特殊なもの */
color: inherit;
font-family: inherit;