Bootstrap5の模写コーディング part1

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

https://www.youtube.com/watch?v=8u-nhouM9cw

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

## 1-1.cssの導入(Bootstrap ver5.0)
```html
<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の導入
```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サイトの上部に配置される水平なメニューで、ナビゲーションリンクやドロップダウンメニューなど。

```html
<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>
```
ひな型をコピーし、```<!-- Navbar section -->```のコメントを```<body>```タグの中に記述し、ペースト

## 2-2.Navbarのレイアウト調整
### ナビゲーションが横に寄りすぎ→```<container-fluid>```を```<container>```に変更

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

### ナビゲーションリンクを右側に寄せたい
```<ul class="navbar-nav">```に```ms-auto```(マージンスタートオート)を追記する

### ボタン追加する
```html
<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)
```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> 要素を表し、詳細度が高いことを除けば html セレクターと同等。
グローバルの CSS 変数を宣言するのに便利。

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

```css
:root{
    --primary:#0d6efd;
    --dark:#21252f
    --body:#888;
}
```
### フォントを変える
Googleフォントを使用する
https://fonts.google.com/

cssの１行目にフォントのimportを貼り付け
```css
@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
```

css rulesを```body```タグに貼り付け
```css
body{
    font-family: "Sora", sans-serif;
    line-height: 1.7;
    color: var(--body);
}
```
```line-height```：行の高さ
```color:var(--body)```：var関数で色を指定し、統一できる

hタグの初期化(色と太さ)
```css
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>```タグ）に適用して、デフォルトの下線を消すために使用

ボタンの初期化
```css
.btn{
    padding: 14px 18px;
    border-width: 2px;
    border-radius: 0;
}
```
これから作られるボタンはこの要素が適用される
```padding```：上下14px 左右18px
```border-width```：ボーダーの太さ
```border-radius```：ボーダーの丸み

## 3.背景画面作成(hero section)
### Bootstrapのグリッドシステム
```html
<!-- 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"```
グリッドシステムのカラムを表す。
行（<div class="row">）の中に配置され、カラムの数や幅を指定することで、ページのレイアウトを細かく調整する

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

文字を真ん中に寄せて背景の上に表示させる
```html
<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で指定)
```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```：親タグを指定

### 背景の色を変更する(オーバーレイをかける)
```css
.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タグの文字の大きさや色を変える
```html
<h1 class="display-4 text-white">Bootstrap5</h1>
```
```display-4```：テキストを大きくする
```text-white```：文字色を白にする

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

### 文字の色と余白を調整
```html
<p class="text-white my-3">Bootstrap5</p>
```
```my-3```：上下の余白を3設ける

## 4.Service section(カードセクション)
### Service sectionの準備
```html
<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に張り付けて使用
```html
<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
```

### card-effectのcssを設定
```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を青色にする

```css
.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以降は、後日記述します。