書籍概要

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

著者
発売日
更新日

概要

高性能・高機能CSSフレームワークとして高い人気を誇る「Bootstrap」がバージョン5になり,レガシーなIE対応やjQueryコードの完全排除,コンポーネントやフォームの刷新,CSS Grid対応などが行われた,より洗練されたモダンなフレームワークへと生まれ変わりました。本書は,Bootstrap 5の基本から,CSSクラスを利用したスタイリング,コンポーネントやJavaScriptを利用したUI実装などを解説,後半ではWebページのモックアップの実装方法やオリジナルフレームワークを作るためのカスタマイズ方法などもていねいに解説しているので,1冊でBootstrap 5の基礎から活用方法まで,すべて身に付く内容になっています。

こんな方におすすめ

  • Bootstrap 5の機能を詳しく学びたい人

サンプル

目次

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

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

第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 ドロップダウン

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

  • 7.1 BootstrapのJavaScriptプラグイン
  • 7.2 カルーセル
  • 7.3 折り畳み
  • 7.4 モーダル
  • 7.5 オフキャンバス
  • 7.6 ポップオーバー
  • 7.7 スクロールスパイ
  • 7.8 トースト
  • 7.9 ツールチップ

第8章 ユーティリティとヘルパー

  • 8.1 ColorsユーティリティとBackgroundユーティリティ
  • 8.2 Bordersユーティリティ
  • 8.3 Displayユーティリティ
  • 8.4 Sizingユーティリティ
  • 8.5 Spacingユーティリティ
  • 8.6 Flexユーティリティ
  • 8.7 Floatユーティリティ
  • 8.8 PositionユーティリティとPositionヘルパー
  • 8.9 Textユーティリティ
  • 8.10 Vertical alignmentユーティリティ
  • 8.11 その他のユーティリティクラスとヘルパークラス

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

  • 9.1 サイト概要とファイルの準備
  • 9.2 新規ファイル作成
  • 9.3 ヘッダーの作成
  • 9.4 ナビゲーションバーの作成
  • 9.5 メインビジュアルの作成
  • 9.6 コンテンツ01(ニュース)の作成
  • 9.7 コンテンツ02(お店について)の作成
  • 9.8 コンテンツ03(商品一覧)の作成
  • 9.9 コンテンツ04(クーポン)の作成
  • 9.10 コンテンツ05(インフォメーション)の作成
  • 9.11 フッターの作成
  • 9.12 リンクの設定と追加CSSの作成
  • 9.13 下層ページ(お問い合わせ)の作成

第10章 Bootstrapのカスタマイズ

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

付録 Bootstrap 5移行ガイド

サポート

現在サポート情報はありません。

商品一覧