今必要とされているHTMLとCSSをしっかり学べる、CSSフレームワークを使いこなせるようになるオススメの本

CSSフレームワークを使うために必要な基礎知識、グリッドデザイン、レスポンシブ、Bootstrapをベースにグリッドレイアウトや各要素を実装し、スタイルやスクリプトを要件にあわせてカスタマイズする実務に役立つテクニックを身につけることができるオススメの本を紹介します。

本書はHTMLとCSSはなんとなく使えて、これから勉強してフロントエンジニアになりたい人、ブランクが空いてしまって最近の制作事情が分からなくなってしまった人、HTMLやCSSやJavaScriptを実際にどのように使えばいいのか分からない人、Bootstrapでしっかりしたサイトを作りたい人、そんな方にぴったりだと思います。

紙面のキャプチャで、中身を少しだけご紹介。

本書は6章構成で、5つのサンプルサイトを作りながら、Web制作の基本、最近の制作事情を把握し、一歩進んだCSS, jQuery, Bootstrapのカスタマイズまで実践で役立つ知識を身につけることができます。

本書でベースとなるのはCSSフレームワークで、一からこつこつ学ぶのではなく、よいお手本を徹底的に身につけるスタンスで学んでいきます。そのためリファレンス的な内容は最低限となっています。

1章では、Web制作の基本的な知識から、最近のレイアウト、CSSフレームワーク、そしてBootstrapのインストールまで。

2章からはいよいよ実践。
レイアウトの基礎となるグリッドシステム、Bootstrapのレスポンシブ対応のグリッドの使い方・各エレメントのスタイルについてじっくり学んでいきます。

Bootstrapのグリッドは柔軟性があり、非常に使いやすく、グリッドだけを使用してページ作成をしている制作者も多いと思います。基本的な使い方からちょっとした応用まで豊富なサンプルとコードで丁寧に分かりやすく解説されています。

3章はスタイルのカスタマイズ。レイアウトするのが苦手な人が多いフォームもパーツごと、そして全体のレイアウトなど、詳しく解説されています。

4章はBootstrapのJavaScriptを使ったカスタマイズ。標準の「bootstrap.js」を使い、タブやドロップダウン、アラートボックス、ツールチップ、ポップオーバー、アコーディオンなどを実装します。

5章はスクリプトにjQueryを加え、更に面白い仕掛けを取り入れていきます。

jQueryを使う大きな利点は、豊富なプラグイン。商用でも無料で利用できるものが数多くあります。それらを使い、さまざまな機能を実装します。

プラグインのファイル構成、基本的な使い方、オプションの設定方法、ちょっとしたアレンジ方法や実装時に注意すべき点などが詳しく書かれています。

扱っているプラグインは、コンテンツスライダー、ニュースティッカー、レンガ状レイアウトのMasonry、カウントダウン、レーティング表示です。

6章ではより自由なデザインをするために、Bootstrapをベースに徹底的にカスタマイズしていきます。

スクロール遷移やレスポンシブ対応のヘッダといった最近のWebサイトで見かける仕掛けだけでなく、郵便番号から住所を自動入力する機能まで、かっこいいものから実用的なものまで揃っています。

各解説は非常に分かりやすく、挫折することなく実装できると思います。

郵便番号から住所入力も、初心者の人でも簡単にできる方法からAPIを使った少し高度な実装方法まで詳しく解説されています。

最後の付録では、CSSフレームワークやBootstrapのその先はどのように進めればいいのかのアドバイスです。単に目の前の知識を身につけるだけでなく、どこに進むのかでその知識の身のつけ方・考え方も変わると思います。

新しいWebデザイン&制作入門講座の目次

1. Webデザイン制作の基本

   Webサイトができるまで

   「グリッド」と「レスポンシブ」を意識する

   CSSフレームワークは必須の時代

   Bootstrapをセッティングする

   フレームワークを活用するCSSの基礎知識

2. グリッドレイアウトとCSSフレームワークの基本

   Botostrapの基本レイアウトスタイルを理解する

   レイアウトの基礎となるグリッドシステム

   メディアクエリとViewport設定でレスポンシブ対応

   グリッドを駆使してレスポンシブ対応

   テキストのデフォルトスタイル

   リストのデフォルトスタイル

   テーブルのスタイリング

   画像のデフォルトスタイル

3. フォームのレイアウトとスタイルのカスタマイズ

   CSSフレームワークのスタイルをカスタマイズする

   基本のフォームパーツのレイアウト

   フォームパーツのサイズや色を変える

   フォームの「活性」「非活性」の状態を表現する

   ボタンのデザインを変更する

   全体と特定エリアのスタイルを上書きする

   Webフォントを使う

4. 動的コンテンツを追加する

   BootstrapのJavaScriptを利用する

   タブメニューとドロップダウンメニューを配置する

   アラートボックスを追加する

   ツールチップとポップオーバーを追加する

   アコーディオンインターフェイスを追加する

5. jQueryとの組み合わせでコンテンツを作る

   jQueryと組み合わせて動的表現を行う

   コンテンツスライダーを設置する

   ニュースティッカーを設置する

   タイル表示を設置する

   カウントダウン表示を設置する

   レーティング表示を設置する

6. より自由なデザインにしてみる

   Bootstrapをベースにしながら徹底的にカスタマイズ

   ページ遷移しないデザインにする（スクロール遷移）

   「ページトップに戻る」ボタンを設置する

   固定グローバルナビを設置する

   Lightboxを実装する

   郵便番号からの住所自動入力を実装する

7. 付録: CSSフレームワークをさらに活用する

   CSSメタ言語の利用を考える

   CMSのテンプレートとして利用

   自分だけのフレームワークに仕上げる

本書で使用されているサンプルは、特設サイトからすべてダウンロードできます。

今必要とされている知識を基礎から学べ、それをどのように使い、実務で役立てるかが分かる一冊になっています。しっかりとした知識を身につけたい初心者、壁にぶちあたってしまった中級者にオススメです！

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス