jprekz.xyz - rekz's website

ひと目で、尋常でないCSSだと見抜いたよ

2015/03/06

サイトちょっと新しくしました(´・_・`)

ってことで, この前の記事で言っていたようにHTML5 + CSS3ベースになった。bootstrapはなんか気に食わなくなってきたので排除, 自分でCSSを書いた。流石に生のCSSをバリバリ書くのはつらみがあったので, CSSプリプロセッサとしてLessを採用してみた。

Movable Typeのテンプレートもそれに合わせてHTML5仕様で書き直し, できるだけシンプルになるようにしてみた。idやclassの記述も最低限にしたつもり。あんまりシンプルにしすぎてもあれだけど, bootstrapみたいにいちいちclassつけるのもHTMLが汚くなる感じがして嫌だなあ(´・_・`)

CSSを書くにあたって, CSS3の便利そうな新機能は躊躇せず使いまくった。特にFlexible boxはほんとつよいと思う。コレがなかったら脱cssフレームワークしようと思ってなかっただろう......

こういう新機能使うと対応ブラウザとかベンダープレフィックスとかが絡んでくるんだけど, 今回はChromeとFirefoxの最新バージョン, あと一応IE11ぐらいしか対応する気はなかったので好き放題にやった。念のため, 最終的に吐き出されるCSSには自動でベンダープレフィックスをつけてくれるツールを適用してあるけど, さっきAndroid4.1内臓ブラウザで見たら見事にぶっ壊れてた。あとOpera miniとかIE9以下とかひどいことになってると思う。個人ブログなんでそのへんを深く考える気はない。

あと, WebフォントとしてWebKoruriを採用してみた。このKoruriというフォント, Windowsでもアンチエイリアスが掛かるようになったと聞いて, あともともとちょっと気になっていたフォントでもあったのでササッと使ってみた。とても良い。どうしてもwebフォントを使うとページのロード時間が長くなったりするけど, そのへんは全く考えていない。良いものは良いのだ