[WordPress] twentyfifteen「style.css」のresetをみてみる。

WordPressのテーマ「twentyfifteen」を使うにあたり、スタイルシートの中身を見ながらCSSを学んでみたいと思います。

Contents

1 html body h p aなどの全体設定
2 htmlの設定
3 before afterの設定
4 bodyの色
5 article footer main navなどのdisplay設定
6 ol ulのスタイル設定
7 tableの設定
8 caption th tdの設定
9 blockquoteの設定
10 a要素の設定
11 まとめ

html body h p aなどの全体設定

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

border: 0;

font-family: inherit;

font-size: 100%;

font-style: inherit;

font-weight: inherit;

margin: 0;

outline: 0;

padding: 0;

vertical-align: baseline;

}

border、margin、outline、paddingは0が指定してあります。

font-sizeは100％の％表示になっており、font-family、font-style、font-weightはinheritが指定してあります。

「inherit」は相続を意味する単語で、CSSの場合は「継承」を意味します。
WordPress本体の設定をテンプレートのtwentyfifteenが継承していると思われます。

vertical-alignはbaselineが指定されています。「baseline」は画像の下端と親要素のベースラインを揃えるという意味になります。

「ベースライン」とは何か？

日本語の場合はベースラインが存在しません。

ローマ字の場合、「x」「o」「ｚ」などは下端がベースラインになっており、「p」「q」「y」などは下端がベースラインから飛び出している形になります。

ローマ字の下端と画像の下端を揃えたい場合は、vertical-alignの値を「bottom」や「text-bottom」に変更します。

vertical-alignはbaselineの詳しい設定については下記のページが参考になります。
HTMLクイックリファレンス vertical-align
TAG index 画像に並ぶテキストの位置（垂直方向）を指定する

htmlの設定

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

html {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

font-size: 62.5%;

overflow-y: scroll;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

ここで重要なのは
「-webkit-box-sizing: border-box;」
「-moz-box-sizing: border-box;」
「box-sizing: border-box;」
です。

今までのCSSでは
width+padding+borderという形で表示されていました。
box-sizingを使うと、widthの中にpaddingとborderが含まれます。
これをリセットで設定しておけば、あの複雑な計算から開放されます。twentyfifteenではbox-sizingが「border-box」に設定してあるのでGoodです。

ここの設定で使っている項目に「-webkit-」「-moz-」などがありますが、これは「ベンダープレフィックス」と言います。
Google ChromeやFirefoxなどのブラウザごとに拡張機能を指定しています。

プレフィックス	ブラウザ名
-moz-	Firefox
-webkit-	Google Chrome Safari
-o-	Opera
-ms-	Internet Explorer

「overflow-y: scroll;」はIE独自のプロパティです。
ボックスの範囲内にコンテンツが入りきらない時、はみ出た部分の表示方法を指定します。
overflowプロパティに似ています。-yなのでscrollを設定すると縦にスクロールバーが出る形になります。

設定値	意味
visible	ボックスからはみ出して表示。IEではボックスが拡張されるため、見た目ははみ出すことは無い。
scroll	ボックスに入りきらない内容はスクロールで閲覧可能。
hidden	はみ出た部分は非表示。
auto	ブラウザに依存する。（多くの場合がスクロールで閲覧可能）

「-webkit-text-size-adjust: 100%;」
「-ms-text-size-adjust: 100%;」
こちらは縦向き（Portrate mode）と横向き(Landscape mode)の文字サイズを自動調整する項目です。

デフォルト値はautoですが、値を100％にすると自動調整機能を切ることができます。
値にはnoneも用意されていますが、こちらを指定するとPCのChrome Safariで拡大されなくなります。

before afterの設定

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

*:before,

*:after {

-webkit-box-sizing: inherit;

-moz-box-sizing: inherit;

box-sizing: inherit;

}

before、after関係にも上に記載した「box-sizing」が設定されています。
inheritになっているのでborder-boxが指定されており、widthの計算をしなくても良くなっています。

bodyの色

body {
	background: #f1f1f1;
}

body {

background: #f1f1f1;

}

bodyの色は薄いグレーに設定されています。

article footer main navなどのdisplay設定

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

article,

aside,

details,

figcaption,

figure,

footer,

header,

main,

nav,

section {

display: block;

}

これらの項目には「display: block;」が設定されています。displayは要素のブロックレベル・インラインの表示形式を設定するときに使います。

「block」はブラウザで前後に改行が入って表示されます。
「inline」は文章の一部として利用され、前後は改行されません。

ここではblock要素になっているので、article・aside・footer・header・navなどは一つのまとまった単位として扱われるようになります。

ol ulのスタイル設定

ol,
ul {
	list-style: none;
}

ol,

ul {

list-style: none;

}

「list-style: none;」が設定されているのでol・ulを使ったときにマークは表示されません。

tableの設定

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

table {

border-collapse: separate;

border-spacing: 0;

}

テーブルの設定は
「border-collapse: separate;」で隣接するボーダーの間隔をあける設定になっています。
「border-spacing: 0;」でボーダー間の隙間は0に指定されています。

caption th tdの設定

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

caption,

th,

td {

font-weight: normal;

text-align: left;

}

テーブルのcaption・th・tdのフォント設定はノーマル、配置は左寄りになっています。

blockquoteの設定

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

blockquote:before,

blockquote:after,

q:before,

q:after {

content: "";

}

blockquote,

q {

-webkit-hyphens: none;

-moz-hyphens: none;

-ms-hyphens: none;

hyphens: none;

quotes: none;

}

「blockquote」とは引用・転載を表すタグです。
「hyphens」という見慣れない設定が出てきますが、このプロパティは行が折り返されるときにブラウザが単語をどのように分割するかを設定するものです。
「none」は単語内に改行位置を示す文字が含まれていても、単語は改行で分割されません。行はホワイトスペースのみで折り返されます。

a要素の設定

a:focus {
	outline: 2px solid #c1c1c1;
	outline: 2px solid rgba(51, 51, 51, 0.3);
}

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

a img {
	border: 0;
}

a:focus {

outline: 2px solid #c1c1c1;

outline: 2px solid rgba(51, 51, 51, 0.3);

}

a:hover,

a:active {

outline: 0;

}

a img {

border: 0;

}

「a:focus 」でアウトラインが設定されています。

twentyfifteenのデフォルトでaに下線が出ていますが、これはここでの設定ではなく、1725行目付近の下記の設定によるものです。

.entry-summary a,
.page-content a,
.comment-content a,
.pingback .comment-body > a {
border-bottom: 1px solid #333;
}

.entry-summary a,

.page-content a,

.comment-content a,

.pingback .comment-body > a {

border-bottom: 1px solid #333;

}

aの下線を消す方法は下記の記事をご覧下さい。
[WordPress]twentyfifteenでa要素の下線を消す方法

まとめ

twentyfifteenのリセットがどのようになっているのかがよくわかりました。
「-webkit-box-sizing:」が設定されているところが重要な確認ポイントですね。
今後も少しずつstyle.cssを見ていきたいと思います。
CSSの良い勉強になります。

[参考にさせていただいたサイト]
HTMLクイックリファレンス overflow-y
HTMLクイックリファレンス display
HTMLクイックリファレンス blockquote
HTMLクイックリファレンス :focus擬似クラス
 MDM hyphens
てっく煮ブログ -webkit-text-size-adjust: none を絶対に設定してはいけない理由

[テーマのcssソース]
WordPress.org twentyfifteen関連記事

SearchLight