1からのCSSフレームワーク

WordPressでWebサイト構築しようと様々なテーマを探していたのだが、どれもしっくり来ない。マガジンタイプのテーマを購入してみたが、やはり既存のテーマである。カラム数であったり、表示するコンテンツであったり、コンテンツ間のスペースであったり、様々な制約がある。『内容をテーマの設計に合わせてしまおう』となればよいが、新しいサービスを始めるからには、ああしたいこうしたい、という思いが出てくるものだ。

WordPressのテーマはカスタマイズ可能だ。改変が許されているテーマであれば、デザインが崩れないようにカスタマイズすればよい。

とはいえ、カスタマイズするにはゴリゴリとCSSをいじらなければならない。WordPressのウィジェットをはめ込むだけの作業から、CSSのコーディングとなれば、一気に難度が上がる。

教本をチラチラと眺めるが、うーん…。

こんなに頑張ってコーディングするんだったら、既存テーマを使わなくても良いんじゃない? むしろ、自分でCSS書いたほうが早くない?

というわけで、WordPressのテーマを使うのは止めて、代替案を探していたところ、たどり着いたのがCSSフレームワークである。

CSSフレームワークって?

端的に言えば、ナビバーやボタンといったWebの基本的なコンポーネントに予めデザインが施されたCSSファイルとJavaScriptファイルの一式である。 "navbar"だとか、"jumbotron"とか名前のついたclassを指定してタグで囲んでいけば、あっというまに素敵にデザインされたWebサイトが出来上がる。

Twitter社が提供しているBootstrapが最も有名で、日本語サイトも充実している。他にもFoundation、Material Design LiteなんていうCSSフレームワークもある。モノが違えど、考え方は一緒だ。どのCSSフレームワークにも素敵なデザインのクラスが沢山用意されているので、htmlファイルから呼び出すだけで、統一されたデザインのWebサイトを構築できる。

筆者は現在構築中のサイトでBootstrapを用いることにした。流行りのCSSフレームワークなので、『Bootstrap臭がする』などと書かれることもあるが、そこはカスタマイズするなりして、デザインをいじっていけばよいだろう。以下のような教本が出ているのも嬉しい。

これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉

CSSフレームワークを使う利点

CSSフレームワークを使う利点の一つは、これらのクラスが予めレスポンシブにデザインされていることだ。スマホ画面サイズ、通常PC画面サイズ、大PC画面サイズの横幅に合わせて、異なるスタイルが適用するように予め設計されている。CSSフレームワークを用いてhtmlファイルを書けば、自動的にレスポンシブ対応できる。

サイト閲覧時にPCよりもスマホを利用する人が大半だ。CSSフレームワークのクラスを使えば、画面サイズ毎に1からスタイルを仕上げていく手間が省ける。

もう一つの利点はグリッドシステムだ。

Webサイトはコンテンツをページに配置することで作り上げていく。一番上にはナビバーがあって、その下にスライダーがあって、その下にお知らせがあって、という具合だ。

綺麗なデザインは、コンテンツが秩序に従って配置されている。コンテンツの端が綺麗にそろっていて、見やすいように余白が一定量確保されている。

CSSフレームワークのグリッドシステムを使えば、簡単にコンテンツを配置できる。ページ横幅が12分割されていて、『このコンテンツは7マス、次のコンテンツに5マス使ってください』と指定すれば、7:5の比率の2カラムのデザインが簡単にできる。また、rowという行指定用のクラスを用いれば、『このコンテンツには7マス使って、次のコンテンツ3個を5マスの横幅で縦に並べてください』という指定もできる。

flic.krphoto by Aaron Parecki

とはいえ、コンテンツの位置を調整するためのmargin、paddingといったCSSの基本が分からない初心者にはちょっと難しい。クラス指定が重複してしまって、スタイルがうまく適用されないなんてことも茶飯事だ。筆者は以下の本のグリッドシステムの説明を手元におきながら、ゴリゴリとコーディングしている。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Webサイト構築のハードルは低くなっている

カスタマイズとか大変そうだな、CSSを勉強するのに時間がかかるな、とか思っていたのだが、CSSフレームワークは非常にとっつきやすい。面倒くさがりの人は、Bootstrapのページからファイル一式をダウンロードして、index.htmlファイルを作って、head情報を全部コピペして、body情報もコンポーネントのソースをコピペして作れば、あっという間にWebサイトが出来上がる。

ブログの普及に伴って、個人のWebページの数が莫大に増えたが、WordPressをはじめとするCMS、BootstrapをはじめとするCSSフレームワークが出てきたことで、ある程度カスタマイズされたWebページを作る人も増えてきている。

CMSやCSSフレームワークの普及は、若しくは紙粘土で全てのパーツを作っていたのが、レゴのパーツを組み合わせて作れるようになった、そんなイメージである。0から全てを作れ、と言われると途方に暮れてしまうが、ある程度出来上がったものを組み合わせるのであれば、とっつきやすいし、どんどんイメージも湧いてくる。

とにかく、超初心者の筆者はBootstrapでデザインに励む毎日である。喫緊の課題は、いかに『Bootstrap臭』を無くすかだ。

でも、いわゆるフラットデザインって、そんなにバリエーションが無いんである。

ちなみに、筆者のデザインのテーマは"ロシアン・アヴァンギャルド"である。『え、何それ…』という人は、前田敦子のシングルCDのジャケ写を参照するように。