Bootstrap 4 フロントエンド開発の教科書

[表紙]Bootstrap 4 フロントエンド開発の教科書

B5変形判/480ページ

定価(本体3,280円+税)

ISBN 978-4-297-10020-9

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

現在のWebデザイン,およびWebフロントエンド開発の現場では,CSSフレームワークの理解と習熟が必須となっています。本書は,高性能・高機能CSSフレームワークとして高い人気を誇る「Bootstrap」の本格的な解説書です。最新のBootstrap 4に完全対応し,CSSフレームワークの基本から,CSSクラスを利用したスタイリング,コンポーネントやJavaScriptを利用したUI実装,オリジナルテーマによるカスタマイズ方法まで,Bootstrap 4の全機能が身に付く内容になっています。一歩先を目指すWebデザイナー&Webフロントエンドエンジニアにお勧めの一冊です!

こんな方におすすめ

  • Bootstrap 4の基礎と活用方法をしっかり身に付けたい人

目次

第1章 イントロダクション

  • 1.1 Webアプリケーションフレームワークの基本
  • 1.2 Bootstrapの特徴
  • 1.3 Bootstrapの歴史
  • 1.4 Bootstrapの導入

第2章 Bootstrapのレイアウト

  • 2.1 Bootstrapのグリッドシステム
  • 2.2 列の自動レイアウト
  • 2.3 レスポンシブなグリッドシステム
  • 2.4 カラムの整列
  • 2.5 カラムの並べ替え
  • 2.6 レイアウトのためのユーティリティ

第3章 基本的なスタイリング

  • 3.1 タイポグラフィ
  • 3.2 コード
  • 3.3 画像
  • 3.4 テーブル
  • 3.5 図表
  • 3.6 Rebootによる初期設定

第4章 基本的なコンポーネント

  • 4.1 ジャンボトロン
  • 4.2 アラート
  • 4.3 バッジ
  • 4.4 プログレス
  • 4.5 カード
  • 4.6 メディアオブジェクト

第5章 ナビゲーションのコンポーネント

  • 5.1 ナビゲーション
  • 5.2 ナビゲーションバー
  • 5.3 パンくずリスト
  • 5.4 リストグループ
  • 5.5 ページネーション

第6章 フォームとボタンのコンポーネント

  • 6.1 フォーム
  • 6.2 入力グループ
  • 6.3 ボタン
  • 6.4 ボタングループ
  • 6.5 ドロップダウン
  • 6.6 ドロップダウンのJavaScript使用

第7章 JavaScript を利用したコンポーネント

  • 7.1 BootstrapのJavaScriptプラグイン
  • 7.2 カルーセル
  • 7.3 カルーセルのJavaScript使用
  • 7.4 折り畳み
  • 7.5 折り畳みのJavaScript使用
  • 7.6 モーダル
  • 7.7 モーダルのJavaScript使用
  • 7.8 スクロールスパイ
  • 7.9 スクロールスパイのJavaScript使用

第8章 ユーティリティ

  • 8.1 Colorユーティリティ
  • 8.2 Borderユーティリティ
  • 8.3 Displayユーティリティ
  • 8.4 Sizingユーティリティ
  • 8.5 Spacingユーティリティ
  • 8.6 Flexユーティリティ
  • 8.7 Floatユーティリティ
  • 8.8 Positionユーティリティ
  • 8.9 Textユーティリティ
  • 8.10 Vertical alignユーティリティ
  • 8.11 その他のユーティリティクラス

第9章 Bootstrapでモックアップを作る

  • 9.1 サイト概要とファイルの準備
  • 9.2 新規ファイル作成
  • 9.3 ヘッダーの作成
  • 9.4 ナビゲーションバーの作成
  • 9.5 メインビジュアルの作成
  • 9.6 コンテンツ01(News)の作成
  • 9.7 コンテンツ02(About)の作成
  • 9.8 コンテンツ03(Menu)の作成
  • 9.9 コンテンツ04(Coupon)の作成
  • 9.10 コンテンツ05(Information)の作成
  • 9.11 フッターの作成
  • 9.12 リンクの設定と追加CSSの作成
  • 9.13 下層ページ(Contact)の作成

第10章 Bootstrapのカスタマイズ

  • 10.1 Bootstrapのオリジナルスタイルを上書きする
  • 10.2 Sassを使ってカスタマイズする
  • 10.3 CSS変数を利用する