CSSフレームワーク Bootstrap入門

概 要

Bootstrapは、どんなデバイスでも見やすく表示する「レスポンシブデザイン」を強力にサポートするWeb開発用CSSフレームワークです。本書は、Bootstrap 4.0をベースに、レスポンシブデザインおよびBootstrapの基本レイアウト機能「グリッドデザイン」によるWebデザインについて解説します。また、Bootstrapの豊富なオリジナルGUIコンポーネントやユーティリティの使い方、さらにはjQueryによるスクリプト制御の方法なども紹介します。

著者 掌田津耶乃
価格 本体2800円(税別)
ISBN 978-4-7980-5405-6
発売日 2018/2/22
判型 B5変
ページ数 412
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Chapter 1 Bootstrapの基礎知識

1-1 Bootstrapとは何か

モバイル時代のWebデザインとは?

Bootstrapとは?

1-2 Bootstrapの利用

Bootstrapの3つの利用方法

利用方法(1) Bootstrapをダウンロード

Bootstrapを利用する

利用方法(2) CDN

利用方法(3) npm

JavaScriptコンポーネントに必要な3つのライブラリ

(1)Bootstrap本体スクリプト

(2)jQueryについて

(3)Popper.jsについて

JavaScript利用時の基本コード

Sassについて

Sassファイルのコンパイル

Chapter 2 グリッドレイアウト

2-1 グリッドレイアウトの基本

グリッドレイアウトとは何か

グリッドレイアウトの基本タグ構成

グリッドレイアウトの基本コード

Webサイトの基本構成

サンプルを作成する

列数と画面サイズ

グリッドレイアウトを試す

複数の幅指定

2-2 グリッドレイアウトを更に使いこなす

可変コンテナについて

コンテナのネスト

自動調整とauto

余白列の利用

両端に配置するml/mr

コンテンツの位置揃え

no-guttersによる余白取り消し

並び順の変更

Chapter 3 コンテンツの基本デザイン

3-1 コンテンツの基本要素

見出しについて

コンテンツとコードの記述

テキストの装飾

リストの表示

定義リスト

テーブル

ヘッダーのデザイン設定

ストライプ・テーブル(table-striped)

マウスのホバーで選択するtable-hoverクラス

小さめのテーブル表示をするtable-smクラス

レスポンシブ・テーブル(table-responsive)

イメージの表示(img-fluidおよびimg-thumbnail)

3-2 スタイル・ユーティリティ

スタイル・ユーティリティとは?

色のクラスの基本

背景色の設定(bg)

テーブルのカラー指定(table)

ボーダーの指定

ボーダーの色指定

角を丸める(rounded)

インライン(d-inline)とブロック(d-block)

フロート表示(float)

フレックスによる整列(flex)

間隔の調整(marginとpadding)

サイズの調整(widthとheight)

テキストの位置揃え

Chapter 4 フォームの基本

4-1 フォームの利用

フォームのスタイルについて

Bootstrapのクラスを指定する

ラベルとヒント

form-controlクラスについて

チェックボックスとラジオボタン

コントロールのサイズ指定

ボタンサイズの指定

フォームを利用不可にする

4-2 フォームのレイアウト

グリッドレイアウトとフォーム

フォームのグリッド表示

form-rowによるrow設定

ボタンのブロック化

インライン表示について

コラム幅の指定

インプットグループ(input-group)について

4-3 カスタムフォーム

カスタムフォームとは?

カスタムコントロールを使う

Chapter 5 オリジナルGUIの利用

5-1 ボタンコンポーネント

プッシュボタンのスタイル

アウトラインボタン

リンクとボタン

アクティブと非アクティブ

ボタンの丸みを変える

トグルボタン

ボタングループ

チェックボックスのグループ表示

ラジオボタンのグループ化

ボタンの垂直表示

5-2 ドロップダウン、プログレスバー、バッジ

ドロップダウンメニュー

ドロップダウンメニューを作成する

メニュー項目について

スプリットボタン

プログレスバー

アニメーション表示

マルチバー表示

バッジについて

ピルバッジについて

