総合実習：LPを作ってみよう【図解たっぷりBootstrap5入門】

1. Carouselページ内、“キャプション”にあるテンプレートコードをコピー・アンド・ペースト。
2. スライド表示する画像のパスを入力します。
   素材使用される場合は、hero1～ hero3.jpg までの3枚です。
3. キャプションを囲う要素（div.carousel-caption）それぞれにtext-dark-emphasisクラスを追加。文字色を濃灰色にする。
4. キャプションの見出しタグを、それぞれ h5 から h2に変更。

1. キャプションの見出しにdisplay-3クラスを追加。
2. その下のｐタグにleadクラスを追加。
3. カルーセルのimgタグにopacity-75クラスを追加。

1. divタグを新しく書き、containerクラスとmt-5クラスを指定する。
2. 作成したdivの子要素として、h2タグとpタグを書く
3. h2、pタグの中にそれぞれテキストを入れる（SAMPLE TEXTなどでOK）。
4. divタグにtext-centerクラスを追加。文字を中央配置にする。
5. h2タグにpy-3クラスを指定し、文章との間隔を作る。

1. </p> と </div> との間に、新しくdivタグを１つ追加。
2. 作成したdivタグの中にアイコンを3つ、それぞれiタグで追加。
3. iタグにdisplay-5クラスを指定し、アイコンを大きくする。
4. divタグにd-flexクラスとjustify-content-aroundクラスを指定。アイコンの配置を整える。
5. divタグにmt-5クラスを追加。上の文字との間隔を作る。

【ナビゲーション】

1. メールアドレスと会員登録の間に、ボタンのテンプレートコードを貼り付ける。
2. ボタンの文字を「予約する」に打ち替える
3. ボタンタグにtext-nowrap me-2クラスを追加する。

【カルーセル内】

1. div.carousel-caption 内、</p> の後にボタンのテンプレートコードを貼り付ける。
2. ボタンのテキストを「Large button」にする
3. ボタンタグにbtn-lg mb-4クラスを追加。
4. 残り２つの div.carousel-caption 内にもボタンのコードを貼り付ける

1. BootstrapドキュメントAlertsのページにある、「アラートを閉じる」のテンプレートコードをコピー。
2. htmlファイルの、ナビゲーションとカルーセルの間に貼り付ける。
3. 完成画像と同じ色になるよう、配色のクラスを変更する。
4. アラート全体を囲うdivにmb-0クラスを追加し、カルーセルとの隙間を無くす。
5. strongタグの中身を「ログアウトしました」に変更する。
6. 上記タグの後に「会員サービスを利用する場合はログインしてください 」と入力。
7. strongタグにme-5クラスを追加し、間をあける。
8. テキストの「ログイン」部分をalert-linkクラスを指定したaタグで囲う。

1. 1で作ったテキスト部分の下に、divタグを新たに作成する。
2. 作ったdivタグにcontainer mt-5py-5クラスを指定。
3. “グリッドカード”のテンプレートコードをコピーし、div.container内に貼り付け。
4. rowクラスが指定されているdivタグに、row-cols-xxl-4クラスを追加する。

1. imgタグの画像パスを変更し、素材のcard.jpgを表示させる。
2. カードタイトルのh5タグをh3に変更し、h5クラスを追加する。
3. <p class="card-text">の下にdivタグを追加。
4. 追加したdivタグに、text-endクラスを指定する。
5. divタグの中にaタグを作成する。リンク先は空（ href="#" ）でOK。
6. aタグにicon-link icon-link-hover align-items-baselineクラスを指定。
7. aタグの中に「詳しくはこちら」と、右矢印アイコンを挿入する。

1. divを作成し、container mt-5 クラスを指定。
2. divタグの中に、row クラスを指定したdivを作成。
3. rowクラスを持つdivの中に、col-md-6クラスを指定したdivを２つ追加。
4. 1つめの div.col-md-6 の中に画像（01.jpg）を表示させる。
   imgタグにはimg-fluidクラスを指定する。
