2021年5月24日 / 最終更新日 : 2021年10月21日 juri HTML/CSS基礎

ランディングページ制作 ページ下部編⑧

レスポンシブの改行のタイミングを変更する

レスポンシブで改行させるタイミングを調整していきます。今は、「col-sm」を各所に適用させているので、画面幅が576pxがブレイクポイントですが、「col-sm」を「col-md」に変更してブレイクポイントを768pxになるようにします。

sectionを振る

「campaign」と「worries」の間にインフォメーションのセクションを作ります。その中にcontainerとrowを入れましょう。その中にさらに左右に２つのdivを作っていきます。左：右を５：７にするため、それぞれ「col-md-5」と「col-md-7」とします。

<!-- 省略 -->
<body>
  <header>
    <!-- 省略 -->
  </header>

  <section id="campaign">
    <!-- 省略 -->
  </section>

  <section id="shopinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7"></div>
      </div>
    </div>
  </section>

  <section id="worries">
    <!-- 省略 -->
  </section>

  <section id="solution">
    <!-- 省略 -->
  </section>

  <!-- 省略 -->

</body>

このように並べるイメージです。「col-md-5」にボタンを、「col-md-7」にリストを入れていきます。

 BOXの中身にボタンを設置する

ボタンは<button>タグを使用します。<button>タグには値を入れます。ここではtype=”button”とします。値には「button」（ボタン）と「submit」（送信）があります。問合せフォームの場合は「input」タグを使うことが多いです。ボタンの中身のテキストを入れましょう。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7"></div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>

BOXの中身にリストを設置する

右側のBOXにリストを配置していきます。リストはulタグを使います。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li>0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>

背景を設定する

「shopinfo」のセクションにbackgroundで画像を背景として設定します。画像をリピートしない場合はno-repeatを忘れず入れましょう。セクション全部を覆うようにbackground-size: cover;に設定します。高さを出すためheightの値も入れましょう。

/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

ボタンのスタイルを設定する

「col-md-5」に「button_box」というクラスを追加します。「button_box」に背景色と余白の調整、枠線を削除します。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-5 button_box">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li>0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>
/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

ボタンタグにはデフォルトでスタイルが設定されているので削除するcssも追加します。

/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

リストのスタイルを設定する

「col-md-7」に「shoplist」というクラスを追加します。そこのliに対してスタイルをあてていきます。フォントカラーと頭の「・」を削除します。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-5 button_box">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7 shoplist">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li>0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>
/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

.shoplist ul {
  list-style: none;
}

.shoplist li {
  color: #fff;
}

BOX内の要素の縦横位置をセンター揃えにする

各div内の要素を中央揃えにします。rowに対して高さを持たせて、中央寄せにします。rowに「shopbox」というクラス名を付けます。その要素にjustify-content: center;align-items: center;を指定しましょう。justify-contentで水平方向をセンターに指定し、align-itemsで縦方向をセンターにしています。これらはdisply:flex;を適用した親要素に対して指定します。また、高さを300pxとしておきます。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row shopbox">
        <div class="col-md-5 button_box">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7 shoplist">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li>0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>
/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

.shoplist ul {
  list-style: none;
}

.shoplist li {
  color: #fff;
}

.shopbox {
  justify-content: center;
  align-items: center;
  height: 300px;
}

Bootstrapのclassを使用して中央揃えをする

ボタンを中央寄せにします。中央寄せにしたい要素の親要素に「text-center」というクラスを追加します。text-centerとはtext-align:centere;というスタイルが指定されています。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row shopbox">
        <div class="col-md-5 button_box text-center">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7 shoplist">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li>0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>

リストの一行のみフォントサイズを変更する

電話番号だけフォントが大きいので、フォントサイズを変更します。電話番号を囲っているliに「telnumber」クラスを追加します。

