[_s] style.css

2020/3/8 プログラミング

style.css

WordPressのstyle.cssは、通常のcssファイルとしての役割以外に、テーマについての情報を保持しておく役割を担っています。また、_sでは、デフォルトの状態では1カラムのスタイルになっていて、2カラムのcssファイルがlayoutディレクトリに入っているので、必要であればそちらをインポートできます。

テーマの説明コメント

/*!
Theme Name: _s
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
_s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

WordPressでは、style.cssの先頭で、テーマの詳細をコメント形式で記述するルールになっています。この部分の記述により、WordPressはそれぞれのテーマを個別のテーマとして扱います。

WordPress Codex テーマの作成 テーマスタイルシート

_sでは、以下について記述しています。

  • Theme Name:　テーマの名前です。
  • Theme URI:　テーマのURI（URLと同じ意味）です。
  • Author:　作者です。
  • Author URI:　作者のURIです。
  • Description:　テーマについての説明です。
  • Version:　テーマのバージョンです。
  • License: 　テーマのライセンスです。GPL必須です。公式のブログの説明はこちら。
  • License URI: 　LICENSE と書くことで、同ディレクトリに LICENSE というファイルがあって、そちらに内容が書かれているという意味になります。
  • Text Domain:　ドメインとは、翻訳文を取り出す際の識別子です。WordPress Codex Function Reference/load theme textdomain
  • Tags:　公式にテーマを登録する際に、テーマの特徴を表すタグです。こちらに使えるタグが載っています。
  • その後にも文章が続いてますが、特に意味はないです。

TABLE OF CONTENTS

style.cssの目次です。こういった書き方がcssを書く際にメジャーなのか分かりませんが、とても分かりやすいです。

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
  • Normalize　ブラウザ間の差異を解消するために使われます。_sでは、こちらのものが使われています。
  • Typography　タイポグラフィ、つまり、フォントの種類や大きさ、行間など文字全体の体裁をまとめています。
  • Elements　 基本的なHTML要素についてまとめています。
  • Forms　フォームについてまとめています。
  • Navigation　ナビゲーション部分についてまとめています。
  • Accessibility　アクセサビリティについてまとめています。スクリーンリーダー向けです。
  • Alignments　配置についてまとてめています。ある要素を左寄せ、中央寄せ、右寄せにしたい場合に使います。
  • Clearings　clearfixについてのスタイルです。
  • Widgets　ウィジェット部分についてまとめています。
  • Content　投稿、固定ページ、コメントについてのスタイルがまとめられています。
  • Infinite scroll　無限スクロールについてのスタイルです。
  • Media　 メディアファイルに関係するcssです。

Normalize

Normalizeとはブラウザ間の差異をなくすために使われます。

Normalize.css　公式サイト

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

Typography

フォントの種類や大きさ、行間など、全体的な指定を行った後に、個別のタグごとに指定をして、文字全体の体裁をまとめています。 

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

bodyタグ、buttonタグ、inputタグ、selectタグ、optgroupタグ、textareaタグについて、文字色、フォントの種類、フォントのサイズ、行の高さを指定しています。font-sizeがpxとremで指定してあるのは、IEのバグ対策と思われます。

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

hタグについて、回り込みをクリアしています。

p {
	margin-bottom: 1.5em;
}

pタグのmargin-bottomを1.5emに設定しています。remはhtml要素のfont-sizeを基準に、emは親要素のfont-sizeを基準にします。

Elements 

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

このcssについては、こちらに理由が載っています。

Inheriting box-sizing Probably Slightly Better Best-Practice

デフォルトの状態では、box-sizingを指定したときに親要素で指定しても子要素には引き継がれないので、このように設定をしたほうがより直感的に指定ができるそうです。

Forms

Formsに関連したcssがまとめられています。

Navigation

リンクとナビゲーションメニューに関連したcssがまとめられています。

Accessibility

アクセサビリティのcssはデフォルトの形が決まっています。

WordPress The CSS class screen-reader-text

Alignments

WordPressが自動で生成するクラスです。投稿画面で画像をアップロードした際などに使われるようです。

WordPress Codex Css WordPress が生成するクラス

Clearings

回り込みを解除するclearfixを行います。 clearfixについてはこちらが分かりやすいです。よく分かりませんが、Micro Clearfixというやり方っぽいです。

Widgets

ウィジェットのためのcssを記載します。

Content

投稿、固定ページ、コメントに関するcssです。

Infinite scroll

無限スクロールについてのスタイルです。_sではjetpackというプラグインを使っています。

jetpackの無限スクロール　公式

Media

embed、iframe、キャプション、ギャラリーなど、メディアファイルの挿入の際に使われるcssです。