エンジニアリングとお金の話

都内で働くエンジニアの日記です。投資と技術の話題がメインです。

【技術】初心者向けTwitter Bootstrapの使い方

【SPONSORED LINK】

webで何かを作る際にいつも悩むのがデザインについてである。htmlやcssを使用すれば、ある程度の物は作れるのだが何だがイケていない。エンジニアが作るサイトはダサいと良く言われるが何も言い返せないが現実で、デザインは自分の中でいつも鬼門であった。

 

そんなエンジニア泣かせのデザイン部分を劇的にカッコよくする方法としてお勧めしたいのがTwitter Bootstrapである。

f:id:hatakazu93:20120701061641j:plain

URL:http://twitter.github.com/bootstrap/index.html

 

Twitter BootStrapはその名の通り、Twitter社が提供しているCSSフレームワークである。Twitter BootStrapを活用する事により、レスポンシブなサイトやスタイリッシュなサイトを簡単に作成する事が可能となる。ちなみに、CSSフレームワークとはlink要素で取り込む事で、主要な要素や汎用クラスのデザインが適用されるライブラリ群の事である。

 

使い方も簡単でTwitter BootStrapのサイトからzipファイルをダウンロードし、その中に入っている、bootstrap.cssを読み込むだけである。

f:id:hatakazu93:20120701062004j:plain

また、initializerと言うwebサービスを活用すれば、Twitter BootStrapを取り入れたhtmlの雛形を作成する事が出来る。初めてTwitter BootStrapを使用する時は、このサービスで作成した雛形をベースに作成する事をお勧めする。

f:id:hatakazu93:20120701062110j:plain

URL:http://www.initializr.com/

ちなみに、作成される雛形のレイアウトはこちら。

f:id:hatakazu93:20120701062256j:plain

あとは、このHTMLを修正していけば簡単に今風のデザインを備えたサイトを作成する事が可能である。これで、デザインに関する悩みを一気に解決する事が出来る。CSSフレームワークはまだメジャーでは無いが、こんなに便利な機能を使わなければ損である。色々な表現が可能である為、今後も活用出来るように知識を深めて行きたい。