必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

Web/30 Jul 2015

Chrome の拡張機能で、Wappalyzerというものを使っておりまして、閲覧しているサイトがどんな言語や仕組みで構築されているかをよく見てます。

Wappalyzer

アドレスバーの右端にアイコンが表示されるので、これをクリックするだけで丸わかりです。この Web サイトは上の画像のように少量構成ですが、Wordpress サイトとかになれば、 PHPjQuery など表示されるものが増えます。 これから Web サービス作りたくて、いろんなサイトを頻繁に見てイメージを膨らましている人に重宝するツールですね。

Wappalyzer はいろんなものを認識してくれて、みんな大好きBootstrapもその一つです。Bootstrap が使われていると、Wappalyzer では「B」のアイコンが表示されます。

Wappalyzer

Bootstrap は充実し過ぎ

Bootstrap は完成度の高いフレームワークで私も愛用しています。利用者が多いので困ったことも調べればすぐに解決できるのが利点。

また、UI パーツが豊富に揃っていて、デザインが苦手な人や開発を効率化するのに使いたい人にとってはかなり便利な反面、グリッドやフォームだけを使いたい人からすれば、余剰機能が多く手を出しづらいかかもしれません。

ミニマルなフレームワークを使うことも検討する

フレームワークはそもそも開発を効率的に行うことを目的にパッケージ化されたもので、豪華詰め合わせセットもあれば、簡易包装のお手軽セットもあります。 自分でがっつりコードを書いていくのであれば、よりシンプルな最小構成のフレームワークを選ぶのも手段の一つです。

最小構成の CSS フレームワークなら「Skeleton」が使い易い

skeleton

スケルトンという名前の通り、これから始めるのに最適な最小構成のフレームワークです。 レスポンシブ対応、グリッドやフォーム、ボタンなどのよく使う要素も設定など使い勝手が良いように設計されています。(MIT ライセンスで配布されています。)

ただ、ブラウザ対応は、Chrome、safari、firefox、IE の最新版のみで、古い IE は切り捨てています。個人的にはこれで良いのですが、クライアント納品には使えない場合もあるかもしれませんの要注意。

めちゃくちゃ軽い

skeleton

最小構成なので、軽くて当然なんですが、縮小化(minify)されていない状態で、11KB と驚きの軽さです。css を開いても 500 行程度しか記述がないので、カスタムもしやすい。

で、Bootstrap の最新バージョン v3.3.5 をダウンロードして重さを見ると、

Bootstrapの容量

bootstrap.min.css で 123KB あります。この程度の容量は画像 1 枚分と同等以下なので、気にし過ぎる必要はないかもしれませんが、ページの表示速度の観点では軽量化できるものは徹底的にやった方が良いです。(ページの表示速度は SEO に影響します。)

グリッド

container > rowという流れは Bootstrap と同じで、グリッドカラムの大きさを示すクラス名の取り方が異なるだけですね。とはいえ、onetwo のようなクラス名なので、わかりやすいのではないでしょうか。

<div class="container">
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>
  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>
</div>

grid

フォーム

input 要素の type 属性を指定して、以下のような CSS 設定となっています。

input[type='email'],
input[type='number'],
input[type='search'],
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='password'],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}

チェックボックスも定義されています。公式サイトのページ上にサンプルはありませんが、ラジオボタンもちゃんと用意されています。input 要素の type 属性 radio に反応して、いい感じにスタイリングしてくれます。

form

ブログデザインに使いやすいのでは

テーブルやボタン、文字サイズ、コードなども定義されていますが、これらの構成を見ると、ブログを始めるのにちょうど良い印象を受けました。 Bootstrap は、Web サービスなどの大型案件にも使える要素が多く、小規模サイトやブログレベルでは機能を持て余すはずです。

シンプルな方が都合が良い

デザイン、開発、ほとんど全てに通ずるものだと思うのですが、余計なものは排除することは重要です。先ほどのフレームワークでは、使わないコードが CSS の総量を重たくするのであれば、これは多機能ゆえのデメリットです。

このサイトも初期は jQuery を入れていましたが、JS だけで出来ることだったので、jQuery の使用を辞めました。CSS のコード量も半分以下までダイエットさせました。 重複や無駄が出ないように作ったコードでも見返すと修正箇所はあります。そのおかげで、サイト速度の改善だけでなくメンテナンス性まで向上しました。

より便利さを求めていけば、自然と必要最低限のものだけになっていき、シンプルなものになっています。それならば、最初から軽量でミニマルなフレームワークを試してみるのも良いのではないでしょうか。


あとがき

「Twitter」が付いていた Bootstrap 初期の頃、当時は LESS 版が出ていたので、今の内に使えるようになると良いかもと思い、CSS 直書きの私は、初めて触れる LESS を必死で覚えました。 程なくして「Twitter」の屋号が外され、SCSS 版が広まり、Ruby on Rails の人気度が増したせいか、世の中の流れは一気に SCSS に傾きました。今では LESS を覚えたことが嘘のように SCSS ばっかり使います。

自分はこういった言語を覚える時は、フレームワークに書かれている記述を見て真似て覚えました。skeleton も SCSS 版が入手できるので、学習の機会としてやってみても良いと思いますよ。変数定義や関数の作り方、組み込み型の関数の使い方などに慣れてしまうと、すぐに素の CSS を書くのが嫌になるはずです。