<!-- 省略 -->
<body>
  <!-- 省略 -->

  <section id="shopinfo">
    <div class="container">
      <div class="row shopbox">
        <div class="col-md-5 button_box text-center">
          <button type="button">WEBでの予約・無料相談はこちら</button>
        </div>
        <div class="col-md-7 shoplist">
          <ul>
            <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
            <li>月〜金　10:00~13:00、14:30~21:00</li>
            <li>土　　　10:00~13:00、14:30~19:00</li>
            <li>※日・祝は休診日</li>
            <li class="telnumber">0120-821-455</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 省略 -->

</body>
/* 省略 */
#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

.shoplist ul {
  list-style: none;
}

.shoplist li {
  color: #fff;
}

.shopbox {
  justify-content: center;
  align-items: center;
  height: 300px;
}

.telnumber {
  font-size: 2rem;
}

完成コード

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />

    <!-- Font Awesome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet" />

    <!-- style.cssの読み込み -->
    <link rel="stylesheet" href="css/style.css" />

    <title>Dental beauty</title>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-sm leftimg">
            <h1>
              <img src="images/maintext.png" alt="目立たない強制治療" class="img-fluid" />
            </h1>
          </div>
          <div class="col-sm rightimg">
            <img src="images/rightimg.png" alt="女性" class="img-fluid" />
          </div>
        </div>
        <div class="row campainwindow">
          <img src="images/campainwindow.png" alt="オープンキャンペーン" class="img-fluid" />
        </div>
      </div>
    </header>

    <section id="campaign">
      <div class="yellow-area">
        <h1>
          <img src="images/yellow-line.png" alt="たくさんあって嬉しい3つの割引キャンペーン" class="img-fluid" />
        </h1>
      </div>
      <div class="container-fluid">
        <div class="row ticketbox">
          <div class="col-sm">
            <h2>\\紹介で来られた方//</h2>
            <img src="images/small-window.png" alt="キャンペーン1" class="img-fluid" />
          </div>
          <div class="col-sm">
            <h2>\\学生の方//</h2>
            <img src="images/small-window.png" alt="キャンペーン2" class="img-fluid" />
          </div>
          <div class="col-sm">
            <h2>\\2名以上お申し込みの方//</h2>
            <img src="images/small-window.png" alt="キャンペーン3" class="img-fluid" />
          </div>
        </div>
      </div>
    </section>

    <section id="shopinfo">
      <div class="container">
        <div class="row shopbox">
          <div class="col-md-5 button_box text-center">
            <button type="button">WEBでの予約・無料相談はこちら</button>
          </div>
          <div class="col-md-7 shoplist">
            <ul>
              <li>平日21:00まで受付　お仕事帰りにも診察可能です</li>
              <li>月〜金　10:00~13:00、14:30~21:00</li>
              <li>土　　　10:00~13:00、14:30~19:00</li>
              <li>※日・祝は休診日</li>
              <li class="telnumber">0120-821-455</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section id="worries">
      <h1>このような<span class="font-blue">お悩み</span>ありませんか？</h1>
      <div class="container">
        <div class="row">
          <div class="col-sm-6 worry-list">
            <ul>
              <li><i class="fas fa-check"></i>矯正器具が<span class="font-blue">目立つので抵抗</span>がある</li>
              <li><i class="fas fa-check"></i>矯正器具が<span class="font-blue">目立つので抵抗</span>がある</li>
              <li><i class="fas fa-check"></i>矯正器具が<span class="font-blue">目立つので抵抗</span>がある</li>
              <li><i class="fas fa-check"></i>矯正器具が<span class="font-blue">目立つので抵抗</span>がある</li>
              <li><i class="fas fa-check"></i>矯正器具が<span class="font-blue">目立つので抵抗</span>がある</li>
            </ul>
          </div>
          <div class="col-sm-6 worry-img">
            <img src="images/worries.jpg" alt="女性悩み" class="img-70" />
          </div>
        </div>
      </div>
    </section>

    <section id="solution">
      <div class="yellow-area pad-3">
        <h1>キートス強制予防歯科なら<br /><span class="l-font">全て解決できます</span></h1>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6 pad-0">
            <img src="images/image01.jpg" alt="計算機" class="img-fluid" />
          </div>
          <div class="col-sm-6 bluebox pad-3">
            <h2>リーズナブルな価格設定</h2>
            <p>デンタルローン、分割払いにも対応します。<br />次付き無理のない範囲でキレイな歯にできます。</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 bluebox pad-3">
            <h2>リーズナブルな価格設定</h2>
            <p>デンタルローン、分割払いにも対応します。<br />次付き無理のない範囲でキレイな歯にできます。</p>
          </div>
          <div class="col-sm-6 pad-0">
            <img src="images/image01.jpg" alt="計算機" class="img-fluid" />
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 pad-0">
            <img src="images/image01.jpg" alt="計算機" class="img-fluid" />
          </div>
          <div class="col-sm-6 bluebox pad-3">
            <h2>リーズナブルな価格設定</h2>
            <p>デンタルローン、分割払いにも対応します。<br />次付き無理のない範囲でキレイな歯にできます。</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 bluebox pad-3">
            <h2>リーズナブルな価格設定</h2>
            <p>デンタルローン、分割払いにも対応します。<br />次付き無理のない範囲でキレイな歯にできます。</p>
          </div>
          <div class="col-sm-6 pad-0">
            <img src="images/image01.jpg" alt="計算機" class="img-fluid" />
          </div>
        </div>
      </div>
    </section>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>
