2013年2月16日土曜日

少しは今風のページを作りたい


「まず自分でやってみるまで、誰かを雇ってはいけない。」

37シグナルズの「小さなチーム・大きな仕事」に書いていたことだ。これは雇うだけでなく、他のメンバーに仕事を割り振ったりしたり、外注さんにお願いしたりするときでも同じだ。まず自分でやってみてその仕事がどんな感じなのか掴む。有効なルールであると思う。

自己啓発本の類いを読むとすぐ影響されるタイプなので、ウェブページのデザインを自分でやってみた。まず自分でやってみるだ。
まえからこんなデザインのウェブページが自分でできればいいな、というページをまめにEvernoteにクリップしていた。その中からピックアップして、同じような感じのページを作ろうとした。

なるほど、素人にはむつかしい。なぜかイメージ通りにいかない。何がダメなんだろう。まず基本的なレイアウトに問題があるのだろう。自分でContainerクラスやboxクラスをCSSで作成してもいいのだが、今はBoostrapKubu CSSといった非デザイナでも今風のサイトが作れるCSS Frameworkがある。今回はメジャーなBoostrapで作ってみた。Boostrapでうれしいのはグリッドシステムタイポグラフィが設定されていることだ。正直この2つをちゃんと使っていれば、それなりのページが作れる。

グリッドシステムはレスポンシブでなければ幅940pxからなる12カラムのグリッドを準備してくれている。レスポンシブの機能を使いたい場合は、レスポンシブ用のCSSファイルを追加するだけ、  幅724pxと1170pxに対応ができる。 幅ピクセルでレイアウトするのでなく、 幅をパーセントでレイアウトできるFruid Grid Systemも使える。

タイポグラフィはhタグからはじまって、addressやblockquotesまであり綺麗につくれます。特にblockquotesがお気に入りで、必要もないのに名言を掲載するスペースを作ってしまう。

プログラマ的にはCSSフレームワークはまさに目から鱗です。こんな簡単にできるとは。次はkubuを試してみる。

0 件のコメント:

コメントを投稿