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">
<!--
画像は、以下からダウンロードください
https://undraw.co/illustrations
-->
<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>
コメント