今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜

    
2013/10/25
    

アイキャッチ 01
こんにちは!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。

Twitter Bootstrapと聞くと、エンジニアやマークアップエンジニアが使うものだと思っていませんか?それは大きな間違いです。コーディングが苦手なデザイナーこそ、一番便利に使えるものなのです。コーディングする必要がなく、コピペし少しいじればサイトが作れてしまいます。

今回のエントリではTwitter Bootstrap入門をお届けします。中級者の方にもうれしい、ちょっとしたカスタマイズもエントリ後半で触れます。

目次

【初級編】

1.Twitter Bootstrapって何?
2.Bootstrap使うと何が便利なの?
2-1.ブラウザごとの表示崩れが少ない!
2-2.レスポンシブWebデザインが簡単につくれる!
コラム.LESSファイルってなに?怖い!
2-3.よく使うインターフェイスが揃っている

【実践編】

3.実際に作ってみよう!
3-1.index.htmlを作成しよう!
3-2.「CSS」,「Components」をコピーしよう!

【応用編】

4.カスタマイズしてみよう!
コラム.おすすめLESSコンパイラ・Codekit
5.習作のためのワンポイントアドバイス
6.結局みんな同じようなデザインになっちゃう?

まずはTwitter Bootstrap自体の説明をします。既にご存じの方は「3.実際に作ってみましょう!」からお読みください。

1.Twitter Bootstrapって何?

Twitter Bootstrap(以下、Bootstrap)とは、CSSフレームワークのひとつです。CSSフレームワークとはHTMLにCSSファイルを読みこむだけでそれらしいデザインが適用されるもののことです。いつも同じようなコードを何行も書いていてうんざりしたことはありませんか?
Bootstrapにはよく使うものが便利にまとまっていて、さらにモダンな見た目のサイトを作ることができます。

【公式サイト】http://getbootstrap.com/
Image00

2.Bootstrap使うと何が便利なの?

2-1.ブラウザごとの表示崩れが少ない!

イチからコードを書く時、一番大変なのが各種ブラウザでの表示の違いですよね。多少の違いならまだしも、カラムが落ちてしまうなどコンテンツが読めなくなってしまう事態は避けたいものです。

これらを回避するためには、今まではコーディングの豊富な知識が必要でした。しかしBootstrapはあらかじめブラウザの差異を修正してありますので、知識がなくても表示崩れの無いWebサイトが作れます。

各種OS、各種ブラウザの検証をするのはとても大変です。その手間が少なくなるというだけでも使う価値を感じられますね。

対応しているブラウザは以下の通りです。全てのブラウザに対応している訳ではありませんので注意が必要です。

Bootstrapに対応しているブラウザ

  • Chrome (Mac, Windows, iOS, and Android)
  • Safari (Mac and iOS only, as Windows has more or less been discontinued)
  • Firefox (Mac, Windows)
  • Internet Explorer
  • Opera (Mac, Windows)
※ IE7以下とFirefox3.6はサポート打ち切りになりました。またIE8もそのままでは意図しない挙動をすることがありますので、Respond.jsを用いる必要があります。

2-2.レスポンシブWebデザインが簡単につくれる!

最近は私も、クライントにレスポンシブWebデザインを求められる機会が増えてきました。しかしレスポンシブWebデザインというとコーディングの知識がいろいろ必要そうで、イチから作ろうと思うと少し敬遠してしまいます。
そこでBootsrap!Bootstrap3にバージョンアップし、レスポンシブWebデザインに特化されました。モバイルのデザインをベースとし、それぞれのデバイスサイズに展開していく「モバイルファースト」のフローになっています。
Image00 4

公式サイトもBootstrapで作られており、レスポンシブWebデザインの様子が確認できます。ウインドウ幅を変更するとメニューが格納されるなど見た目が調整されています!


デザインを変更するには、要素を構成するLESSファイル(後述)に直接メディアクエリを用いて追記すればOKです。以前のバージョンを利用していた人はここで戸惑うことが多いと思います。レスポンシブ用に用意されていた各種ファイルがなくなったのです。
以前のバージョンからBootstrap3に乗り換える方は、jumbotron.lessファイルなどを見るとどのように書かれているか分かりますので参考にすると良いでしょう。

コラム. LESSファイルってなに?怖い!

