総合実習：LP(ランディングページ)制作

総合実習について

Bootstrapを使って、LP(ランディングページ)を制作していきましょう。使用する画像は、本ページの素材欄「kadai.zip」をダウンロードしてください。

なお、実習で作成したページのご提出は不要です。

完成見本

制作の下準備

実習で制作するLPは、lp.htmlというファイル名で作成して下さい。最初にhtmlの基本書式、BootstrapのCDNを記述しておきましょう。

また、オリジナルのCSS指定を書くためのスタイルシートファイルも必要です。解説ではオリジナル設定のCSSファイルを「style.css」として進めます。

<head>タグ内、bootstrap.cssよりも下でstyle.cssを読み込ませます。

lp.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap-LP制作実習</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- オリジナルCSSを読み込む -->
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <!-- Bootstrap JavaScript  -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

【ファイル構成イメージ】 file

ナビゲーションとヒーロー

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

1.ナビゲーション

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

file

コーディング順序

Navber-Bootstrapからナビバーのテンプレートをコピー&ペースト。
navタグのカラー設定を、navbar-darkとbg-darkに変更。
.navber-brand内テキストを「LP」に変更。
メニューのリンクテキストは「HOME」「サービス概要」「サービス一覧」「お問い合わせ」の４つに変更。
入力フォーム内に「メールアドレス」の文字を表示させる。
右端のボタン文字を「会員登録」に変更する。
サービス一覧のdropdown内を、サービス1・サービス2の2項目にする。

コーディングのポイント

2.ヒーロー部分にカルーセルを導入

次にヒーロー画像をカルーセルで表示させます。 hero1.jpg、hero2.jpg、hero3.jpgの三枚をスライドさせましょう。

file

キャプション内テキストは以下のように設定してください。

<h2 class="h1">SAMPLE TEXT1</h2>
<p>SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>

コーディング順序

Carousel-BootstrapからWith indicatorsのコードをコピー＆ペースト。
div.carousel-item部分を、With captionsのコードに置き換える。
スライドさせる画像設定します。（hero1~3.jpg）
キャプション内テキストを入力する。
style.cssを使って「.carousel-caption」の文字色を#333に変更。

コーディングのポイント

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

大まかなアイテム配置が出来たので、細かい部分を整えていきましょう。

まず、ナビゲーションバーに「ログイン」ボタンを追加します。

file

ナビゲーションの中の、メールアドレスと会員登録の間に<button>タグを挿入します。ボタンのコードはButtonsのページにあります。

file

コードを貼り付けて、そのままブラウザで表示すると上図のようになります。

文字を「ログイン」に打ち替えます。会員登録ボタンと間を開けるために、buttonタグにはmr-2クラスを加えて下さい。

file

4.ナビゲーション下にアラートを追加

ナビゲーションとヒーロー（カルーセル）の間に、アラートを表示させます。アラートリンクも使います。

file

コーディング順序

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

コーディングのポイント

5.カルーセルをカスタマイズ

カルーセルをカスタマイズして、今よりも見やすくしましょう。設定するのは下記の2点です。

ボタンを追加し、クリックするとページに移動できるデザインにする。
キャプションを読みやすく、目立つようにする

【完成イメージ】 file

コーディング順序

カルーセルキャプション、pタグに「lead」クラスを追加。
pタグの下に、buttonタグでbootstrapの「btn-lg」ボタンを設置。
buttonの配色を「btn-success」にする
imgタグに、それぞれオリジナルクラス「opacity」を追加。
追加したopacityクラスに、cssで「opacity: 0.7;」と設定する。

コーディングのポイント

コーディング順序1～3では、<div class="carousel-caption">の中にボタンを設置しています。手順に沿って作ると、以下のようなコーディングになります。

lp.html

<div class="carousel-caption d-none d-md-block">
    <h2 class="h1">SAMPLE TEXT1</h2>
    <p class="lead">SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>
    <button type="button" class="btn btn-success btn-lg">Large button</button>
