今必要とされているHTMLとCSSをしっかり学べる、CSSフレームワークを使いこなせるようになるオススメの本
Post on:2015年9月29日
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デザイン&制作入門講座の目次
-
- Webデザイン制作の基本
- Webサイトができるまで
- 「グリッド」と「レスポンシブ」を意識する
- CSSフレームワークは必須の時代
- Bootstrapをセッティングする
- フレームワークを活用するCSSの基礎知識
-
- グリッドレイアウトとCSSフレームワークの基本
- Botostrapの基本レイアウトスタイルを理解する
- レイアウトの基礎となるグリッドシステム
- メディアクエリとViewport設定でレスポンシブ対応
- グリッドを駆使してレスポンシブ対応
- テキストのデフォルトスタイル
- リストのデフォルトスタイル
- テーブルのスタイリング
- 画像のデフォルトスタイル
-
- フォームのレイアウトとスタイルのカスタマイズ
- CSSフレームワークのスタイルをカスタマイズする
- 基本のフォームパーツのレイアウト
- フォームパーツのサイズや色を変える
- フォームの「活性」「非活性」の状態を表現する
- ボタンのデザインを変更する
- 全体と特定エリアのスタイルを上書きする
- Webフォントを使う
-
- 動的コンテンツを追加する
- BootstrapのJavaScriptを利用する
- タブメニューとドロップダウンメニューを配置する
- アラートボックスを追加する
- ツールチップとポップオーバーを追加する
- アコーディオンインターフェイスを追加する
-
- jQueryとの組み合わせでコンテンツを作る
- jQueryと組み合わせて動的表現を行う
- コンテンツスライダーを設置する
- ニュースティッカーを設置する
- タイル表示を設置する
- カウントダウン表示を設置する
- レーティング表示を設置する
-
- より自由なデザインにしてみる
- Bootstrapをベースにしながら徹底的にカスタマイズ
- ページ遷移しないデザインにする(スクロール遷移)
- 「ページトップに戻る」ボタンを設置する
- 固定グローバルナビを設置する
- Lightboxを実装する
- 郵便番号からの住所自動入力を実装する
-
- 付録: CSSフレームワークをさらに活用する
- CSSメタ言語の利用を考える
- CMSのテンプレートとして利用
- 自分だけのフレームワークに仕上げる
本書で使用されているサンプルは、特設サイトからすべてダウンロードできます。
今必要とされている知識を基礎から学べ、それをどのように使い、実務で役立てるかが分かる一冊になっています。しっかりとした知識を身につけたい初心者、壁にぶちあたってしまった中級者にオススメです!
献本の御礼
最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors