サイトリニューアルは var関数でカラーポリシー remでフォントサイズ マネジメント

CSS3 var関数とrem

サイトリニューアルにあたって、旧サーバーのコンテンツを移動することが主な作業だったものの、テキストやHTMLソースを書き換える必要もあったので、せっかくだから、CSS3のvar関数とremを本格的に採用してみた

var関数でサイトのカラーポリシー確立

サイトのカラーの設定で、とくにメインを旧サーバーと同様の「グリーン」で統一し、CSS3の「var関数」を設定

また、場当たり的に色選びしないように、旧サーバーのCSSを持ち込みながら、あらかじめ使いそうなカラーを選抜して style.css に記載

:root {
	--color-primary: rgba(39, 53, 10, 1); /* #27350A var(--color-primary) */
	--color-secondary:rgba(138, 196, 62, 1); /* #8AC43E var(--color-secondary) */
	--color-tertiary:rgba(107, 191, 63, 1); /* #6BBF3F var(--color-tertiary) */
	--color-quaternary:rgba(52, 134, 52, 1); /* #D9F0A1 var(--color-quaternary) */
	--color-link:rgba(25, 130, 209, 1); /* #1982D1 var(--color-link) */
	--color-white:rgba(255, 255, 255, 1); /* #FFFFFF var(--color-white) */
	--color-black:rgba(0, 0, 0, 1); /* #000000 var(--color-black) */
}
html {
	/* 1rem = 10pxと定義 */
	font-size: 10px; }
body {
	/*　基本のフォントサイズは16px */
	font-size: 1.6rem; }

一番左の「-primary」では、「background-color:var(–color-primary)」としている

remでフォントサイズのポリシー確立

Search Consoleのモバイル ユーザビリティで、テキストが小さすぎて読めません、クリック可能な要素同士が近すぎます、こういうメッセージが鬱陶しいので、サイトの最低フォントサイズそのものを大きく設定し、かつ行間も広くするようにしている

とくにフォントサイズは、remをベースに、親要素に影響を受ける%やemを使わないので、モグラ叩きの逐次対応から解放される
1remが10pxになり、フォントサイズも2.4rem（=24px）などとして、px指定も止めている

なお、WordPressでは、親テーマの CSS も、子テーマの style.css が上書きしてくれるので、remは威力を発揮する

bodyの、フォントサイズは変更しても無問題だが、htmlのフォントサイズのほうは、変更すると「1rem」の単位が変更されるので、サイト全体のフォントサイズが大きくなったり小さくなったりする

ただ、いろいろ試してみたが、「1rem = 10px」が分かりやすい

プレイクポイント・メディアクエリはスマートフォンの横と縦の画面に合わせて

あいかわらずデスクトップファーストのCSS記述だが、下記投稿記事でも解説しているように、プレイクポイント・メディアクエリは基本的に、「タブレット縦 / スマホ横」「スマホ縦」の2つ

【2020年3月】レスポンシブ CSSブレイクポイント・メディアクエリ（@media）

メディアクエリもCSS次第、新型大型のiPhoneやiPad Proなどが登場で、レスポンシブのメディアクエリ・ブレイクポイントもグダグダ。モバイル ファーストのハードル高し

もっとみる ≫

どうしても気になるところは、「小型スマホ横」「小型スマホ縦」を追記している