初心者でもBootstrapを賢く使いこなす！基礎からカスタマイズ、無い機能の追加まで -これからのWebサイト設計の新しい教科書
Post on:2015年4月3日
sponsors
Bootstrapは非常に便利なフレームワークですが、大切なのはその使い方。
Bootstrapの基礎知識をはじめ、カスタマイズ・無い機能の追加・運用、そしてCSSフレームワークの考え方や数多くあるフレームワークの選べ方まで、これからのWebサイト設計に役立つオススメの本を紹介します。
本書はBootstrapの完全マニュアルと言っていいほど、非常に充実した内容となっています。また、単に技術的なチュートリアルだけでなく、CSSフレームワークの利点や誤解、導入方法などの解説も充実しており、Webの制作そしてワークフローに関して深く知識を習得することができます。
では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。
本書は2部構成。1-7章は知識編。
最近のWeb制作事情と考え方をしっかり押さえ、CSSフレームワークを使った従来とは進化したフローが解説されています。プロジェクトのフローなど、この機会に一度見直してみるのもいいかもしれません。
国内や海外の事例も豊富に掲載されています。
キャプチャはちょうど当ブログでも訳したものがあるので、参考に。
参考：コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
4章からいよいよ、CSSフレームワーク。
フレームワークを導入することで従来のワークフローからどう変わるのか、構造的なコーディングルール、用意された豊富な基本パーツ、もちろんパーツの追加も可能、デバイスやブラウザごとの表示エラーがないなど多くの利点があり、またそれらにかかる作業時間も大幅に短縮できます。
フレームワークは気になるけど、どれを使えばいいのか？ どう使えばいいのか？ 悩む人は少なくないと思います。
Bootstrap, Foundationをはじめ、フレームワークは数多くリリースされています。それらの特徴と選び方、フレームワークに向いているプロジェクト向いていないプロジェクトなど、自分にあったフレームワークが分かります。
フレームワークにはグリッドのみ、最小限のコンポーネントのみのものも数多く存在します。
後半の8章からは、Bootstrapを使ったWebサイトの設計・実装を解説する実践編。
まずはグリッドの実装、そしてカラムやレイアウトを調整し、ナビゲーションや画像やボタンなどの配置と、Bootstrapを使ったページ作成の手順が分かります。
Bootstrapをベースにした実装もグリッドの設計から、カラム設定、ナビゲーションやコンテンツのコンポーネントの実装などここだけでもかなりのボリュームなのですが、カスタマイズ方法は更に充実しています。元のCSSファイルをベースに、ブレイクポイントの変更、グリッドの追加、エレメントのデザイン変更、そして変更したスタイルをどのようにCSSファイルにまとめるかまで、カスタマイズする際に知っておきたいことが全て学べます。
Bootstrapを利用するには、それだけでは足りないこともあります。Bootstrapにはない機能を追加することもできます。
最近のWebサイトで見かけるさまざまなコンポーネントやエフェクトの組み込み方が分かります。
サイトパフォーマンスの改善や作業効率の向上に有用なBootstrapの機能を補完するツールやテクニックもさまざまなものがあります。
巻末の付録、Bootstrap3で使用されているCSSのclassの一覧がこれまた便利。Bootstrapを使用する時だけでなく、自分で設計する際の参考にもなります。
各コンポーネントやJavaScriptで使用されているclassやdata属性も全て一覧になっています。
これからのWebサイト設計の新しい教科書の目次
-
- マルチデバイスで変わるWebサイト
- デバイスの多様化が意味するもの
- マルチデバイス対応が求められる背景
- マルチデバイス対応の主流はレスポンシブWebデザイン
- 「モバイルファースト」の実例と考え方
- マルチデバイスに対応したサイトならではの課題
-
- 変わる「Webデザイン」のあり方
- Webサイトは詰め込み型からプレゼンテーション型へ
- コンテンツファーストで変わるWebサイトの価値
- よりシンプルになるデザイン
- フラットデザインがもたらすもの
- ページ単位の設計からの脱却
-
- Webデザインはより「設計志向」へ
- コンポーネントの考え方を取り入れた設計へのシフト
- コンポーネントの考え方で情報設計そのものが変わる
- マルチデバイス対応サイトの4つの設計分類
- コンテンツ設計
- サイトストラクチャ設計
- レイアウト設計
- 形態設計（ビジュアル、UI）
- インタラクション設計
- 実装ルール設計
- ワークフロー設計
- プロジェクトの進行効率化
-
- CSSフレームワークの基本と考え方
- CSSフレームワークとは
- CSSフレームワークの設計思想
- CSSフレームワークの利点と誤解
- ワークフローにCSSフレームワークを導入する
-
- 主要なCSSフレームワークの特長
- 主要なCSSフレームワーク1: Bootstrap
- 主要なCSSフレームワーク2: Foundation
- その他のCSSフレームワーク
- CSSフレームワークの使いどころと選び方
- フレームワークを使った事例
- フレームワークのコンポーネントを試せるツール
-
- CSSフレームワークを使ったサイト設計
- サイト設計はまずコンテンツありき
- CSSフレームワークを中間成果物から取り入れる
- コンポーネントを設計する
- グリッドを設計してレイアウトを行う
- ワイヤーフレームやプロトタイプを作る
- CSSフレームワークでデザインカンプを作成
-
- Bootstrapの構成と基本
- Bootstrapのファイル構成
- マルチクラスを使ったBootstrapのCSS設計
- グリッドシステム
- ブレイクポイント
- 画像や動画表示のレスポンシブ対応
- カラースキーム
- Bootstrapの主なコンポーネント
- JavaScriptコンポーネントの実装方法と注意点
- Foundationのコンポーネント
-
- 初級：サンプルのモックアップを作る
- Bootstrapをベースにしたモックアップの作成
- オーソドックスなグリッドパターンの実装
- デバイスサイズによってカラム数を変更する
- HTMLの構造に依存しないレイアウトテクニック
- デバイスサイズでコンテンツの表示を切り替える
- ナビゲーションバーの実装
- 画面幅いっぱいのバナーエリアを実装
- アイコン付きのボタンと装飾
- カルーセルの実装
- モーダルウインドウの実装
- ツールチップを表示する
- ラベルやバッジを追加する
-
- 実践：Bootstrapをカスタマイズする
- Bootstrapのカスタマイズ方法
- カスタマイズ用のCSS設計のコツ
- Bootstrapのソースファイル
- ソースファイルに定義された変数
- カスタマイズ専用のSCSSを用意する
- ブレイクポイントを変更する
- グリッドとガター、コンテナーサイズを変更する
- 縦中央揃えのグリッドを追加する
- ボタンやラベル、リンクの色を変える
- タイポグラフィをカスタマイズする
- 背景画像をRetina対応にする
- テーブルをレスポンシブ対応させる
- IE8でもレスポンシブ対応させる
- その他のカスタマイズ
- 使うべきコンポーネントだけをコンパイルする
-
- 実践：Bootstrapにない機能を追加する
- オフキャンバスメニューを追加する
- スクロールアップバーを追加する
- 全画面の写真・動画の背景
- パララックス（視差効果）の実装
- スクロール効果の実装
- タッチ操作対応のカルーセル
- Pinterest風のタイルレイアウト
- フォームのUIを強化する
- アイコンフォントを追加する
- ブラウザやコンテンツの出し分け
- Bootstrapのリソース
-
- 実践：実装の効率化とチューニング
- HTMLコーディングをより早くするツール
- HTMLをよりセマンティックにする
- Bootstrapのアクセシビリティを向上させる
- サイトパフォーマンスを向上させる重要性と対策
- タスクを「gulp」で自動化する
- CSS・JSリソースを結合・Minifyする
- CSSから未使用のセレクタを削除して最適化する
- 画像を最適化・軽量化する
- SVGを活用する
- オリジナルのアイコンフォントを作る
- Bowerでリソースを管理する
お値段はちょっと高めですが、目次でも分かるように非常に充実した内容となっています。Bootstrapを既に使ってる人、フレームワークの導入を考えてる人はぜひ書店で手にとって確かめてください。
献本の御礼
最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
