左寄せ(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くらいになる。余白の最大値に達するまでは、真ん中寄せくらいになるように計算している。

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

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