初心者でもBootstrapを賢く使いこなす!基礎からカスタマイズ、無い機能の追加まで -これからのWebサイト設計の新しい教科書

Bootstrapは非常に便利なフレームワークですが、大切なのはその使い方。
Bootstrapの基礎知識をはじめ、カスタマイズ・無い機能の追加・運用、そしてCSSフレームワークの考え方や数多くあるフレームワークの選べ方まで、これからのWebサイト設計に役立つオススメの本を紹介します。

本の表紙

本書はBootstrapの完全マニュアルと言っていいほど、非常に充実した内容となっています。また、単に技術的なチュートリアルだけでなく、CSSフレームワークの利点や誤解、導入方法などの解説も充実しており、Webの制作そしてワークフローに関して深く知識を習得することができます。

本の表紙

これからのWebサイト設計の新しい教科書
CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装
[Amazonでみる]
[楽天でみる]

著:
松田 直樹、後藤 賢司、こもり まさあき
出版社:
MdNコーポレーション
発売日:
2015/3/23

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

誌面のキャプチャ

本書は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サイト設計の新しい教科書の目次

  1. マルチデバイスで変わるWebサイト
    デバイスの多様化が意味するもの
    マルチデバイス対応が求められる背景
    マルチデバイス対応の主流はレスポンシブWebデザイン
    「モバイルファースト」の実例と考え方
    マルチデバイスに対応したサイトならではの課題
  2. 変わる「Webデザイン」のあり方
    Webサイトは詰め込み型からプレゼンテーション型へ
    コンテンツファーストで変わるWebサイトの価値
    よりシンプルになるデザイン
    フラットデザインがもたらすもの
    ページ単位の設計からの脱却
  3. Webデザインはより「設計志向」へ
    コンポーネントの考え方を取り入れた設計へのシフト
    コンポーネントの考え方で情報設計そのものが変わる
    マルチデバイス対応サイトの4つの設計分類
    コンテンツ設計
    サイトストラクチャ設計
    レイアウト設計
    形態設計(ビジュアル、UI)
    インタラクション設計
    実装ルール設計
    ワークフロー設計
    プロジェクトの進行効率化
  4. CSSフレームワークの基本と考え方
    CSSフレームワークとは
    CSSフレームワークの設計思想
    CSSフレームワークの利点と誤解
    ワークフローにCSSフレームワークを導入する
  5. 主要なCSSフレームワークの特長
    主要なCSSフレームワーク1: Bootstrap
    主要なCSSフレームワーク2: Foundation
    その他のCSSフレームワーク
    CSSフレームワークの使いどころと選び方
    フレームワークを使った事例
    フレームワークのコンポーネントを試せるツール
  6. CSSフレームワークを使ったサイト設計
    サイト設計はまずコンテンツありき
    CSSフレームワークを中間成果物から取り入れる
    コンポーネントを設計する
    グリッドを設計してレイアウトを行う
    ワイヤーフレームやプロトタイプを作る
    CSSフレームワークでデザインカンプを作成
  7. Bootstrapの構成と基本
    Bootstrapのファイル構成
    マルチクラスを使ったBootstrapのCSS設計
    グリッドシステム
    ブレイクポイント
    画像や動画表示のレスポンシブ対応
    カラースキーム
    Bootstrapの主なコンポーネント
    JavaScriptコンポーネントの実装方法と注意点
    Foundationのコンポーネント
  8. 初級:サンプルのモックアップを作る
    Bootstrapをベースにしたモックアップの作成
    オーソドックスなグリッドパターンの実装
    デバイスサイズによってカラム数を変更する
    HTMLの構造に依存しないレイアウトテクニック
    デバイスサイズでコンテンツの表示を切り替える
    ナビゲーションバーの実装
    画面幅いっぱいのバナーエリアを実装
    アイコン付きのボタンと装飾
    カルーセルの実装
    モーダルウインドウの実装
    ツールチップを表示する
    ラベルやバッジを追加する
  9. 実践:Bootstrapをカスタマイズする
    Bootstrapのカスタマイズ方法
    カスタマイズ用のCSS設計のコツ
    Bootstrapのソースファイル
    ソースファイルに定義された変数
    カスタマイズ専用のSCSSを用意する
    ブレイクポイントを変更する
    グリッドとガター、コンテナーサイズを変更する
    縦中央揃えのグリッドを追加する
    ボタンやラベル、リンクの色を変える
    タイポグラフィをカスタマイズする
    背景画像をRetina対応にする
    テーブルをレスポンシブ対応させる
    IE8でもレスポンシブ対応させる
    その他のカスタマイズ
    使うべきコンポーネントだけをコンパイルする
  10. 実践:Bootstrapにない機能を追加する
    オフキャンバスメニューを追加する
    スクロールアップバーを追加する
    全画面の写真・動画の背景
    パララックス(視差効果)の実装
    スクロール効果の実装
    タッチ操作対応のカルーセル
    Pinterest風のタイルレイアウト
    フォームのUIを強化する
    アイコンフォントを追加する
    ブラウザやコンテンツの出し分け
    Bootstrapのリソース
  11. 実践:実装の効率化とチューニング
    HTMLコーディングをより早くするツール
    HTMLをよりセマンティックにする
    Bootstrapのアクセシビリティを向上させる
    サイトパフォーマンスを向上させる重要性と対策
    タスクを「gulp」で自動化する
    CSS・JSリソースを結合・Minifyする
    CSSから未使用のセレクタを削除して最適化する
    画像を最適化・軽量化する
    SVGを活用する
    オリジナルのアイコンフォントを作る
    Bowerでリソースを管理する

お値段はちょっと高めですが、目次でも分かるように非常に充実した内容となっています。Bootstrapを既に使ってる人、フレームワークの導入を考えてる人はぜひ書店で手にとって確かめてください。

本の表紙

これからのWebサイト設計の新しい教科書
CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装
[Amazonでみる]
[楽天でみる]

著:
松田 直樹、後藤 賢司、こもり まさあき
出版社:
MdNコーポレーション
発売日:
2015/3/23

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

top of page

©2017 coliss