CSSフレームワーク Bootstrap入門 (単行本)(作成仕様書カテゴリー)の作成例イメージ画像
カテゴリー | 作成仕様書 |
---|---|
記事登録日 | 2020-01-05 12:45:51 |
テクノロジー | CSS | フレームワーク | Bootstrap | |
概要 | https://www.shuwasystem.co.jp/book/9784798054056.html 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利用のクラスを定義する 独自クラス定義によるカスタマイズ 独自のボタンコンポーネントクラスを作る |
参照URL | |
SNS |