LP作成課題【図解たっぷりBootstrap入門】

.howto{ position: relative; margin: 2.5em .2em; background-color: #ffffe9; } .howto h4{ position: absolute; left: 0; top: -.3em; text-align: left; } .howto h4 span{ padding: 0 .5em; background: #fb7; color: #FFF; } .howto_inner{ padding: 1.5em .5em .5em; word-break: break-all; } .howto ol{ margin-top: 1em; margin-left: 1em; padding-left: 10px; font-size: 1.05em; line-height: 1.5em; } .howto li{ margin: 0 0 1em .5em; line-height: 1.55; word-break: break-word; }

Bootstrapを使って、LP(ランディングページ)を制作していきましょう。 「bootstrap-works」フォルダの中に新しくlp.htmlというファイルを作り、そこにコードを記述してLPを作成していってください。

使用する画像は「kadai.zip」内にあります。

完成見本はこちらです。

◆LP制作課題①

ヘッダーからヒーローエリアまでを作成します。

1.ナビゲーションを作ろう

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

コーディング順序

  1. Navber-Bootstrapからナビバーのテンプレートをコピー（Color schemesは *navbar-dark* と *bg-dark* を選択）してhtmlファイルに張り付ける。
  2. .brandには「LP」とテキストを入力
  3. メニューのリンクテキストは「HOME」「サービス概要」「サービス一覧」「お問い合わせ」の４つに変更。
  4. サービス一覧はdropdownに設定し、サービス1・サービス2を入れ子に。
  5. 入力フォーム内に「メールアドレス」の文字を表示させる。
  6. 右端のボタン文字を「会員登録」に変更する。

2.ヒーロー画像をカルーセルにしよう

次にヒーロー画像をカルーセルで表示させます。 キャプション内テキストは以下のように設定してください。

<h1>SAMPLE TEXT1</h1>
<p>SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>

コーディング順序

  1. Carousel-Bootstrapから*With indicators* のテンプレートをコピー＆ペースト。
  2. 画像はフォルダに入っているhero1~3の3枚を使用。
  3. 3枚ともにキャプションテキストを入力する。
  4. デフォルトのキャプション文字色だと見えにくいので、オリジナルのcssクラス「carousel-caption」を追加し、cssで文字色を#333に指定します。

◆LP制作課題②

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

 

コーディング順序

  1. テキスト部分全体を「container」クラスを適応したdivで囲う。
  2. 「container」クラスの後に、オリジナルクラス「desc」を追加。
  3. 「desc」に対してcssで「text-align: center;　margin-top: 80px;」と設定。
  4. テキストはそれぞれh2とPタグで囲う(文字はSAMPLE TEXTなどで)。
  5. pタグ内の一部分をmark と strong を一回ずつ使って強調表示する。

ボタンは次回作成するので今回はテキスト部分が出来ていればOKです。

◆LP制作課題③

1.ボタンを作ろう

前回作成したテキスト部分の下にボタンを作ります。 ヒーローエリアのカルーセルの部分にもボタンを加えます。クリックするとページに移動できるイメージですね。

キャプション部分も読みやすいように変更してみましょう。

 

 

コーディング順序

  1. カルーセルエリアのh1タグに「display-3」クラスを追加。
  2. その下のｐタグに「lead」クラスを追加。
  3. pタグの下に「button」タグでbtn-lgのボタンを設置（色は完成図を参照）。
  4. テキスト可読性のため、imgタグにオリジナルクラス「opacity」を追加。
  5. 追加した「opacity」クラスにcssで「opacity:0.7;」と設定する。

完成したカルーセル部分がこちらです。

 

 

2.ナビゲーションにボタンを追加

ヘッダーに入れているナビゲーションバーにボタンを追加します。

 

行うことはとてもシンプル。 Bpptstrapサイトからコピーしてきたナビゲーションテンプレートの中の<form>タグ内、メールアドレスと会員登録の間に<button>タグを入れるだけです。

 

 

3.カードエリアを追加する

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

コーディング順序

  1. 課題②で作ったテキストの下にdivを作成し、クラスに「container」を指定。
  2. Cards-Bootstrapから「Card decks」のテンプレートをコピーし、作成した「container」内に配置。
  3. .card-deckを囲うdiv「container」の後ろに「card-area」クラスを追加。
  4. 「card-area」クラスに「margin-top:80px;」をcssで指定する。
  5. カード内タイトルとして用意されているh5をh4に変更。
  6. カード内の一番下にあるpタグを削除。
  7. 削除した部分にボタンを設置（サイズはbtn-sm、色は完成図を参照）。

テンプレートをカスタマイズしていく流れが掴めたでしょうか。 今回のカスタマイズは、ほんの少しでしたが、テンプレートの構造や意味を理解してカスタマイズを重ねていけばオリジナリティがあるお洒落なサイトを作ることが出来ます。

◆LP制作課題④

前回までのLP課題で作った部分を【10. Bootstrapのユーティリティを理解する】で登場した、Bootstrapのcssクラスを使用したものに変更してみましょう。

コーディング順序

  1. テキスト部分を囲っていたdivの「desc」クラスを「mt-5」に置き換える。
  2. 「desc」について設定したcss部分を削除する。
  3. テキスト部分hタグに「text-center」クラスを追加。
  4. テキスト部分pタグに「text-left」クラスを追加。
  5. ３つのボタンを囲うdivから「container」を削除。
  6. 上記divに「mt4 d-flex justify-content-center」クラスを追加。
  7. カードを囲っているdivから「card-area」クラスを削除。
  8. 上記divに「mx-5」クラスを追加する。
  9. 「card-area」について設定したcss部分を削除する。

オリジナルでcssを設定していたクラスを取り外し、 Bootstrapのクラスに気に変えても下図のようにレイアウトが保たれていればOKです。

CSSファイルを作って一から細かく指定して作成するよりも、Bootstrapで用意されたクラスを使う方が素早く簡単に行えることがわかりますね。

◆LP制作課題⑤

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

 

 

コーディング順序

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

◆LP制作課題⑥

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

 

コーディング順序

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

◆LP制作課題⑦

カード部分の下に２カラム部分を作成し、その中にモーダルボタンを設置していきます。

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

コーディング順序

  1. 「container」と「row」を作る。
  2. その中に「col-md-4」と「col-md-8」を作成する。
  3. 「col-md-4」の中に画像を挿入し、「img-fluid」クラスを適応。
  4. 上記imgタグにオリジナルのcss「img-cover」を加える
  5. img-coverクラスに対してcssファイルで下記のように指定する。
    .img-cover{
      height: 300px;
      width: 100%;
      object-fit: cover;
    }
        /* 
        ここでは画像がカラムからはみ出ないように設定しています。
        縦横のサイズを指定して「object-fit: cover;」と指定することで、
        指定サイズ範囲内に画像が収まるよう調整されます。
        */

続いて、予約フォームをモーダルで作るという想定でモーダルを設置します。 テンプレートの状態から、変更を加えて以下のようなモーダルになればOKです。

コーディング順序

  1. Modal-Bootstrapから「Live demo」のコードをコピーし、作成した2カラム部分の下に張り付ける。
  2. モーダルのタイトルを「タイトル」に変更。
  3. モーダルのbodyには「さんぷるてきすと」を何度か繰り返して入力。
  4. モーダルを閉じるボタンの文字を「閉じる」に変更。
  5. もう一つのボタンは「予約」に文字を変更。
  6. 予約ボタンのカラーを画像と同じになるように設定。

 

◆LP制作課題⑧

今までの復習として、課題⑦で作った２カラムの下に、画像を使った３カラムと「container-fluid」を使ったシングルカラムを作成してみましょう。こちらもグリッドシステムを使用し、画像がはみ出ない為に作ったオリジナルクラス「img-fluid」と「img-cover」のcssを適用させてきます。

 

3カラム部分を作ろう

図のような画像のみの３カラムを設置します。

コーディング順序

  1. 「container」と「row」を作る。
  2. その中に「col-md-4」を３つ作成する。
  3. それぞれ画像を入れ、imgタグに「img-fluid」と「img-cover」クラスを追加。
  4. 「container」に「mb-5」クラスを追加する。

 

シングルカラム部分を作ろう

LPですのでシングルカラム部分は「予約」という成果を得る為、もう１度予約フォームを入れておきます。また、文字やボタンを画像の上にのせます。 見やすいように画像を透過させることも重要です。

コーディング順序

  1. divを作り「container-fluid px-0」クラスを設定する。
  2. その中に「Sample Text」と入力し、「display-4」を指定したspanクラスで囲う。
  3. 上記タグの下にpタグを書き、中に「sample text」と何度か書く。
  4. 上記タグの下にbootstrapのボタンを設置し、pタグで囲う（※1）。
  5. ボタンの文字を「予約する」に変更し、カラーを画像と合わせる。
  6. 「container-fluid」divの中にdivを作り、span,p ,buttonを囲う。
  7. 上記divに「d-flex flex-column justify-content-center」クラスを追加。

ここまで出来たら、更にオリジナルクラスを加えていきます。

 

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

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

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

 

 

◆LP制作課題⑨

最後に、フッターの作成と微調整を行っていきます。

フッターを作ろう

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

フッター部分の追加順序

  1. 「footer class="footer"」を使用してフッターエリアを作る。
  2. footer内にアイコンを3つ設置する。
  3. Font awsomeの場合は「fa-4x」クラスを追加しサイズを変更。
  4. アイコンの下にulを追加し、中にliタグを４つ作る。
  5. liタグ内にそれぞれリンクを作る（内容はnavbar-navと同じ）
  6. ulタグの下にもう一つulタグを作り、サービス１、サービス２を入れたliタグで囲う
  7. 上記ulタグの下にpタグを入れ「© 2018 Bootstrap test」と記述。

 

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

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

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

フッター全体の調整

  1. フッタータグに「py-5」クラスを追加。
  2. ３つ並べたアイコンを囲うdivを作り、「mb-4」クラスを追加。
  3. ３つ並べたアイコンのうち真ん中に「mx-5」クラスを追加。
  4. １つ目のulタグに「mt-3」「p-0」クラスを追加・
  5. １つ目のul>liタグ、2つめのaタグに「mx-3」、４つめのaタグに「ml-3」クラスを追加。
  6. ２つ目のulタグに「mb-5」「p-0」クラスを追加。
  7. ２つ目のulタグ内にあるリストタグ２つ目に「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です。

 

 

スマホ画面向けの微調整

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

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

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

 

また、フッター上のシングルカラム部分では、テキストがフッターの方まではみ出してしまっているかと思います。こちらも修正していきましょう。

 

スマホ表示用調節

  1. フッター上の「container-fluid」内にあるpタグに「d-none d-md-block」クラスを追加。
  2. ３カラム部分の２つ目の画像に「my-5 my-md-0」クラスを追加。
  3. フッターのulタグ２つに「pl-0」クラスを追加。

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

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

 

 

レッスン