</div>

file

コーディング順序4～5は、画像の上に載っている文字を見やすくするための設定です。CSSのopacityプロパティを使って、画像を少し透かしたような表示にします。

file

style.css

.opacity{
  opacity:0.7;
}

file

ヒーロー下～カード部分まで

ヒーロー下エリア

カルーセルの下に、オレンジ色の点線で囲った部分を作っていきます。今まで全幅で作ってきましたが、こちらはbootstrapの.containerを使って、最大横幅を制限します。

file

3つ並んでいるアイコンは一旦置いておいて、文字とボタンを作ってみましょう。

コーディング順序

containerクラスのdivを作成する
1で作ったdivの中に、h2タグを挿入
h2タグの中に「SAMPLE TEXT」と入力
h2タグの下に、pタグでテキストを挿入する。
(テキストはSAMPLE TEXTの繰り返しなどでOKです)
pタグ内、好きな箇所をmark と strong を一回ずつ使って強調表示する。
pタグの下にd-flexクラスのdivを作成する
Bootstrapサイトから、btn-smクラスのbtnタグを3つ貼り付ける
ボタンの色を変更する（ボタンの文字はそのままでも可）
divタグに、justify-content-centerクラスを追加
(flexアイテムを中央寄せにする)
見やすいように、marginクラスを設定して余白を入れる。
設定箇所：containerクラスのdiv、d-flexクラスのdiv、buttonタグ。
h2タグにtext-centerクラスを追加する。

コーディングのポイント

pタグ内のテキスト量をもう少し増やすと、見本のような見た目になります。

アイコン×3の挿入

h2の下に、アイコンを3つ挿入します。３つ横並びに配置されていればアイコンの種類は何でも構いません。

fontawsomeアイコンを使用する場合は、headタグ内にfontawsomeのCDNコードを貼り付けて利用して下さい。

コーディング順序

h2タグの下に、d-flexとjustify-content-aroundクラスのdivを挿入。
アイコンを３つ挿入
それぞれのアイコンに、fa-4xクラスを追加しサイズを大きくする。
divタグにmy-5クラスを追加し、余白を調節する。

見本コード

1～4までの順序を行うと、以下のようなコーディングになります。

lp.html

<div class="container mt-5">
  <h2 class="text-center">
    SAMPLE TEXT
  </h2>
    <!-- ★ここから今回の制作箇所 -->
    <div class="d-flex justify-content-around my-5">
      <i class="fas fa-search fa-4x"></i>
      <i class="far fa-bell fa-4x"></i>
      <i class="far fa-calendar-check fa-4x"></i>
    </div>
    <!-- ★今回の制作箇所ここまで -->
  <p>
    SAMPLE TEXT

file

カードエリア

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

file

コーディング順序

上で作ったdivの下に、containerクラスのdivを設置
Cards-Bootstrapから「Card decks」のテンプレートをコピー。
コピーしたコードを、1で作成したdivタグ内に貼り付ける。
.card-deckを囲うdiv「container」の後ろに「my-5」クラスを追加。
svgタグをimgタグに変更し、画像card.jpgを表示する。
カード内タイトルのh5タグを、h4に変更。
カード内の一番下にあるpタグを削除。
削除した部分にボタンを設置（サイズはbtn-sm、色は完成図を参照）。

コーディングのポイント

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

2カラム+画像3つ横並び

画像・テキストの2カラム

カードの下に２カラム部分を作成します。テキスト側には、その中にモーダルボタンを設置します。

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

file

コーディング順序

containerクラスのdiv、その中にrowクラスのdivを作る。
containerクラスのdivに、my-5クラスを追加。
rowクラスのdivの中に、col-md-4とcol-md-8クラスのdivを作成する。
col-md-4クラスのdivの中に画像を挿入し、「img-fluid」クラスを適応。
上記imgタグにオリジナルのcss「img-cover」を加える。
img-coverクラスに対して、cssで後記の指定を追加する。

