黄金比を始めとした固定比によるサイズ決めは、SassやCSS Custom Propertiesによって一定の市民権を得たように思う。ただ黄金比(1.618)と1の間のサイズが欲しくなることも多い。例えば見出しのline-heightプロパティーの値だったり、フォーマット済みテキストの文字サイズだったり、だ。HTML版・普通のHTMLの書き方では固定比を1.7にして、それを1と1.25にかけ合わせていくというアプローチにした。最近よく使う手法で、僕の中ではDual Scale Sizingという名前で呼ばれている。
1と1.25にそれぞれ1.7を掛ける(で割る)だけなので、以下のようにきれいにばらけた数値が生成される。
0.204 0.346 0.588 1.000 1.700 2.890 4.913
0.254 0.433 0.735 1.250 2.125 3.613 6.141
例えば1.7を通常のline-heightプロパティーに使いつつ、1.25を見出しや整形済みテキストに使う。また整形済みテキストの文字サイズを0.735remにしたり、表の枠線幅を0.254remにしたりもする。ここに載っていない大きいサイズは、17.748rem(1.25 * (1.7 ** 5))をサイドバーの幅に使い、41.034rem(1 * (1.7 ** 7))をコンテンツの幅に使ったりする。
marginプロパティーでも1系を上下に、1.25系を左右に、と使い分けるのも良い。行間に伴う余白の微妙な不揃い感が、意図的に余白を作りだしているように変わる(気がする)。
コンテキストで1.7固定比を調節するのも悪くないが、それだとせっかく排した主観に依存するように戻ってしまう。また、固定比を増やすと、ばらけ方がまちまちになり、「これくらいのサイズがほしい」という時にどれを使えばよいか直観的でなくなってしまう。この記事で書いてきたようにベースを増やすと、わかりやすく、そこそこ使い勝手の良い数値が手に入る。
HTML版・普通のHTMLの書き方ではあまり真面目にCSSは書いていない。セレクターを見ればわかる。とにかく自動生成の手間をかけない都合上、class属性を排除したので、大きな制限があるからだ。ただできることはなるべくやってあげようとはした。
main section h1 {
/* 3.913 = 4.913 - 1 */
margin-top: 3.913rem;
padding-top: 1rem;
}:targetでやる手法もお気に入りだが、このような形であらかじめpadding-topプロパティーを確保するのもお手軽だ。calc()とvar()を使うともうちょっとかっこよく書ける。