blog.bouzuya.net

2016-07-07 bouzuya/bouzuya.net 2.0.0 をつくった

bouzuya.net の 2.0.0 をつくった。Git repository は bouzuya/bouzuya.net にある。

2.0.0 の大きな変更点は次の 3 点だ。

  1. font-size に vh を使用するように変更
  2. Twitter / GitHub / Hatena を 1 行から 3 行に変更
  3. :active / :focus / :hover の animation を追加
  1. font-size に vh を使用している。vh は CSS 3 からの単位のひとつで viewport の高さの 1/100 を表す単位だ。詳細は CSS Values and Units Module Level 3 の vh を参照すると良い。これを font-size に適用すると viewport の size に合わせて font-size が変わる。とても良い。

px や rem を排除し、すべてを vh と % に置き換えた。これで viewport に対しての割合だけで表示が決まる。font を含めてだ。とても良い。

vh を使用する際に注意すべきは縦横比 (aspect ratio) だ。vh は当然 viewport の高さに比例する。上下がはみ出すようなことはない。しかし、文字をたくさん書けば左右にはみ出す可能性はある。おまけに viewport の縦横比は簡単に変わる。device を変えるのはもちろん、画面を回転するだけでも変わる。

今回 bouzuya.net は縦横比を 16:9 に設定した。いま主流の 縦横比は 16:9, 16:10, 4:3 だろう。もっとも縦長になるのが 16:9 だ。w / h = 9 / 16 = 0.5625 から最小の横幅を min-width: 56.25vh; に設定した。これで縦横比 16:9 のときに崩れる心配はない。他の縦横比でも空白は大きくなるが問題ない。

ちなみに vh は IE や Edge などの browser で動作しないが、bouzuya.net は PC (Chrome / Firefox) / Android (Chrome) を想定しているので問題ない。

  1. Twitter / GitHub / Hatena を 1 行から 3 行に変更した。これはそのとおり、以前は media query で width が大きい場合は 1 行に束ねていたがやめた。複雑なだけで何もいいことがない。代わりに 1 行の height を小さくした。当然 height も vh だ。これは以前からだ。

  2. :active / :focus / :hover の animation を追加した。どこかの page で見て、自分でも試してみた。transition / ::after / :hover / width / background-color を組み合わせたらできた。

もともとは fade-in / out をつけようと思ってはじめたのだけど、そういえばと思い出して vh 対応を入れた。なかなか良くなった気がする。