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

吉田先生

今までに学習したBootstrap5の使い方を復習しながら、1つのランディングページ(LP)を作ってみましょう。

総合実習

Bootstrapを使って、LP(ランディングページ)を制作していきましょう。

完成見本はこちらです。

制作準備チェック

  • 課題に使う素材(kadai-img)をDLし、画像をimagesフォルダに移動
  • 新しくHTMLファイル「lp.html」を作成
  • lp.htmlにBootstrap5とfontawesomeのCDNコードを貼り付ける
  • オリジナルのCSSを記述できるよう「lp.css」を作る
  • htmlファイルから、作成したオリジナルCSSファイル(lp.css)を読み込む

なお、htmlやcssファイル名はお好きに設定して頂いも構いません。

1.ファーストビュー

ナビゲーション

図のようなヘッダーナビゲーションを作成します。

コーディング順序

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

カルーセル

次に、カルーセルを表示させます。

キャプション内テキストは、そのままでも、お好きに設定して頂いて構いません。
見本では以下のコードを使っています・

<h2>SAMPLE TEXT1</h2>
<p>SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>

コーディング順序

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

色を変えただけでも、文字の可読性は上がりましたね。
キャプション部分がもっと読みやすくなるよう、さらに調整してみましょう。

 

コーディング順序

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

カルーセル下のテキスト

1で作成したカルーセルの下に、オレンジ色の点線で囲ったテキスト部分を作っていきます。

 

コーディング順序

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

カルーセルの下にアイコンを追加

テキストエリア、見出しとテキストの間にfontawesomeのアイコンを3つ設置します。
3つ横並びに配置されていれば、アイコンの種類は何でも構いません。

 

コーディング順序

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

ボタンを追加

ナビゲーション、カルーセルキャプション、カルーセル下のテキストの下に、ボタンを設置します。
ボタンの色を設定するBootstrapのCSSクラスについては、完成図と同じものを探して使用してください。

 

コーディング順序

【ナビゲーション】

  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タグを3つ貼り付ける。
  2. Bootstrapのクラスを使って、ボタンの色を変える
  3. 真ん中のボタンタグにme-3クラスを適用し、間隔をあける。
  4. 3つのボタンタグを囲うdivを作成。container my-4 text-centerクラスを適用。

2.カードエリアの追加

テキスト部分の下に3枚のカードを並べたエリアを作ります。
そして、カード内のテキストも少しカスタマイズしてみましょう。

コーディング順序

  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、色は完成図を参照)。

ここまでで、ページ上半分は、ほぼ出来上がりですね。

3.アラートを追加する

LPページにアラートを追加してみましょう。
ヘッダーナビゲーションの下にアラートが表示されるように作っていきます。
アラートリンクも使います。

 

コーディング順序

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

4.2カラム部分の作成

3枚並べたカード部分の下に2カラム部分を作成し、モーダルボタンを設置します。

2カラム部分を作る

まず、2カラム部分を作りましょう。
グリッドシステムを使用して、画像とテキストの2カラムを作ります。

コーディング順序

  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ファイルで下記のように指定する。
.img-cover{
  height: 300px;
  width: 100%;
  object-fit: cover;
}
/* 
ここでは画像がカラムからはみ出ないように設定しています。
縦横のサイズを指定して「object-fit: cover;」と指定することで、
指定サイズ範囲内に画像が収まるよう調整されます。
*/

モーダルを設定

予約フォームをモーダルで作るという想定でモーダルを設置します。
以下のようなモーダルになるよう、テンプレートを変更していきましょう。

コーディング順序

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

6.3カラム部分・シングルカラム部分を作成

5で作った2カラムの下に、画像を使った3カラムとシングルカラムを作成してみましょう。

3カラム部分の作成

図のような、画像のみの3カラムを設置します。
画像がはみ出ない為に、Bootstrapの「img-fluid」クラス、オリジナルの「img-cover」クラスを使います。

コーディング順序

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

シングルカラム部分の作成

LPですのでシングルカラム部分は「予約」という成果を得る為、もう1度予約フォームを入れておきます。

