「Bootstrap」ナナヨ マニュアル(見出し)

「Bootstrap」ナナヨマニュアル(見出し)

Bootstrap

2023.12.142023.12.15

見出しデザイン（h1,h2,h3,h4,h5,h6）
見出しデザイン（display-1,・・・display-6）

見出しデザイン（h1,h2,h3,h4,h5,h6）

表示（プレビュー）

＜H1＞～＜H6＞は、下記と同じ表示です。

ここでは、本ブログのデザインが適応されてしまうので省略します。

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

ソースコード

<h1>見出し H1</h1>
    <h2>見出し H2</h2>
    <h3>見出し H3</h3>
    <h4>見出し H4</h4>
    <h5>見出し H5</h5>
    <h6>見出し H6</h6>
<hr>
<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

クリックしてCSSを表示


.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color)
}

.h1,h1 {
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width: 1200px) {
    .h1,h1 {
        font-size:2.5rem
    }
}

.h2,h2 {
    font-size: calc(1.325rem + .9vw)
}

@media (min-width: 1200px) {
    .h2,h2 {
        font-size:2rem
    }
}

.h3,h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
    .h3,h3 {
        font-size:1.75rem
    }
}

.h4,h4 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
    .h4,h4 {
        font-size:1.5rem
    }
}

.h5,h5 {
    font-size: 1.25rem
}

.h6,h6 {
    font-size: 1rem
}

見出しデザイン（display-1,・・・display-6）

表示（プレビュー）

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

ソースコード/スタイル

<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>

クリックしてCSSを表示


.display-1 {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-1 {
        font-size:5rem
    }
}

.display-2 {
    font-size: calc(1.575rem + 3.9vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-2 {
        font-size:4.5rem
    }
}

.display-3 {
    font-size: calc(1.525rem + 3.3vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-3 {
        font-size:4rem
    }
}

.display-4 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-4 {
        font-size:3.5rem
    }
}

.display-5 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-5 {
        font-size:3rem
    }
}

.display-6 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2
}

@media (min-width: 1200px) {
    .display-6 {
        font-size:2.5rem
    }
}