5. 上記imgタグに、オリジナルのcssクラスimg-coverを加える
6. img-coverクラスに対してcssファイルで下記のように指定する。

1. Modalのページから「ライブデモ」のテンプレートコードをコピー。
2. ２つ目の div.col-md-6 、pタグの下にコードを貼り付ける。
3. モーダルを表示させるボタンの色を変更し、px-3クラスを追加する。
4. モーダルを表示するためのボタン、モーダル本体内のテキストを打ち替える。
5. モーダルフッターの2つめ、「予約に進む」ボタンの色を変更する。

1. containerとmt-5クラスを適用したdivを作成。
2. その中に、rowクラスをつけたdivを作成。
3. rowクラスのdivの中に、col-md-4クラスのdivを３つ作成する。
4. 作った各div内に画像を表示させる。
   imgタグにはimg-fluidとimg-coverクラスを追加。

1. divタグを作成し、mt-5クラスを適用する。
2. 上記divの中に、もう一つdivタグを追加。
   d-flex flex-column justify-content-centerと、3つのクラスを指定する。
3. その中にdisplay-4クラスを指定したh2タグを追加。
   中にはSample Textなど適当な文言を入れる。
4. h2タグの下にpタグ追加。中にはsample textなどを何度か書いて長めの文にする。
5. pタグの下に、空のdivタグを追加。
6. そのdivタグの中に、bootstrapのボタンを設置する。
   ボタンの文字は「予約する」に変更し、クラスを変えて見本と同じ配色にする。

1. section-singleクラスを指定しているdivに、d-flexクラスを追加。
   →背景画像全体が白っぽくなります
2. maskクラスを指定しているdivに、py-5とtext-centerクラスを追加。
   →文字が中央揃えになります
3. その下のdivタグに、h-100クラスを追加。
   →コンテンツ部分が縦方向の中央に配置されます
4. 3と同じdivにcontainerクラスを追加。
   →コンテンツが広がり過ぎないようにします。
5. pタグにmb-4クラスを追加。
6. buttonタグにbtn-lgとpy-4クラスを追加。

1. footerタグを追加し、フッターエリアを作る。
2. footerタグにbg-dark text-light py-5の3つのクラスを指定する。
3. footeタグの中に、containerクラスを指定したdivを追加。
4. そのdivのなかに、Bootstrapアイコンを3つ設置する。
   それぞれdisplay-3クラスを指定して、サイズを大きくする
5. アイコンの下にulタグを追加し、中にliタグを４つ作る。
6. liタグ内にそれぞれリンク文字を入れる（テキストは上部Navbar同じ）
7. 上記ulタグの下にpタグで「© 2023 Bootstrap test」と記述。
   text-centerクラスを指定して、文字を中央寄せにする。

1. ３つのアイコンを囲うdivを新規作成し、text-center pd-4クラスを指定する。
2. 真ん中のアイコンにmx-5クラスを追加。
3. ulタグにlist-unstyled ps-0 my-5クラスを追加。
   → リストマークの・が消える。
4. ulタグにd-flex justify-content-centerクラスを追加。
   → 中央寄せで横並びになる。
5. liタグそれぞれにmx-4とleadクラスを指定。
6. aタグそれぞれに、link-lightとtext-decoration-noneクラスを指定。
7. 一番下のpタグにmb-0クラスを追加。

1. アラートのテキスト部分、strongタグにd-block d-md-inlineクラスを指定する。
   → スマホ幅なら改行、タブレット幅以上では1行で表示。
2. 2カラム部分、h2タグにmt-4 mt-md-0クラスを指定する。
3. 画像を3つ横並びにしている部分、２つ目の画像にmy-4 my-md-0クラスを追加。
4. フッターのulタグに指定しているd-flexクラスをd-md-flexクラスに変更し、text-centerクラスを追加する。
5. フッターのliタグそれぞれに、mb-2クラスを追加。