また、文字やボタンを画像の上にのせます。
見やすいように、画像を透過させることも重要です。

コーディング順序

  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. pタグの下にbootstrapのボタンを設置し、divタグで囲う(※1)。
  6. ボタンの文字を「予約する」に変更し、見本と同じカラーのクラスに変更。

※1 ボタンタグをpタグで囲う

ボタンタグを<div>タグで囲うのは、親要素で使用している「flex-column」の影響によってボタンが引き伸ばされるのを防ぐためです。
ボタンタグだけですと、下図のように「content」クラスの幅までボタンが伸びてしまいます。

ここまで出来たら、オリジナルクラスを加えて画像などを設定していきましょう。

オリジナルスタイルの設定


  ↓

6.フッター部分の作成

フッターを作成する

下図のようなフッターを作成します。
こちらも使用するアイコン3つは、お好きなもので構いません。

フッター部分の作成順序

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

ここまで出来たら、ブラウザで表示を確認しましょう。

入力内容は表示はされていますが、見にくいですね。
Bootstrapで用意されているクラス+オリジナルcss追加で調整していきましょう。

フッターの調整

リストは横並びにならないだけではなく、自動でpaddingが入ってしまうなど、気づきづらい部分も多いかと思います。
細かくコードと見え方を確認することが重要です。

フッター全体の調整

  1. フッタータグにpy-5クラスを追加。
  2. 3つ並べたアイコンを囲うdivを作り、mb-4クラスを追加。
  3. 3つ並べたアイコンのうち真ん中にmx-5クラスを追加。
  4. 1つ目のulタグにmt-3 p-0クラスを追加。
  5. 1つ目のul>liタグ、2つめのaタグにmx-3、4つめのaタグにms-3クラスを追加。
  6. 2つ目のulタグにmb-5 p-0クラスを追加。
  7. 2つ目のulタグ内にあるリストタグ2つ目にml-3クラスを追加。
  8. 一番下のpタグにmb-0クラスを追加。
  9. 2つめのulタグにオリジナルのsub-listクラスを追加し、下記cssを設定。
footer li{
  display: inline-block;  
  /* リンクを横並びにします。
  /  Bootstrapにも.d-inlineクラスがありますが、liタグ全てに付けるのは大変なのでcssで設定しています。
  */
}

footer li>a{ 
  color: #FFF; 
  /* リンク色の設定。
  / Bootstrapにも.text-whiteクラスはありますが、こちらもaタグ全てにクラス追加が大変なのでcssで一括指定しています。
  */
}

ul.sub-list{
  font-size: 0.8rem;  /* 文字サイズを少し小さくします。 */
}

ここまでで一通りは完成です。

完成したフッター部分のコード

ブラウザで冒頭の完成図通りに表示されていればOKです。

ここまでで、余白の為のクラスなど、Bootstrapのユーティリティの項目のクラスが頻繁に出てくることに気付いたでしょうか。
これらは、頻繁に使用するかと思いますので、しっかり復習しておきましょう。

7.スマホ画面向けの微調整

ここまででLPは一通り完成しました。
最後にブラウザの検証ツール(要素を調査など)を使って、作成したLPのスマホ表示の見え方を確認してみてください。

 

たとえば、3カラムの部分の画像。
ここでは、グリッドシステムを使っています。スマホ表示になると、1画像12カラムとなります。
そうすると、画像同士がぴったりとくっついてしまっていると思います。

このような部分を修正していきます。

また、フッター上のシングルカラム部分も文字やボタンが詰まっていて見にくいですね。
フッターのリストも少しズレてしまっています。
こちらも修正していきましょう。

スマホ表示用調節

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

これで、シンプルですが簡単なLPが出来ました。
Bootstrapを使わずに作るよりも、とても簡単に出来る事が分かっていただけたかと思います。
とても早く制作する事が出来ますよね。

この例では、基本的な部分のみ扱いましたが、テンプレートのコードやBootstrap内でのルールを知ることが、カスタマイズを行う為に必要であることも分かったかと思います。Bootstrapを使いこなして、オリジナリティのある美しいサイトを制作していきましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

レッスン素材一覧


×