LP作成更新版 | SkillhubAI（スキルハブエーアイ）

◎BootstrapでLPを作ろう！

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

完成見本はこちらです。

LP制作課題①

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

ナビゲーションを作ろう

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

コーディング順序

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

ヒーローのカルーセルを作ろう

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

コーディング順序

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

LP制作課題②

ＬＰ制作の続きを行なっていきます。ヒーローエリアまで制作しました。この項目では、カルーセルの下が図のようになるよう、テキスト部分を作っていきます。 file

コーディング順序

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

LP制作課題③

ボタンを作ろう

ヒーローエリアのカルーセル内、その下のテキストエリア下部にあるボタンを作ります。 file

コーディング順序

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

ここまで制作できた場合のイメージ図をご覧ください。レイアウトが崩れるなど問題なく、出来ているでしょうか？

2-2

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

コーディング順序

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

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

LP制作課題④

前回はテキストやボタンを追加しました。今回はアイコンの追加、Bootstrapで用意されているCSSクラスを使って整列などの細かい部分の調整を行いましょう。

アイコンを追加しよう

テキストエリア、見出しとテキストの間にアイコンを３つ設置します。 file

解説ではFont Awesomeの利用法を紹介しましたが、FontAwesome 5 からはユーザー登録をしないとCDNが利用できなくなっています。登録は無料なので使用したい方は登録してFontAwesomeを使う、もしくはダウンロード版を使用してください。

見本ではBootstrap Iconsのsvgリンクを使用しています。３つ横並びに配置されていればアイコンの種類は何でも構いません。

コーディング順序

hタグの下にアイコンを3つ配置する。
アイコン３つをdivで囲う。
上記divに「d-flex justify-content-center」クラスを追加。
上記divに更に「my-5」を追加し、余白を調節する。
アイコンサイズを大きくします。Font Awesomeを使用している場合はアイコンのクラスに「fa-4x」、Bootstrap Iconsを使用している場合はsvgタグ内のwidthとheightを調整しましょう。

前回までに作った部分をBootstrapのcssに変更しよう

コーディング順序

テキスト部分を囲っていたdivの「desc」クラスを「mt-5」に置き換える。
「desc」について設定したcss部分を削除する。
テキスト部分hタグに「text-center」クラスを追加。
テキスト部分pタグに「text-left」クラスを追加。
３つのボタンを囲うdivから「container」を削除。
上記divに「mt4 d-flex justify-content-center」クラスを追加。
カードを囲っているdivから「card-area」クラスを削除。
上記divに「mx-5」クラスを追加する。
「card-area」について設定したcss部分を削除する。
※ナビゲーションバーにログインボタンを追加し、完成図と色を合わせる。

CSSファイルで色々と細かく指定するよりも、用意されたクラスを使う方が素早く簡単に行えることがわかると思います。

LP制作課題⑤

アイコンを追加しよう

テキストエリア、見出しとテキストの間にアイコンを３つ設置します。 file

見本ではBootstrap Iconsのsvgリンクを使用しています。３つ横並びに配置されていればアイコンの種類は何でも構いません。

コーディング順序

hタグの下にアイコンを3つ配置する。
アイコン３つをdivで囲う。
上記divに「d-flex justify-content-center」クラスを追加。
上記divに更に「my-5」を追加し、余白を調節する。
アイコンサイズを大きくします。Font Awesomeを使用している場合はアイコンのクラスに「fa-4x」、Bootstrap Iconsを使用している場合はsvgタグ内のwidthとheightを調整しましょう。

ここまでの設定が上手くできていれた場合の完成イメージです。アイコンの種類や写真は異なっていて構いませんが、配置などは同じように作る事が出来ていますでしょうか？

file

LP制作課題⑥

今回はアラートとモーダルを追加していきます。

アラートを追加しよう

まず、navの下にアラートが表示されるように作っていきます。前章の１番最初のイメージ画像のコードを参考に作ってみてください。アラートリンクも使っていきます。 file

コーディング順序

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

LP制作課題⑦

モダールを設置してみよう

カード部分の下に２カラム部分を作成し、その中にモーダルボタンを設置していきます。まず、２カラム部分を作りましょう。今回は、グリッドシステムを使用して、画像とテキストの２カラムを作ります。

file

コーディング順序

「container」と「row」を作る。
その中に「col-md-4」と「col-md-8」を作成する。
「col-md-4」の中に画像を挿入し、「img-fulied」クラスを適応。
上記imgタグにオリジナルのcss「img-cover」を加える
img-coverクラスに対してcssファイルで下記のように指定する。

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

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

コーディング順序

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

LP制作課題⑧

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

3カラム部分を作ろう

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

コーディング順序

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

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

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

コーディング順序

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

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

file

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

◆LP制作課題⑨

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

フッターを作ろう

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

フッターナビのコーディング順序

footerで囲ったフッターエリアを作り、アイコンを3つ設置する。
真ん中のアイコンに「mx-5」クラスを追加
アイコンの下にulを追加し、中にliタグを４つ作る。
liタグ内にそれぞれリンクを作る（内容はnavと同じ）
2つめのリンクに「mx-3」、４つめのリンクに「ml-3」を追加
ulタグに「mt-3」クラスを追加
ulタグの下にもう一つulタグを作り、サービス１、サービス２を入れたliタグで囲う

フッター全体の調整

フッタータグに「py-5」クラスを追加
１つ目のulタグに「mt-3」クラスを追加
２つ目のulタグに「mb-5」「p-0」クラスを追加
２つ目のulタグ内にあるリストタグ２つ目（サービス２のところ）に「ml-3」クラスを追加
一番下のpタグに「mb-0」クラスを追加
2つめのulタグにオリジナルの「sub-list」クラスを追加し、下記cssを設定。

    footer li{
      display: inline-block;  /* リンクを横並びにします */
    }
    footer li>a{ 
      color: #FFF;  /* リンク色を設定します */
    }
    ul.sub-list{
      font-size: 0.8rem;  /* 文字サイズを少し小さくします。 */
    }

ここまでで一通りは完成です。リストを作ると自動でpaddingが入ってしまうなど、気づきづらい部分も多いかと思いますので、細かくコードと見え方を確認することが重要です。

スマホ表示のための調節をしよう

ブラウザの検証・要素を調査などの機能を使って、作成したLPのスマホ表示の見え方を確認してみてください。たとえば、３カラムの部分の画像。ここでは、グリッドシステムを使っています。スマホ表示になると、１画像１２カラムとなります。そうすると、画像同士がぴったりとくっついてしまっていると思います。

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

スマホ表示用調節

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

図の右側のような配置になっていれば完成です。 file

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

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

レッスン一覧へ