5-3 リストグループ

リストグループとは?

ボタンやリンクをグループ化する

アクションの設定(list-group-item-action)

アクティブおよびディスエーブル

項目の色指定

コンテンツリストグループ

コンテンツの切り替え表示

Chapter 6 複雑なコンテンツの構築

6-1 フィギュアとカード

フィギュア(図表)

円形イメージ

カードについて

タイトルとリンク

イメージカード

カードヘッダーとカードフッター

カードのカラー化

ボーダーのカラー化

イメージオーバーレイ

カードグループ

カードデッキ

カードコラム

6-2 ジャンボトロン、スタティックポップオーバー、

メディアオブジェクト

ジャンボトロンとは?

DisplayとLead

角の丸みとcontainer

スタティックポップオーバー

メディアオブジェクト

カラーを指定する

'<ul>や<ol>によるリスト化

メディアオブジェクトの階層化

メディアの整列

6-3 カルーセル

カルーセルとは?

イメージをスライドショーする

操作用コントローラを追加する

インジケーターの表示

イメージにキャプションを付ける

Chapter 7 ナビゲーション

7-1 Navコンポーネント

Navコンポーネントとは?

垂直リスト

タブ表示について(nav-tabs)

ピル型ボタン(nav-pills)

幅いっぱいに表示する(nav-fill)

フレックスによる整列調整

7-2 NavBar

NavBarとは?

項目を折りたたむ

インラインフォーム

バーを固定する

エクスターナルコンテンツ

7-3 パンくずリストとページネーション

パンくずリストとは?

カラーと上下の固定表示

ページネーション

アクティブとディスエーブル

ページネーションのサイズ

位置揃えについて

7-4 スクロールスパイ

スクロールスパイとは?

スクロールスパイの適用条件

スクロールスパイを利用する

横にリストを配置する

階層ナビゲーションの利用

Chapter 8 アラートとモーダルダイアログ

8-1 アラートとモーダルの基本

アラートの表示

アラートコンテンツ用のクラス

アラートを閉じる

モーダルダイアログの表示

ダイアログの基本設計

プッシュボタンでダイアログを呼び出す

ダイアログを呼び出す

アラートをモーダル表示する

ポップオーバーをモーダル表示する

8-2 ツールチップ、ポップオーバー、コラプス

消えるインターフェイス

ツールチップを表示する

ボタンにツールチップを表示する

ポップオーバーを表示する

コラプスについて

複数コンテンツの表示

アコーディオン

アコーディオンを使ってみる

Chapter 9 スクリプトによる操作(1)

9-1 基本フォームのスクリプト利用

プッシュボタンの利用

BootstrapはjQueryが基本

ボタンカラーを操作する

コントロールをダイナミックに生成する

activeとdisabled

バリデーションについて

チェックボックスの選択状態(prop)

プログレスバーの操作

ツールチップの設定

9-2 ポップオーバー、アラート、モーダルダイアログ

ポップオーバー

フォーカスによる非表示

HTMLを利用したポップオーバーの表示

<div>タグをアラートにする

アラートを閉じる

アラートを生成する

モーダルダイアログの表示

ダイアログの入力値を利用する

完全なモーダルにするには?

Chapter 10 スクリプトによる操作(2)

10-1 独自GUIのスクリプト利用

カルーセル

手動で移動する

スライドイベントについて

コラプス

コラプスを生成する

ジャンボトロン

リストグループの項目追加

リストグループの項目の並び順操作

10-2 Navs、NavBar、スクロールスパイ

Navのタブ表示を切り替える

タブの切替イベント

NavBarの項目追加

NavBarでのコラプスの項目展開イベント

スクロールスパイの項目追加

スクロールのイベント

Appendix スタイルのカスタマイズについて

SCSSによるBootstrapクラスのカスタマイズ

style.scssからBootstrapをインポートする

Mixinを利用する

_border-radius.scssを変更する

独自Mixinを定義する

独自Mixin利用のクラスを定義する

独自クラス定義によるカスタマイズ

独自のボタンコンポーネントクラスを作る

PR

秀和システム