左寄せ(v9.10.0)

v9.10.0

左寄せになった。ついに。他には、ロゴを反転させて左端にくっつけるようにしたり、ファビコンを微妙に小さくしたり、ナビゲーションだけ幅を広く使うようにしたりした。内部的には、CSSのファイル名がindex.{{version}}.cssになったり、色変数の命名規則がマテリアル・デザイン風になったりしている。

左側の余白には、やはりclamp()関数を使っている。こういうものも気を付けて書けば、カスタム・プロパティー化して再利用できることがわかってきた。

:root {
	--ratio-1: 1.272;
	--ratio-2: calc(var(--ratio-1) * var(--ratio-1));
	--ratio-3: calc(var(--ratio-2) * var(--ratio-1));
	--ratio-4: calc(var(--ratio-3) * var(--ratio-1));
	--ratio-5: calc(var(--ratio-4) * var(--ratio-1));

	--width-gap: calc(var(--ratio-1) * 1rem);
	--width-column: calc(var(--width-gap) * var(--ratio-5) * var(--ratio-5) * var(--ratio-4));
	--width-scrollbar: 24px;

	--space-body-left: clamp(
		0px,
		(100vw - (var(--width-gap) + var(--width-column) + var(--width-gap) + var(--width-scrollbar))) / 2,
		var(--width-column) / var(--ratio-5)
	);
}

body {
	margin-left: var(--space-body-left);
	margin-right: auto;
}

基本の1.272を使ってギャップ幅とカラム幅を作り出し、余白の最大値はカラム幅からまた作り出す。カラム幅が37remくらいで、余白の最大値が11remくらいになる。余白の最大値に達するまでは、真ん中寄せくらいになるように計算している。

安直にカスタム・プロパティー化すると、使われる要素(セレクター)によって、値選択のタイミングが変わる。中の計算が確定するよう、安定した単位であるpxremvwなどの組み合わせで書いた場合は、無条件でカスタム・プロパティー化できる。そうでない場合は意図せずレスポンシブになりうるので、注意が必要だ。


CSSが肥大化しつつあって気になったので、マイナー更新のついでに、不可欠でないものは削除していった。構文強調や、余白の微妙な調整、検索フォーム、段落のtext-align: justifyなどなど。色々試す関係上、ある程度は均しておかないと、面倒なことになる。