Qiita Engineer Festa20242024年7月17日まで開催中！

Bootstrap5の模写コーディング part1

Posted at 2024-07-15

Bootstrap5の勉強をするために、Youtubeの「プログラミングチュートリアル」さんの動画「Bootstrap5でレスポンシブなウェブサイトを作ってみよう - HTML/CSS/Bootstrap5チュートリアル」で模写コーディングを行いました。

bootstrap5を使用する上でのポイントをまとめます。

1-1.cssの導入(Bootstrap ver5.0)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

上記のCSSをコピーして、「<title>タグの上」にペースト

1-2.cssの導入(style.css)

<link rel="stylesheet" href="style.css" />を「<title>タグの下」に記述

1-3.JSの導入

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>の上にペースト
これで準備完了

2-1.ヘッダー作成(Navbar)

BootstrapのComponents/Navbarを選択

Q.Navbarとは？
　Webサイトの上部に配置される水平なメニューで、ナビゲーションリンクやドロップダウンメニューなど。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ひな型をコピーし、のコメントを<body>タグの中に記述し、ペースト

2-2.Navbarのレイアウト調整

ナビゲーションが横に寄りすぎ→`<container-fluid>`を`<container>`に変更

<container-fluid>
　常にブラウザの全幅に広がる。
widthが常に100%(ウィドゥスじゃなくて、ワイド)
<container>
　固定幅のコンテナで、各ブレークポイント（sm, md, lg, xl）ごとに最大幅が設定されている。
→画面サイズに応じて横幅を自動的に設定する

ナビゲーションリンクを右側に寄せたい

<ul class="navbar-nav">にms-auto(マージンスタートオート)を追記する

ボタン追加する

<button class="btn btn-primary">Join Us</button>

ボタン生成

縦幅に余白を設ける

py-3：上下padding3
BootstrapのUtilitiesタブに使い方が記述されている

Navbarの背景色を変える

bg-lightをbg-darkに変更

文字色を白にする

<h2 class="text-white">Bootstrap5</h2>
文字タグにtext-whiteのクラスを追加する

Navbarの複数の文字色を変更したい(css)

.navbar .nav-link{
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding-top: 16px;
    }

!importantをつけると最優先で適用される
font-size：文字の大きさ
font-weight：文字の太さ
padding-top：上の余白

何回も繰り返し使用する色を定義する

:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では :root は要素を表し、詳細度が高いことを除けば html セレクターと同等。
グローバルの CSS 変数を宣言するのに便利。

（参考リンク）
https://developer.mozilla.org/ja/docs/Web/CSS/:root

:root{
    --primary:#0d6efd;
    --dark:#21252f
    --body:#888;
}

フォントを変える

Googleフォントを使用する
https://fonts.google.com/

cssの１行目にフォントのimportを貼り付け

@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');

css rulesをbodyタグに貼り付け

body{
    font-family: "Sora", sans-serif;
    line-height: 1.7;
    color: var(--body);
}

line-height：行の高さ
color:var(--body)：var関数で色を指定し、統一できる

hタグの初期化(色と太さ)

h1,h2,h3,h4,h5,h6{
    color: var(--dark);
    font-weight: 700;
}

aタグの初期化

a{
    color: var(--dark);
    text-decoration: none;
}

text-decoration:none;
CSSプロパティでテキストの装飾（例えば、下線や取り消し線など）を取り除くために使用する。主にリンク（<a>タグ）に適用して、デフォルトの下線を消すために使用

ボタンの初期化

.btn{
    padding: 14px 18px;
    border-width: 2px;
    border-radius: 0;
}

これから作られるボタンはこの要素が適用される
padding：上下14px 左右18px
border-width：ボーダーの太さ
border-radius：ボーダーの丸み

3.背景画面作成(hero section)

Bootstrapのグリッドシステム

<!-- hero section -->
<div class="hero" id="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <h1>Bootstrap5</h1>
            </div>
        </div>
    </div>
</div>

div class="hero"：クラスのセクションを作成
div class="container"
コンテンツを中央に揃えるための固定幅のコンテナを作成

(containerの主な特徴)

中央揃え: ページの中央にコンテンツを配置
レスポンシブ: 異なる画面サイズに応じて幅を自動調整
パディング: コンテンツが左右にくっつかないように適切な余白を提供

div class="row"
コンテナ内に行を作成し、その行内にカラムを配置するための要素