@charset "UTF-8";

header {
  background: url(../images/background.png);
}

.leftimg {
  padding: 2rem;
}

.rightimg {
  padding: 2rem 2rem 0 0;
}

.campainwindow {
  margin-top: -90px;
}

.yellow-area h1 {
  font-size: 1.8rem;
  text-align: center;
}

.l-font {
  font-size: 2.3rem;
  font-weight: 800;
}

.ticketbox h2 {
  font-size: 1.5rem;
  text-align: center;
  color: #0b839a;
}

.ticketbox {
  padding: 2rem 0;
}

#solution .yellow-area {
  background-color: #ecd860;
}

.bluebox {
  background-color: #0b839a;
}

.bluebox h2, .bluebox p {
  color: #fff;
}

.bluebox p {
  padding-top: 2rem;
}

#worries h1 {
  text-align: center;
  font-weight: 600;
}

.worry-list ul {
  list-style: none;
}

.worry-list ul li i {
  padding: 0 1rem;
}

.worry-list li {
  padding: 0.7rem 0;
  font-size: 1.2rem;
  border-bottom: 1px dotted #999;
  font-weight: 600;
}

.worry-img, .worry-list {
  padding: 2rem;
}

#worries {
  margin: 1rem 0;
}

#shopinfo {
  background: url(../images/entrance.jpg) no-repeat center top;
  background-size: cover;
  height: 300px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.button_box {
  background-color: #ecd860;
  border: none;
  padding: 2rem 0;
}

.shoplist ul {
  list-style: none;
}

.shoplist li {
  color: #fff;
}

.shopbox {
  justify-content: center;
  align-items: center;
  height: 300px;
}

.telnumber {
  font-size: 2rem;
}

/* ユーティリティ */
.pad-0 {
  padding: 0;
}

.pad-1 {
  padding: 1rem;
}

.pad-2 {
  padding: 2rem;
}

.pad-3 {
  padding: 3rem;
}

.img-60 {
  width: 60%;
}

.img-70 {
  width: 70%;
}

.font-blue {
  color: #0b839a;
}
/* ユーティリティ */
カテゴリー
HTML/CSS基礎、共通

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画ドキュメント

前の記事

ランディングページ制作 コーディング編⑦
2021年5月24日
環境構築

次の記事

2-1. AWSのユーザ登録とCloud9のIDE作成
2021年6月26日