〜Webデザイナーのための簡単サイト構築術〜2013/10/25こんにちは!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。Bootstrapと聞くと、エンジニアやマークアップエンジニアが使うものだと思っていませんか?それは大きな間違いです。コーディングが苦手なデザイナーこそ、一番便利に使えるものなのです。コーディングする必要がなく、コピペし少しいじればサイトが作れてしまいます。Bootstrap入門をお届けします。Bootstrap自体の説明をします。ご存じの方は「3.実際に作ってみましょう!」からお読みください。Bootstrap(以下、Bootstrap)とは、CSSフレームワークのひとつです。CSSフレームワークとはHTMLにCSSファイルを読みこむだけでそれらしいデザインが適用されるもののことです。いつも同じようなコードを何行も書いていてうんざりしたことはありませんか?Bootstrapにはよく使うものが便利にまとまっていて、さらにモダンな見た目のサイトを作ることができます。【公式サイト】http://getbootstrap.com/2.Bootstrap使うと何が便利なの?2-1.ブラウザごとの表示崩れが少ない!イチからコードを書く時、一番大変なのが各種ブラウザでの表示の違いですよね。多少の違いならまだしも、カラムが落ちてしまうなどコンテンツが読めなくなってしまう事態は避けたいものです。これらを回避するためには、今まではコーディングの豊富な知識が必要でした。Bootstrapはあらかじめブラウザの差異を修正してありますので、知識がなくても表示崩れの無いWebサイトが作れます。各種OS、各種ブラウザの検証をするのはとても大変です。その手間が少なくなるというだけでも使う価値を感じられますね。対応しているブラウザは以下の通りです。全てのブラウザに対応している訳ではありませんので注意が必要です。IE7以下とFirefox3.6はサポート打ち切りになりました。IE8もそのままでは意図しない挙動をすることがありますので、Respond.jsを用いる必要があります。2-2.レスポンシブWebデザインが簡単につくれる!最近は私も、クライントにレスポンシブWebデザインを求められる機会が増えてきました。レスポンシブWebデザインというとコーディングの知識がいろいろ必要そうで、イチから作ろうと思うと少し敬遠してしまいます。そこでBootsrap!Bootstrap3にバージョンアップし、レスポンシブWebデザインに特化されました。モバイルのデザインをベースとし、それぞれのデバイスサイズに展開していく「モバイルファースト」のフローになっています。公式サイトもBootstrapで作られており、レスポンシブWebデザインの様子が確認できます。ウインドウ幅を変更するとメニューが格納されるなど見た目が調整されています!デザインを変更するには、要素を構成するLESSファイル(後述)に直接メディアクエリを用いて追記すればOKです。以前のバージョンを利用していた人はここで戸惑うことが多いと思います。レスポンシブ用に用意されていた各種ファイルがなくなったのです。以前のバージョンからBootstrap3に乗り換える方は、jumbotron.lessファイルなどを見るとどのように書かれているか分かりますので参考にすると良いでしょう。LESSファイルってなに?怖い!聞き慣れない言葉が出てきました。LESSファイルとは、CSSの拡張メタ言語と呼ばれるもので、プログラミングの要領でCSSが書ける独自の言語です。色コードをそれぞれのプロパティに書いていると、色を変更するときに全て書き換えなくてはならず、とても面倒です。LESSファイルでは一箇所色を変更したら関連するファイルが全て変更されるように作ることができます。いえ「プログラミング」と聞くとじんましんが出てしまう方も多いはず。これまで通り、CSSを書いてもちゃんと動きますのでご安心ください。導入方法はこちらを参照すると良いでしょう。2-3.よく使うインターフェイスが揃っているボタンやタブ式ナビ、ドロップダウンメニュー。その他おおよそWebデザインで必要とされるパーツが揃っています。【コンポーネンツの一覧】http://getbootstrap.com/components/ボタンタブ式ナビドロップダウンメニューサンプルコードも一緒にまとまっています。方はコピペしながら習作を作ってみましょう(この後に解説します)。公式サイトは英語ですが、上からサンプルコードを追っていけばちゃんと出来上がるようになっていますよ。【公式サイト】http://getbootstrap.com/getting-started/それでは、実際に手を動かし作ってみましょう!3.実際に作ってみましょう!ここからはBootstrapの使い方を見て行きます。このエントリではデフォルトのデザインを使って構築します。fonts」から、コンパイル済み(LESSファイルをCSSファイルに変換している)ファイルをダウンロードします。ファイル構成はこのようになっています。ここにindex.htmlを作成します。Bootstrapのデザインやパーツを利用することができます。template」のコードをまるっとコピーしてして使います。viewportとstylesheetのリンク、そしてIE8などに対応するためのjsの読み込みコードが書かれています。まるっとコピーしてindex.htmlとして保存すればOK!もしindex.htmlの場所を異なる位置にする場合はパスを修正しておきましょうね。ブラウザで開くとこのような見た目になります。navbarのソースコードをコピーしてまた貼り付けます。Bootstrapには黒バージョンのナビも用意されています。追記すれば良いようです。タイトル部分を作ってみましょう。Jumbotronのサンプルコードを貼り付けます。コピペだけでタイトルを入れられそうなスペースができました!ただ、ウインドウ幅ピッタリにくっついてしまう点が気になります。左右に余白を作り、真ん中に寄せましょう。Containersを参考にするとcontainerというclassをつければカンタンに真ん中寄せにできるようです。できました!3−3.カスタマイズしてみよう!簡単なカスタマイズをしてみます。今回はjumbotronのグレーで味気ない背景を写真の背景に変更してみます。そのままCSSファイルをいじりたいところですが、スタイルを上書きしようとするとプロパティが多くコードが複雑になってしまいます。不要なスタイルを除外するためのスタイルをたくさん書くのは、あまり美しくありません。BootstrapはLESSによってスタイルが定義されていますので、カスタマイズする時にはこちらを編集します。ほとんどCSSファイルの書き方と一緒です。TIPSLESSのソースコードはGitHubにあります(Bootstrap本体には同梱されていません)【GitHub】https://github.com/twbs/bootstraplessフォルダをダウンロードしておきましょう。パーツごとに細かくファイルが分かれています。jumbotron.lessを開いてみます。CSSとほとんど同じ書き方であることがわかると思います。値を入れる場所に変なものが入っていることが気になります。これは変数という、別ファイルで指定してある数値を入れてくれるものなのです(変数は今回覚えなくて大丈夫です!)普段、何かしらの値を入れる場所に@jumbotron-paddingという文字列が入っていることがわかります例えばpaddingの@jumbotron-paddingの値を15pxと指定するとします。CSSだと全ての関連スタイルを手作業などで置き換えないといけません。漏れがあったり、関連ファイル以外も書き換えてしまいいろんなところの余白がずれてしまうのは怖いですよね。この方法であれば、指定した数字を変更するだけで@jumbotron-paddingと書いた箇所すべてが変更されるのです。ミスも防げますし、カラーコードを何回も調べたりする手間も無くなります。他にも便利な機能がLESSにはありますので詳しくは公式サイトや解説記事を調べてみてください。背景画像を変更してみましょう。background-imageに背景画像を指定するだけ。CSSと全く一緒です!ただこのままLESSファイルを保存しても変更は反映されません。LESSファイルはそのままだと意味がなく、一度CSSファイルに変換してあげないといけないのです。コンパイラが必要です。コンパイラ」と検索してお使いのOSやエディタにあったものを使いましょう。コラム.おすすめLESSコンパイラ・CodekitわたしのおすすめはCodekitです。【公式サイト】http://incident57.com/codekit/有料ですが分かりやすい画面で操作できるのでプログラムの知識がない人が一番使いやすいと思います。最初の数日間は無料で試せるので使ってみましょう。ダウンロードしたらファイルをドラッグアンドドロップするだけで登録完了!CodeKitであればLESSファイルを保存するたびにCSSファイルへコンパイルしてくれます。書き出し先も変更できますのでHTMLからリンクしているパスが異なる場合は併せて設定しておきましょう。エラーログができるのも嬉しいポイント。動かないのかがすぐ分かります。変数が間違っていたり最後の;などを忘れるときちんと教えてくれる点が便利です。エラー部分を直してブラウザで確認してみましょう。変わりました!このように、Bootstrapをカスタマイズする時には、該当パーツ名のLESSファイルを編集し、CSSにコンパイルしていけばOKです。TIPS各種変数だけは「variables.less」にあるのでよく覚えておきましょう。オリジナルのデザインはtheme.lessファイルを編集してHTMLからCSSファイルにリンクすることで適用できます。5.習作のためのワンポイントアドバイスサービスサイトの場合、管理画面も一緒にデザイン・コーディングを依頼されることがありますよね。社内で閲覧するだけのものであれば短い納期で作らなければならないケースが多々あります。Bootstrapの導入をしてみてください。class名を覚えればそれだけで利用できるので何回かコードをコピペしているうちに内容を覚えてくるはずです。デフォルトのデザインを少しいじるだけでも十分使うことができますし、ヘッダーをブランドカラーに合わせるくらいの少ない改修で済みますので、いきなり実地に投入してもそれほど影響は大きくありません。エンジニアの方も管理画面をBootsrapで作っているケースもあります。デザイナーの側もBootstrapが使えれば、きっと協業がラクになるはずです!6.結局みんな同じようなデザインになっちゃう?「Twitterみたいなデザインになっちゃう?」「結局みんな同じようなデザインになっちゃうんじゃないの?」これは非常によくある質問です。いう私もBootstrapを使う前はそのように思っていました。以下のサイトを見てみてください。Bootstrap3っぽく見えないデザインになっていると思います。こちらも実はBootstrap3で構築しています。年末までにjQueryをマスターしたい人必見!導入マニュアル+すぐ使える厳選プラグインまとめBootstrapを使えば、コードをしっかりかかなくても検証の少ないコードレスポンシブWebデザインが簡単に作れることが分かりました。これだけでもかなりメリットが大きいですよね。)デザイン業の他、執筆やコワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。制作実績など掲載、おまけでデザインの考え方や制作フローも書いています。