lp.html

<div class="container my-5">
    <div class="row">
        <div class="col-md-4">
            <img src="img/01.jpg" class="img-fluid img-cover" alt="">
        </div>
        <div class="col-md-8">

        </div>
    </div>
</div>

.img-coverをセレクタに、以下のスタイル指定を加えて下さい、縦横のサイズを指定して「object-fit: cover;」と指定することで、指定サイズ範囲内に画像が収まるよう調整されます。

style.css

.img-cover{
  height: 300px;
  width: 100%;
  object-fit: cover;
}

続いて、col-md-8クラスのdivの中身を入れていきましょう、予約フォームをモーダルで作る、という想定でモーダルを設置します。テンプレートの状態から、変更を加えて以下のようなモーダルになればOKです。

file

コーディング順序

col-md-8クラスのdiv内に、h2タグとpタグでテキストを追加。
(SAMPLE TEXTなど、適当な文字でOKです)
Modal-Bootstrapから「Live demo」のコードをコピーし、pタグの下に貼り付ける。
モーダルを表示するためのbuttonの文字を「予約」に変更。
予約ボタンのカラーを変更し、px-5クラスを追加する。
モーダルのタイトルを「タイトル」に変更。
モーダルのbodyには「さんぷるてきすと」を何度か繰り返して入力。
モーダルを閉じるボタンの表示をClose→閉じるに変更。
その下のボタンは文字を「予約」にし、カラーを画像に合わせる。

見本コード

lp.html

<div class="container my-5">
    <div class="row">
        <div class="col-md-4">
            <img src="img/01.jpg" class="img-fluid img-cover" alt="">
        </div>
        <div class="col-md-8">
            <h2>SAMPLE TEXT</h2>
            <p>
                SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXTSAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXTSAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT
            </p>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-success px-5" data-toggle="modal" data-target="#exampleModal">
                予約
            </button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">タイトル</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            さんぷるてきすとさんぷるてきすとさんぷるてきすとさんぷるてきすと
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
                            <button type="button" class="btn btn-success">予約</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

画像3枚の横並び

2カラムエリアの下に、図のような画像を3枚並べて表示します。

file

コーディング順序

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

見本コード

lp.html

<div class="container mb-5">
    <div class="row">
        <div class="col-md-4">
            <img src="img/02.jpg" class="img-fluid img-cover" alt="">
        </div>
        <div class="col-md-4">
            <img src="img/03.jpg" class="img-fluid img-cover" alt="">
        </div>
        <div class="col-md-4">
            <img src="img/04.jpg" class="img-fluid img-cover" alt="">
        </div>    
    </div>
</div>

シングルカラムエリア

次は、背景画像が全面に入ったシングルカラムを作成します。 LPの場合、こうしたシングルカラム部分は「予約」という成果を得る為に必要。ですので、もう１度予約ボタンを入れておきます。

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

file

コーディング順序

divを作り、container-fluid px-0クラスを設定する。
h2タグで「Sample Text」と入力
h2タグにdisplay-4クラスを指定する。
上記タグの下にpタグを書き、中に「sample text」と何度か書く。
pタグの下にbootstrapのボタンを設置し、pタグで囲う（※1）。
ボタンの文字を「予約する」に変更。
ボタンの色を変更、py-5クラスを追加して横幅を増やす。
container-fluidクラスのdivの中にdivを作り、h2,p ,buttonを囲う。
上記divに「d-flex flex-column justify-content-center」クラスを追加。

lp.html

<div class="container-fluid px-0">
    <div class="d-flex flex-column justify-content-center">
        <h2 class="display-4">Sample Text</h2>
        <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
        <p><button type="button" class="btn btn-success px-5">予約する</button></p>
    <div class="d-flex flex-column justify-content-center">
