bouzuya.net の 2.0.0 をつくった。Git repository は bouzuya/bouzuya.net にある。
2.0.0 の大きな変更点は次の 3 点だ。
font-sizeにvhを使用するように変更- Twitter / GitHub / Hatena を 1 行から 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) を想定しているので問題ない。
2) Twitter / GitHub / Hatena を 1 行から 3 行に変更した。これはそのとおり、以前は media query で width が大きい場合は 1 行に束ねていたがやめた。複雑なだけで何もいいことがない。代わりに 1 行の height を小さくした。当然 height も vh だ。これは以前からだ。
3) :active / :focus / :hover の animation を追加した。どこかの page で見て、自分でも試してみた。transition / ::after / :hover / width / background-color を組み合わせたらできた。
もともとは fade-in / out をつけようと思ってはじめたのだけど、そういえばと思い出して vh 対応を入れた。なかなか良くなった気がする。
https://t.co/7sO8FDWyYv をバージョンアップした。フォントサイズに vh を適用したのと、各行の高さの調整、アカウントの行の分離、ホバー時の表現の変更など。地味な変更をいくつか。フェードインをつけようかと思ったけど、喜ばれなさそうなので、とりあえずなしで。
— bouzuya (@bouzuya) July 7, 2016
