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

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

本のキャプチャ

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

本のキャプチャ

実践でスグに役立つ
新しいWebデザイン&制作入門講座
[Amazonでみる]
[楽天でみる]

著:
下野 宏
出版社:
SBクリエイティブ
発売日:
2015/9/26

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

誌面のキャプチャ

本書は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のテンプレートとして利用
    自分だけのフレームワークに仕上げる

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

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

本のキャプチャ

実践でスグに役立つ
新しいWebデザイン&制作入門講座
[Amazonでみる]
[楽天でみる]

著:
下野 宏
出版社:
SBクリエイティブ
発売日:
2015/9/26

献本の御礼

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

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

top of page

©2018 coliss