</div>

現時点では、まだ、下図のような表示です。

file

更にオリジナルクラスを加えて、見た目を整えていきましょう。以下、画像の手順に従ってコーディングを進めて下さい。

file

　　↓

file

見本コード

lp.html

<div class="container-fluid px-0 base">
    <div class="text-center mask">
        <div class="d-flex flex-column justify-content-center content m-auto">
            <h2 class="display-4">Sample Text</h2>
            <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
            <p><button type="button" class="btn btn-success px-5">予約する</button></p>
        </div>
    </div>
</div>

style.css

div.base{
  background-image: url(img/footer.jpg);
  background-size: cover;
  height: 300px;
}
div.content{
  height: 100%;
  width: 60%;
}
div.mask{
  height: 100%;
  background-color: rgba(255, 255, 255, .6)
}

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

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

file

フッターの作成

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

file

フッター部分の追加順序

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

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

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

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

フッター全体の調整

フッタータグに「py-5」クラスを追加。
３つ並べたアイコンを囲うdivを作り、「mb-4」クラスを追加。
３つ並べたアイコンのうち、真ん中に「mx-5」クラスを追加。
style.cssに、footer li{ display: inline-block;}と記述する。
サービス1,サービス2を囲うulタグに「small」クラスを追加。
ulタグ、liタグにmarginやpaddingを加え、見た目を整える。
（Bootstrapクラスを使用する）
一番下のpタグに「mb-0」クラスを追加。

見本コード

lp.html

<footer class="footer py-5">
    <div class="mb-4">
        <i class="fab fa-facebook-square fa-4x"></i>
        <i class="fab fa-twitter-square fa-4x mx-5"></i>
        <i class="fab fa-youtube-square fa-4x"></i>
    </div>
    <ul class="mt-3 p-0">
        <li><a href="#">ホーム</a></li>
        <li><a href="＃" class="mx-3">サービス概要</a></li>
        <li><a href="＃">サービス一覧</a></li>
        <li><a href="＃" class="ml-3">お問い合わせ</a></li>
    </ul>
    <ul class="mb-5 p-0 small">
        <li><a href="#">サービス1</a></li>
        <li class="ml-3"><a href="#">サービス2</a></li>
    </ul>
    <p class="mb-0">© 2018 Bootstrap test</p>
</footer>

style.css

footer{
  background-color: #343a40;
  color: #fff;
  text-align: center;
}
footer li{
  display: inline-block;
}
footer li>a{ 
  color: #FFF;
}

file

スマホ幅での表示調整

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

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

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

file

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

file

スマホ表示のための調節例

フッター上の「container-fluid」内にあるpタグ（sample textテキスト箇所）に「d-none d-md-block」クラスを追加。
３カラム部分の２つ目の画像に「my-5 my-md-0」クラスを追加。
カルーセルの画像、imgタグに「w-100」クラスを追加。

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

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

レッスン一覧へ

総合実習について

制作の下準備

ナビゲーションとヒーロー

1.ナビゲーション

コーディング順序

コーディングのポイント

2.ヒーロー部分にカルーセルを導入

コーディング順序

コーディングのポイント

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

4.ナビゲーション下にアラートを追加

コーディング順序

コーディングのポイント

5.カルーセルをカスタマイズ

コーディング順序

コーディングのポイント

ヒーロー下～カード部分まで

ヒーロー下エリア

コーディング順序

コーディングのポイント

アイコン×3の挿入

コーディング順序

見本コード

カードエリア

コーディング順序

コーディングのポイント

2カラム+画像3つ横並び

画像・テキストの2カラム

コーディング順序

コーディング順序

見本コード

画像3枚の横並び

コーディング順序

見本コード

シングルカラムエリア

コーディング順序

見本コード

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

フッターの作成

フッター部分の追加順序

フッター全体の調整

見本コード

スマホ幅での表示調整

スマホ表示のための調節例

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