聞き慣れない言葉が出てきました。LESSファイルとは、CSSの拡張メタ言語と呼ばれるもので、プログラミングの要領でCSSが書ける独自の言語です。色コードをそれぞれのプロパティに書いていると、色を変更するときに全て書き換えなくてはならず、とても面倒です。LESSファイルでは一箇所色を変更したら関連するファイルが全て変更されるように作ることができます。
とはいえ「プログラミング」と聞くとじんましんが出てしまう方も多いはず。これまで通り、CSSを書いてもちゃんと動きますのでご安心ください。
LESS The Dynamic Stylesheet language

【公式サイト】http://lesscss.org/

※ 導入方法はこちらを参照すると良いでしょう。

2-3.よく使うインターフェイスが揃っている

ボタンやタブ式ナビ、ドロップダウンメニュー。その他おおよそWebデザインで必要とされるパーツが揃っています。

【コンポーネンツの一覧】http://getbootstrap.com/components/

Image24

ボタン


Image04

タブ式ナビ


Image07

ドロップダウンメニュー


サンプルコードも一緒にまとまっています。はじめての方はコピペしながら習作を作ってみましょう(この後に解説します)。
公式サイトは英語ですが、上からサンプルコードを追っていけばちゃんと出来上がるようになっていますよ。

【公式サイト】http://getbootstrap.com/getting-started/

それでは、実際に手を動かし作ってみましょう!

3.実際に作ってみましょう!

ここからはBootstrapの使い方を見て行きます。このエントリではデフォルトのデザインを使って構築します。

3-1.index.htmlを作成しよう!

公式ページの「Compiled CSS, JS, and fonts」から、コンパイル済み(LESSファイルをCSSファイルに変換している)ファイルをダウンロードします。

Image23
ファイル構成はこのようになっています。
Image02
ここにindex.htmlを作成します。Bootstrapのデザインやパーツを利用することができます。今回は「Basic template」のコードをまるっとコピーしてして使います。
Image12
viewportとstylesheetのリンク、そしてIE8などに対応するためのjsの読み込みコードが書かれています。まるっとコピーしてindex.htmlとして保存すればOK!もしindex.htmlの場所を異なる位置にする場合はパスを修正しておきましょうね。

ブラウザで開くとこのような見た目になります。
Image08

「Hello, world!」と表示されましたか?これで準備OKです!


3-2.「CSS」,「Components」をコピーしよう!

次に、Default navbarのソースコードをコピーしてまた貼り付けます。ブラウザを更新すると、このようにナビバーが入りました!
Image22

Bootstrap標準のナビバー


TIPS

Twitter Bootstrapには黒バージョンのナビも用意されています。
Image14

サンプルコードを見ると navbarというclassに ”navbar-inverse” を追記すれば良いようです。

タイトル部分を作ってみましょう。Jumbotronのサンプルコードを貼り付けます。

Image01
コピペだけでタイトルを入れられそうなスペースができました!
ただ、ウインドウ幅ピッタリにくっついてしまう点が気になります。左右に余白を作り、真ん中に寄せましょう。

CSS > Overview > Containersを参考にするとcontainerというclassをつければカンタンに真ん中寄せにできるようです。

Image21
できました!

3−3.カスタマイズしてみよう!

簡単なカスタマイズをしてみます。今回はjumbotronのグレーで味気ない背景を写真の背景に変更してみます。

そのままCSSファイルをいじりたいところですが、スタイルを上書きしようとするとプロパティが多くコードが複雑になってしまいます。不要なスタイルを除外するためのスタイルをたくさん書くのは、あまり美しくありません。

BootstrapはLESSによってスタイルが定義されていますので、カスタマイズする時にはこちらを編集します。ほとんどCSSファイルの書き方と一緒です。

TIPS

LESSのソースコードはGitHubにあります(Bootstrap本体には同梱されていません)
【GitHub】https://github.com/twbs/bootstrap
lessフォルダをダウンロードしておきましょう。

パーツごとに細かくファイルが分かれています。jumbotron.lessを開いてみます。
Image16 2
CSSとほとんど同じ書き方であることがわかると思います。ただ、値を入れる場所に変なものが入っていることが気になります。これは変数という、別ファイルで指定してある数値を入れてくれるものなのです(変数は今回覚えなくて大丈夫です!)

Image09

普段、何かしらの値を入れる場所に@jumbotron-paddingという文字列が入っていることがわかります


例えばpaddingの@jumbotron-paddingの値を15pxと指定するとします。CSSだと全ての関連スタイルを手作業などで置き換えないといけません。漏れがあったり、関連ファイル以外も書き換えてしまいいろんなところの余白がずれてしまうのは怖いですよね。

しかしこの方法であれば、指定した数字を変更するだけで@jumbotron-paddingと書いた箇所すべてが変更されるのです。ミスも防げますし、カラーコードを何回も調べたりする手間も無くなります。

他にも便利な機能がLESSにはありますので詳しくは公式サイトや解説記事を調べてみてください。

背景画像を変更してみましょう。background-imageに背景画像を指定するだけ。CSSと全く一緒です!

Image18
ただこのままLESSファイルを保存しても変更は反映されません。LESSファイルはそのままだと意味がなく、一度CSSファイルに変換してあげないといけないのです。
LESSファイルをCSSファイルに変更するためには、LESSをコンパイルできるアプリ、LESS コンパイラが必要です。「LESS コンパイラ」と検索してお使いのOSやエディタにあったものを使いましょう。

コラム.おすすめLESSコンパイラ・Codekit

わたしのおすすめはCodekitです。
【公式サイト】http://incident57.com/codekit/
有料ですが分かりやすい画面で操作できるのでプログラムの知識がない人が一番使いやすいと思います。最初の数日間は無料で試せるので使ってみましょう。
Image03

ダウンロードしたらファイルをドラッグアンドドロップするだけで登録完了!CodeKitであればLESSファイルを保存するたびにCSSファイルへコンパイルしてくれます。書き出し先も変更できますのでHTMLからリンクしているパスが異なる場合は併せて設定しておきましょう。

Image10
エラーログができるのも嬉しいポイント。なぜ動かないのかがすぐ分かります。変数が間違っていたり最後の;などを忘れるときちんと教えてくれる点が便利です。

Image20
ではエラー部分を直してブラウザで確認してみましょう。

Image19
変わりました!このように、Bootstrapをカスタマイズする時には、該当パーツ名のLESSファイルを編集し、CSSにコンパイルしていけばOKです。

TIPS

各種変数だけは「variables.less」にあるのでよく覚えておきましょう。オリジナルのデザインはtheme.lessファイルを編集してHTMLからCSSファイルにリンクすることで適用できます。

5.習作のためのワンポイントアドバイス

サービスサイトの場合、管理画面も一緒にデザイン・コーディングを依頼されることがありますよね。また、社内で閲覧するだけのものであれば短い納期で作らなければならないケースが多々あります。そんな時にはぜひTwitter Bootstrapの導入をしてみてください。
class名を覚えればそれだけで利用できるので何回かコードをコピペしているうちに内容を覚えてくるはずです。

デフォルトのデザインを少しいじるだけでも十分使うことができますし、ヘッダーをブランドカラーに合わせるくらいの少ない改修で済みますので、いきなり実地に投入してもそれほど影響は大きくありません。

エンジニアの方も管理画面をBootsrapで作っているケースもあります。デザイナーの側もBootstrapが使えれば、きっと協業がラクになるはずです!

6.結局みんな同じようなデザインになっちゃう?

Twitterみたいなデザインになっちゃう?」「結局みんな同じようなデザインになっちゃうんじゃないの?」
これは非常によくある質問です。かくいう私もBootstrapを使う前はそのように思っていました。しかし以下のサイトを見てみてください。
Image15

http://kari-girl.com/ あまりTwitter Bootstrap3っぽく見えないデザインになっていると思います。


こちらも実はBootstrap3で構築しています。カスタマイズ次第でここまでやれますので、みなさんもまずは使ってみてください!

興味が湧いてきましたか?少しでも使ってみようと思っていただけると嬉しいです!

 

【あわせて読みたい!】
●●っぽい表現ができる「CSS3」サンプル集
年末までにjQueryをマスターしたい人必見!導入マニュアル+すぐ使える厳選プラグイン


 

まとめ

Bootstrapを使えば、


  • コードをしっかりかかなくても検証の少ないコード
  • レスポンシブWebデザイン
 
が簡単に作れることが分かりました。これだけでもかなりメリットが大きいですよね。それでは良いデザインライフを!

著者

イシジマ ミキ ( ザ・マーズナレッジ )
1393233_10201372008555038_925818335_n
デザイン業の他、執筆やコワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。制作実績など掲載、おまけでデザインの考え方や制作フローも書いています。
・ブログ :http://blog.woopsdez.jp
・twitter : @woopsdez
・facebook : http://facebook.com/woopsdez

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.