v6.15

ブラウザーのサイズによって文字の大きさを少し変えるようにしたので、それに合わせてemを使ってレイアウトするようにした。縦のリズムもちゃんと計算してやろうかと思ってるけど面倒になってきた。やって思ったのはやっぱりcalc()が必要ということ。違う単位を混ぜられるのはとても手軽だ。Sassでも無理だし、将来的にもできるようにならないし。faviconもちょっとだけ変えた。

カラム定義

カラムは本文を9カラムで48em程度にしたかったので以下のようにした。

$column: 3.5em;
$gap:    1em;

これで9カラムで47.5emになる。Style Guideだとそこらでダブルクリックするとカラムがオーバーレイ表示されるようになってる(_grid-overlay.scss使った)。12カラムが収まる場合はマルチカラム……にしたかったけど、とりあえずはタイトルや日付けをちょっとずらすだけにした。マルチカラムにまだ慣れてなくて、間に画像やpre要素が挟まるとうまくスタイル書けない。ちゃんとセクショニングしてしっかりマークアップしとくとマルチカラムにしやすそうだなぁ。

文字サイズの調整

文字の大きさの切り替えはあまり細かく考えずに計算で誤魔化した。

body {
  // Decrease font size
  $too-narrow: $safe-for-content * 0.875 * 0.875;

  @media screen and (max-width: $too-narrow) {
    font-size: 87.5%; // 14px
  }

  // Increse font size more
  $wide-enough: $safe-for-full * 1.25 * 1.25;

  @media screen and (min-width: $wide-enough) {
    font-size: 125%; // 20px
  }
}

使うサイズを先に決めて、その倍率の二乗をかけたサイズに横幅が到達したら切り替えている(4段階)。根拠はない。ただこの処理もemを使って振り分けているので、実装によってはおかしくなりそう(切り替えぎりぎりのあたりだと条件を満たして切り替えた後に条件が満たされなくなって元に戻るの無限ループとかありえそう)で不安がある。ここだけはpxにした方が安全そう。

リリース版のSassではまだMedia Queriesで変数を利用することができないので、こういう書き方をするためには開発版をインストールする必要がある。

$ gem install --prerelease sass

開発版では%fooという@extend専用のプレースホルダー・セレクターも書けるようになったりしててとても楽しいと思うので、大体Sass覚えたよーという人は試すとライフチェンジングするはず。

他

フォントはあまり変えていないけど、見出しに使っていたAndikaはやめた。Operaでのバグの件でLucidaスタックに戻したい感じではある……。

後はフッターのアイコンを_corporate-colors.scssを使ってオンマウスで色が変わるようにしたくらい。あんま意味ないので最初からカラフルでもいいかも。

emにした理由は主に2つある。

今のところpxはほぼ絶対的なサイズとして扱えてて、かつ、cmのように非直観的な単位ではないのでだいたい期待した通りに動いてくれるけど、今後のデバイスとOSやブラウザーの実装次第ではpxでは駄目になるんじゃないかと思っていることがひとつ。画面サイズとドットピッチ、DPI、最後にスケーリングという様々な要素が絡みあう世界をpxだけでどうにかされることを期待するのはあまりに甘いと思う。emとfont-sizeの%指定を組み合わせなら、そのあたりはブラウザー側で(結果的に)吸収してくれることになり……そう……というかなって欲しい。

勿論DPI等を意識しないという意味では%で全部やっても良いと思うんだけど、%ではどうしてもデバイス(というかブラウザー)の描画領域を強く意識することになる。そもそもの基準が描画領域になるので、このサイズに収まるようなレイアウトという考えから脱却できない。

つまりもうひとつは1行の文字数を基準にしてレイアウトしたくなったということ。今までも全角50文字前後になるようにしてたつもりだけど、px単位に置き換えてやってた。Sass使い始めてからはSassでやればいいかなーと思ってたけど、せっかくem単位あるんだしそれ使うのがいいよね！　とかそういう軽い感じ。

emだと安心とかそういうことはありえないけど、この1pxへのこだわりを捨てられた感じはちょっと開放感ある。ただ最初にも書いたけどやはりcalc()がないと辛そう。違う単位を混ぜられて簡単便利っていうのも勿論あるんだけど、無いとどうしてもem単位をpx単位等に脳内で置き換えてイメージしてからCSSを書きがちになる。それではemを使う意味が薄れてしまうので、emであるべきところはem、pxであるべきところはpxで書けるcalc()は重要になるんじゃないかと思う。

無駄に長くなった。emの話はまた別に書こうかな。%を使ったカラム・レイアウトはダメそうとかそういうのも含めていろいろ書けそう。などと書くとだいたい書かない法則。

追記

em単位でのMedia Queriesで無限ループになりそうという心配は杞憂だった。

For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.

と書いてあるのでbody要素の文字サイズを変更しても影響ない。