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

1. Navber-Bootstrapからナビゲーションのコードをコピーし、htmlファイルに張り付ける。
2. 配色のクラスをnavbar-dark bg-dark に変更
3. .navbar-brand部分に「LP」とテキストを入力する。
4. メニューのリン文字をHOME」「サービス概要」「サービス一覧」「お問い合わせ」の４つに変更。
5. サービス一覧はdropdownに設定し、サービス1・サービス2を小メニューとして設定する。
6. お問い合わせはaタグに適用されている、disabled クラスを削除。
7. 入力フォーム内に「メールアドレス」の文字を表示させる。
8. 右端のボタン文字を「会員登録」に変更する。
9. 会員登録のボタンタグにtext-nowrap クラスを追加。

1. Carousel-BootstrapからWith captions のコードをコピー・アンド・ペースト。
2. スライドする画像のパスを入力。
   （hero1.jpg~hero3.jpgの3枚）
3. オリジナルのcssファイル(lp.css)を使って、carousel-captionクラスの文字色を#333に指定する

1. キャプションの見出しにdisplay-3クラスを追加。
2. その下のｐタグにleadクラスを追加。
3. カルーセルのimgタグにオリジナルクラスopacityを追加。
4. 追加したopacityクラスに、CSSで「opacity:0.7;」と設定する。

1. containerクラスを適応したdivを設置。
2. 作成したdivの中に、h2タグとpタグを書く。
   (タグ内のテキストはSAMPLE TEXTなどダミーでOK)。
3. h2タグにtext-centerクラスを適用。文字を中央配置にする。
4. divタグにmt-5クラスを追加し、カルーセルとの間隔を空ける。
5. pタグ内の一部分を mark と strong を一回ずつ使って強調表示する。

1. h2タグの下にfontawesomeアイコンを3つ配置する。
2. アイコンにfa-4xクラスを追加し、サイズを大きくする。
3. 追加したアイコン３つをdivで囲う。
4. 上記divにd-flex justify-content-aroundクラスを追加。
5. 上記divに更にmy-5を追加し、余白を調節する。

【ナビゲーション】

1. ナビゲーションのコードで、メールアドレスと会員登録の間にBootstrap - Buttonsからコードを貼り付ける。
2. ボタンの文字を「ログイン」に打ち替える
3. ボタンタグにtext-nowrap me-2クラスを追加

【カルーセル内】

1. .carousel-caption内のpタグ下に、それぞれ配色のあうButtonコードを貼り付け。
2. 貼り付けたボタンにbtn-lgクラスを追加。
3. ボタンのテキストを「Large button」にする

【カルーセル下のテキストエリア】

1. pタグの下にbtn-smクラスのbuttonタグを３つ貼り付ける。
2. Bootstrapのクラスを使って、ボタンの色を変える
3. 真ん中のボタンタグにme-3クラスを適用し、間隔をあける。
4. ３つのボタンタグを囲うdivを作成。container my-4 text-centerクラスを適用。

1. 1で作ったテキストエリアの下にdivを設置し、container my-5クラスを適用。
2. Bootstrapから「Grid cards」のテンプレートをコピーし、div.container内に配置。
3. 横並びになるカードの数が、md以上で3枚になるようにクラスを変更する。
4. 不要なカードを削除する
5. カード内の画像パスを「card.jpg」のものに変更する
6. カードタイトルのh5タグを、h4に変更。
7. カード内の一番下にボタンを設置（サイズはbtn-sm、色は完成図を参照）。

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

1. container my-5 クラスを適用したdivを作成。
2. そのなかに、row クラスをつけたdivを作成。
3. rowクラスを持つdivの中に、col-md-4クラスのdivとcol-md-8 クラスのdivを設置。
4. col-md-4クラスのdivの中に画像を挿入し、img-fluidクラスを適応。
5. 上記imgタグにオリジナルのcssクラスimg-coverを加える
6. img-coverクラスに対してcssファイルで下記のように指定する。

1. Modal-Bootstrapから「Live demo」のコードをコピーし、作成した2カラム部分のテキスト下に張り付ける。
2. モーダルを表示させるボタンの文字を「予約する」に変更し、色を見本に合わせる。
3. モーダルのタイトルを「タイトル」に変更。
4. モーダルのbodyには「さんぷるてきすと」を何度か繰り返して入力。
5. モーダルを閉じるためのボタンの文字を「閉じる」に変更。
6. もう一つのボタンは「予約」に文字を変更。
7. 予約ボタンの色を、見本に合わせたクラスに変更する。

1. container mb-5クラスを適用したdivを作成。
2. そのなかに、rowクラスをつけたdivを作成。
3. rowクラスを持つdivの中に、col-md-4クラスのdivを３つ作成する。
4. それぞれのdiv内に画像を入れ、imgタグにimg-fluidとimg-coverクラスを追加。

1. クラスなしのdivタグを1つ作成。
2. 上記divの中に、もう一つdivタグを作りd-flex flex-column justify-content-centerクラスを追加。
3. その中に「Sample Text」と入力し、display-4クラスを指定したspanタグで囲う。
4. spanタグの下にpタグを書き、中に「sample text」と何度か書く。
5. ｐタグの下にbootstrapのボタンを設置し、divタグで囲う（※1）。
6. ボタンの文字を「予約する」に変更し、見本と同じカラーのクラスに変更。

1. footerタグを使って、フッターエリアを作る。
2. footerタグにbootstrapのクラスを加える、もしくはオリジナルcssを使って、背景色と文字色を指定する。
3. footerタグにtext-centerクラスを追加。
4. footer内にアイコンを3つ設置する。
5. Font awsomeの場合はfa-4xクラスを追加しサイズを変更。
6. アイコンの下にulを追加し、中にliタグを４つ作る。
7. liタグ内にそれぞれリンクを作る（内容はnavbar-navと同じ）
8. ulタグの下にもう一つulタグを作り、サービス１、サービス２を入れたliタグで囲う
9. 上記ulタグの下にpタグを入れ「© 2018 Bootstrap test」と記述。

1. フッタータグにpy-5クラスを追加。
2. ３つ並べたアイコンを囲うdivを作り、mb-4クラスを追加。
3. ３つ並べたアイコンのうち真ん中にmx-5クラスを追加。
4. １つ目のulタグにmt-3 p-0クラスを追加。
5. １つ目のul>liタグ、2つめのaタグにmx-3、４つめのaタグにms-3クラスを追加。
6. ２つ目のulタグにmb-5 p-0クラスを追加。
7. ２つ目のulタグ内にあるリストタグ２つ目にml-3クラスを追加。
8. 一番下のpタグにmb-0クラスを追加。
9. 2つめのulタグにオリジナルのsub-listクラスを追加し、下記cssを設定。

1. フッター上の「container-fluid」内、テキストを囲っているpタグにそれぞれ「mt-3」クラスを追加。
2. ３カラム(画像のみ)部分の、２つ目の画像に「my-5 my-md-0」クラスを追加。
3. フッターの１つ目のulタグに「ps-0」クラスを追加。