「Bootstrap5入門: 基礎から実演まで」の感想・備忘録

kindle本「Bootstrap5入門: 基礎から実演まで」のまとめ。

点数

72点

感想

Bootstrap5を使ってランディングページを作っていく、という内容だった。

全てを覚える必要はないので、必要になったらソースを確認すればいいと思う。

ランディングページ

<!doctype html>
<html lang="ja" class="h-100">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./bootstrap.min.css" rel="stylesheet">
  <link href="./bootstrap-icons.css" rel="stylesheet">
  <title>ITスクール(仮)</title>
</head>
<body class="h-100 vstack"
  data-bs-spy="scroll" data-bs-target="#navbar">
  <!-- 最後に、bodyへスクロールスパイを追加 -->

  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top" id="navbar">
    <div class="container">
      <a class="navbar-brand" href="#">
        <i class="bi bi-app-indicator"></i>
        ITスクール(仮)
      </a>
      <!-- トグルボタン -->
      <button class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- リンク一覧 -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#home">
              ホーム
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#course">コース</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#reputation">評判</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#content">講座内容</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#pricing">価格</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contactUs">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- コンテンツ -->
  <!-- ホーム -->
  <section class="bg-danger text-white" id="home" style="padding: 80px 0 50px">
    <div class="container py-3">
      <div class="row align-items-center g-4">

        <!-- 左側 -->
        <div class="col-md-7">
          <h1>ITを学んで、自己投資しませんか?</h1>
          <p>今なら無料カウンセリング実施中</p>
          <a href="#contactUs" class="btn btn-dark px-5 shadow">
            相談する
          </a>
        </div>

        <!-- 右側 -->
        <div class="col-md-5 text-center">
          <!--
            画像は、以下からダウンロードください
            
          -->
          <img src="undraw_content_team_3epn.svg" class="img-fluid"
            alt="Content team">
        </div>

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

  <!-- コース -->
  <section class="py-5" id="course">
    <div class="container text-center py-3">
      <div class="row pb-3">
        <div class="col">
          <h1>どのコースをお望みですか?</h1>
        </div>
      </div>
      <div class="row g-4">

        <!-- プログラミング -->
        <div class="col-md-4">
          <!-- カード風 -->
          <div class="border p-3 shadow">
            <i class="bi bi-laptop text-danger fs-1"></i>
            <h5>プログラミング</h5>
            <p class="text-muted">
              アプリを作成したい人に最適です。
            </p>
            <a href="#content" class="btn btn-danger rounded-pill">
              詳細はこちら
            </a>
          </div>
        </div>

        <!-- ネットワーク -->
        <div class="col-md-4">
          <div class="border p-3 shadow">
            <i class="bi bi-cloud text-danger fs-1"></i>
            <h5>ネットワーク</h5>
            <p class="text-muted">
              システムを管理したい人に適しています。
            </p>
            <a href="#content" class="btn btn-danger rounded-pill">
              詳細はこちら
            </a>
          </div>
        </div>

        <!-- デザイン -->
        <div class="col-md-4">
          <div class="border p-3 shadow">
            <i class="bi bi-brush text-danger fs-1"></i>
            <h5>デザイン</h5>
            <p class="text-muted">
              デザインを学びたい人に最適です。
            </p>
            <a href="#content" class="btn btn-danger rounded-pill">
              詳細はこちら
            </a>
          </div>
        </div>

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

  <!-- 評判 -->
  <section class="py-5 bg-light" id="reputation">
    <div class="container text-center py-3">
      <div class="row pb-3">
        <div class="col">
          <h1>受講生の皆様から、支持されています</h1>
        </div>
      </div>
      <!-- 行列の設定 -->
      <div class="row row-cols-1 row-cols-md-4">

        <!-- 年間受講者 -->
        <div class="col">
          <!-- カード -->
          <div class="card text-white bg-primary mb-3 shadow">
            <div class="card-body">
              <h1 class="card-title">600人</h1>
              <p class="card-text">年間受講者</p>
            </div>
          </div>
        </div>

        <!-- リピート率 -->
        <div class="col">
          <div class="card text-white bg-success mb-3 shadow">
            <div class="card-body">
              <h1 class="card-title">85%</h1>
              <p class="card-text">リピート率</p>
            </div>
          </div>
        </div>

        <!-- 満足度 -->
        <div class="col">
          <div class="card text-white bg-danger mb-3 shadow">
            <div class="card-body">
              <h1 class="card-title">99%</h1>
              <p class="card-text">満足度</p>
            </div>
          </div>
        </div>

        <!-- 挫折率 -->
        <div class="col">
          <div class="card text-white bg-secondary mb-3 shadow">
            <div class="card-body">
              <h1 class="card-title">3%</h1>
              <p class="card-text">挫折率</p>
            </div>
          </div>
        </div>

      </div>
      <p class="text-muted">※独自のアンケート結果</p>
    </div>
  </section>

  <!-- 講座内容  -->
  <section class="py-5" id="content">
    <div class="container py-3">
      <div class="row text-center pb-3">
        <div class="col">
          <h2>講座内容(一例)</h2>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-md-3 g-3">

        <!-- プログラミング基礎 -->
        <div class="col">
          <!-- カード -->
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?computer"
                alt="Computer">
            <div class="card-body">
              <h5 class="card-title">プログラミング基礎</h5>
              <p class="card-text">プログラミングの基礎を、ゼロから学びます。</p>
            </div>
          </div>
        </div>

        <!-- フレームワーク学習 -->
        <div class="col">
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?coding"
              alt="Coding">
            <div class="card-body">
              <h5 class="card-title">フレームワーク学習</h5>
              <p class="card-text">実務で必要となるフレームワークを学びます。</p>
            </div>
          </div>
        </div>
        
        <!-- クラウドシステム構築 -->
        <div class="col">
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?network"
              alt="Network">
            <div class="card-body">
              <h5 class="card-title">クラウドシステム構築</h5>
              <p class="card-text">AWSやMicrosoft Azureの構築方法を学びます。</p>
            </div>
          </div>
        </div>

        <!-- UI・UX -->
        <div class="col">
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?design"
              alt="Design">
            <div class="card-body">
              <h5 class="card-title">UI・UX</h5>
              <p class="card-text">デザインの原則を学びます。</p>
            </div>
          </div>
        </div>
        
        <!-- チームワーク -->
        <div class="col">
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?team"
              alt="Team">
            <div class="card-body">
              <h5 class="card-title">チームワーク</h5>
              <p class="card-text">共同作業をすることで、チームワークを学びます。</p>
            </div>
          </div>
        </div>

        <!-- 学習方法 -->
        <div class="col">
          <div class="card shadow h-100">
            <img src="https://source.unsplash.com/640x426/daily?study"
              alt="Study">
            <div class="card-body">
              <h5 class="card-title">学習方法</h5>
              <p class="card-text">効率の良い、ITの学習方法を学びます。</p>
            </div>
          </div>
        </div>

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

  <!-- 相談(リンク) -->
  <section class="py-5 bg-danger text-white">
    <div class="container text-center">
      <div class="row">
        <div class="col">
          <p>受講をお悩みですか?</p>
          <h2 class="mb-3">今なら、相談も受け付けております。</h2>
          <a href="#contactUs" class="btn btn-dark px-5 shadow">
            相談する
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 価格 -->
  <section class="py-5" id="pricing">
    <div class="container text-center py-3">
      <div class="row pb-3">
        <div class="col">
          <h1>価格</h1>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-md-3 g-3">

        <!-- 無料 -->
        <div class="col">
          <!-- カード -->
          <div class="card shadow-sm h-100">
            <div class="card-header">
              <h4 class="fw-normal">無料</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title text-danger">0円</h1>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">カウンセリング</li>
                <li class="list-group-item">チャットサポート</li>
              </ul>
            </div>
            <div class="card-footer">
              <a href="#" class="w-100 btn btn-outline-danger">
                無料登録
              </a>
            </div>
          </div>
        </div>

        <!-- スタンダード -->
        <div class="col">
          <div class="card shadow-sm h-100">
            <div class="card-header">
              <h4 class="fw-normal">スタンダード</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title text-danger">2,980円</h1>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">カウンセリング</li>
                <li class="list-group-item">チャットサポート</li>
                <li class="list-group-item">全ての講座が受け放題</li>
              </ul>
            </div>
            <div class="card-footer">
              <a href="#" class="w-100 btn btn-danger">
                会員登録
              </a>
            </div>
          </div>
        </div>

        <!-- プレミアム -->
        <div class="col">
          <div class="card shadow-sm border-danger h-100">
            <div class="card-header text-white bg-danger">
              <h4 class="fw-normal">プレミアム</h4>
            </div>
            <div class="card-body pb-0">
              <h1 class="card-title text-danger">9,800円</h1>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">カウンセリング</li>
                <li class="list-group-item">チャットサポート</li>
                <li class="list-group-item">全ての講座が受け放題</li>
                <li class="list-group-item">オンライン個別指導</li>
              </ul>
            </div>
            <div class="card-footer">
              <a href="#" class="w-100 btn btn-danger">
                会員登録
              </a>
            </div>
          </div>
        </div>

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

  <!-- お問い合わせ -->
  <section class="py-5 bg-light" id="contactUs">
    <div class="container">
      <div class="row text-center">
        <div class="col">
          <h1>お問い合わせ</h1>
        </div>
      </div>
      <div class="row pt-3">

        <!-- 左側 -->
        <div class="col-md-4">
          <!-- 横方向で配置 -->
          <div class="hstack mb-3">
            <i class="bi bi-envelope-fill text-danger fs-3"></i>
            <div class="ms-3">
              <!-- 孫要素は、.hstackの影響を受けません(横に並ばない) -->
              <h5 class="mb-1">Eメール</h5>
              <span class="text-muted">info@example.com</span>
            </div>
          </div>

          <div class="hstack mb-3">
            <i class="bi bi-telephone-fill text-danger fs-3"></i>
            <div class="ms-3">
              <h5 class="mb-1">電話番号</h5>
              <span class="text-muted">03-1234-5678</span>
            </div>
          </div>
        </div>

        <!-- 右側 -->
        <div class="col-md-8">
          <!-- フォーム -->
          <form action="#" method="post">
            <div class="mb-3">
              <input type="text" class="form-control shadow-sm"
                placeholder="氏名">
            </div>
            <div class="mb-3">
              <input type="text" class="form-control shadow-sm"
                placeholder="Eメール">
            </div>
            <div class="mb-3">
              <textarea class="form-control shadow-sm"
                rows="4" placeholder="内容"></textarea>
            </div>
            <div class="col-12">
              <button class="btn btn-danger rounded-pill px-5">
                送信
              </button>
            </div>
          </form>
        </div>

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

  <!-- フッター -->
  <footer class="mt-auto py-2 bg-danger text-white">
    <div class="container text-center">
      ©2021 ITスクール(仮)
    </div>
  </footer>

  <script src="./bootstrap.bundle.min.js"></script>
</body>
</html>

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。