div class="col-lg-7"
グリッドシステムのカラムを表す。
行（

）の中に配置され、カラムの数や幅を指定することで、ページのレイアウトを細かく調整する

lgはBreakpoints(ブレークポイント)
画面の幅に応じて、どのような挙動をするのかを表すピクセルの起点
None < sm < md < lg < xl < xxl

文字を真ん中に寄せて背景の上に表示させる

<div class="hero vh-100 d-flex align-items-center" id="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-7　mx-auto text-center">

vh-100：Bootstrapのユーティリティクラスで、高さをビューポート(画面の表示領域)の100%に設定する。

d-flex：要素をフレックスボックスコンテナにするBootstrapのユーティリティクラス。
div containerがflex要素になる

align-items-center：縦の中央にアイテムを揃える
→containerにd-flexが適用されているので、この操作が可能になる

mx-auto：mxはマージンの左右のことで、これをautoにすることで、
自動的に左右に余白を設けて、真ん中に揃える

背景を挿入する(cssで指定)

.hero{
    background-image: url("/img/cover.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
}

background-image: url()：画像の挿入
background-position: center：画像を中心に配置
background-size：cover：画像をいっぱいに広げる
background-attachment: fixed：画像だけが固定される
position: relative：親タグを指定

背景の色を変更する(オーバーレイをかける)

.hero::after{
    content: "";
    position: absolute;
    width: 100%;
    heigth: 100%;
    top: 0;
    left: 0;
    background-color: rgba(37,39,71,0.7);
    z-index: -1;
}

content: ""：疑似要素は必要になる
position: absolute：hero sectionを起点にしてオーバーレイをかけるために設定
background-color: rgba(37,39,71,0.7)：aで透明度を指定する
z-index: -1：ボタンが押せなくなるのでZ軸を指定する

hタグの文字の大きさや色を変える

<h1 class="display-4 text-white">Bootstrap5</h1>

display-4：テキストを大きくする
text-white：文字色を白にする

displayの参考リンク
https://www.tohoho-web.com/bootstrap/typography.html

文字の色と余白を調整

<p class="text-white my-3">Bootstrap5</p>

my-3：上下の余白を3設ける

4.Service section(カードセクション)

Service sectionの準備

<div class="row">
    <div class="col-lg-4 sm-6">
        <div class="service card-effect">
            <div class="iconbox">
                <i class="bx bxs-comment-detail">
            </div>
        </div>
    </div>
</div>

参考リンク
https://boxicons.com/

UsageのStarter Templatesの下記のリンクをhtmlに張り付けて使用

<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

card-effectのcssを設定

:root{
    /* 省略 */
    --box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
.card-effect{
    box-shadow: var(--box-shadow);
    background-color: #fff;
    padding: 25px;
    transition: all 0.35s ease;
}

.card-effect:hover{
    box-shadow: none;
    transform: translateY(5px);
}

.iconbox{
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content:center;
    color: white;
    font-size: 32px;
    background-color: var(--primary);
    border-radius: 100px;
}

.card-effect
card sectionで使いまわすため、rootにbox-shadowを設定
transition: all 0.35s ease：hoverした時の操作を行うため設定
transition：CSSでアニメーションを表現
all：cssプロパティ全てに適用
0.35s：トランジションの継続時間
ease：トランジションのタイミング関数
(アニメーションの速度をコントロール。easeはゆっくり→速く→ゆっくりになる効果)
.card-effect:hover
transform: translateY(5px)：要素を垂直方向（Y軸）に5ピクセル移動させる
(hoverしたとき5px下がる)
.iconbox
display: flex
align-items: center：Y軸に対して中央に揃える
justify-content:center：X軸に対して中央に揃える
border-radius: 100px：角を丸くする

hoverしたときに、cardを青色にする

.service{
    position: relative;
    overflow: hidden;
}

.service::after{
    content: "";
    position: abusolute;
    top: -100%;
    left: 0;
    background-color: var(--primary);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.35s ease;
    z-index: -1;
}

.service:hover h5,
.service:hover p{
    color:white;
}

.service:hover .iconbox{
    background-color: #fff;
    color: var(--primary);
}

.service:hover::after{
    opacity: 1;
    top: 0;
}

opacity: 0：透明度を0に設定
opacity: 1：透明度を1に設定
hoverしたときの透明度を切り替える

5.Features section以降は、後日記述します。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up