見出しデザイン（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>
.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>
.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
}
}
こちらもよろしく