<h2 class="border-solid">ここにタイトル</h2>
.border-solid {
/*線の種類 太さ 色*/
border-bottom: 3px solid #ff9800;
/*余白*/
padding-bottom: 10px;
}
シンプルに下線を引いた見出しです。
borderの種類を「solid」で設定しています。
<h2 class="border-dot">ここにタイトル</h2>
.border-dot{
/*線の種類 太さ 色*/
border-bottom: 3px dotted #ff9800;
/*余白*/
padding-bottom: 10px;
}
下線を点線にした見出しです。
borderの種類を「dotted」で設定しています。
<h2 class="border-dashed">ここにタイトル</h2>
.border-dashed {
/*線の種類 太さ 色*/
border-bottom: 3px dashed #ff9800;
/*余白*/
padding-bottom: 10px;
}
下線を破線にした見出しです。
borderの種類を「dashed」で設定しています。
<h2 class="border-double">ここにタイトル</h2>
.border-double{
/*線の種類 太さ 色*/
border-bottom: 6px double #ff9800;
/*余白*/
padding-bottom: 10px;
}
下線を二重線にした見出しです。
borderの種類を「double」で設定しています。
<h2 class="border-under-two">ここにタイトル</h2>
.border-under-two {
/*線の種類 太さ 色*/
border-bottom: 3px solid #ff9800;
/*余白*/
padding: 1rem 0;
/*相対位置*/
position: relative;
}
.border-under-two:before {
position: absolute;
bottom: -3px;
left: 0;
width: 20%;
height: 3px;
content: '';
/*長い方の線の色*/
background: #ffe0b2;
}
下線に色を重ねて2種類の色を使った見出しです。同色の色でデザインすると綺麗です。
<h2 class="border-under-strip">ここにタイトル</h2>
.border-under-strip{
position: relative;
padding: 1.5rem 0;
}
.border-under-strip:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
content: '';
background-image: -webkit-repeating-linear-gradient(135deg, #ffb74d, #ffb74d 1px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(-45deg, #ffb74d, #ffb74d 1px, transparent 2px, transparent 5px);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
下線をストライプにした見出しです。
<h2 class="border-under-fade">ここにタイトル</h2>
.border-under-fade {
position: relative;
width: 100%;
margin: 50px 0;
padding: 20px 0;
text-align: center;
}
.toph2::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
background: #fff;
}
.toph2::before {
background-image: -webkit-linear-gradient(left, transparent, #212121 25%, #212121 75%, transparent);
background-image: linear-gradient(to right, transparent, #212121 25%, #212121 75%, transparent);
background-position: center;
background-repeat: no-repeat;
}
下線が外側にかけてフェードがかかった見出しです。中央寄せのデザインで使うといい感じです。
<h2 class="border-under-fade">ここにタイトル</h2>
<div class="small-tt mb-4">サブタイトル</div>
.border-under-fade {
position: relative;
width: 100%;
margin: 50px 0;
padding: 20px 0;
text-align: center;
}
.toph2::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
background: #fff;
}
.toph2::before {
background-image: -webkit-linear-gradient(left, transparent, #212121 25%, #212121 75%, transparent);
background-image: linear-gradient(to right, transparent, #212121 25%, #212121 75%, transparent);
background-position: center;
background-repeat: no-repeat;
}
.small-tt {
text-align: center;
font-size: 20px;
color: #9e9e9e;
}
フェードの見出しに小さめのサブタイトルが付いた見出しです。
<h2 class="border-left-single">ここにタイトル</h2>
.border-left-single {
padding: 1rem 1rem;
border-left: 4px solid #ff9800;
}
左側に縦線が入った見出しです。
<h2 class="border-left-double">ここにタイトル</h2>
.border-left-double{
padding: 1rem 1rem;
border-left: 4px double #ff9800;
}
左側に二重の縦線が入った見出しです。
<h2 class="border-kakomi">ここにタイトル</h2>
.border-kakomi{
padding: 1rem 1rem;
border: 3px solid #ff9800;
}
シンプルな線で周りを囲んだ見出しです。
<h2 class="border-kakomi-dot">ここにタイトル</h2>
.border-kakomi-dot{
padding: 1rem 1rem;
border: 3px dotted #ff9800;
}
点線で周りを囲んだ見出しです。
<h2 class="border-kakomi-hasen ">ここにタイトル</h2>
.border-kakomi-hasen {
padding: 1rem 1rem;
border: 3px dashed #ff9800;
}
破線で周りを囲んだ見出しです。
<h2 class="border-kakomi-double">ここにタイトル</h2>
.border-kakomi-double{
position: relative;
padding: 1rem 1rem;
border: 4px double #ff9800;
}
.border-kakomi-double:before {
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 8px);
height: calc(100% - 8px);
content: '';
border: 2px solid #ff9800;
}
二重線で周りを囲んだ見出しです。
<h2 class="tb-border">ここにタイトル</h2>
.tb-border {
padding: 1rem 1rem;
border-top: 3px solid #ff9800;
border-bottom: 3px solid #ff9800;
}
上下に線を引いた見出しです。
<h2 class="tb-double">ここにタイトル</h2>
.tb-double{
padding: 1rem 1rem;
border-top: 6px double #ff9800;
border-bottom: 6px double #ff9800;
}
上下に二重線を引いた見出しです。
<h2 class="border-side-single">ここにタイトル</h2>
.border-side-single {
position: relative;
padding: 0 65px;
text-align: center;
}
.border-side-single:before {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
content: '';
background: #000;
}
.border-side-single span {
position: relative;
padding: 0 1em;
background: #fff;
}
文字を線で挟んだ見出しです。
<h2 class="border-side-double">ここにタイトル</h2>
.border-side-double{
position: relative;
display: inline-block;
padding: 0 65px;
text-align: center;
}
.border-side-double:before,
.border-side-double:after {
position: absolute;
top: calc(50% - 3px);
width: 50px;
height: 6px;
content: '';
border-top: solid 2px #000;
border-bottom: solid 2px #000;
}
.border-side-double:before {
left: 0;
}
.border-side-double:after {
right: 0;
}
文字を二重線で挟んだ見出しです。
<h2 class="bg-fill">ここにタイトル</h2>
.bg-fill{
padding: 1rem 1rem;
background: #ff9800;
color: #fff;
border-radius: 3px;
}
背景を塗りつぶした見出しです。
<h2 class="bg-left">ここにタイトル</h2>
.bg-left{
padding: 1rem 1rem;
border-left: 5px solid #ff9800;
background: #ffe0b2;
color: #f57c00;
}
背景を塗りつぶした見出しに左側に縦線を引いた見出しです。
<h2 class="bg-top">ここにタイトル</h2>
.bg-top{
padding: 1rem 1rem;
border-top: 3px solid #ff9800;
background: #ffe0b2;
color: #f57c00;
}
背景を塗りつぶした見出しの上側に線を引いた見出しです。
<h2 class="bg-under">ここにタイトル</h2>
.bg-under{
padding: 1rem 1rem;
border-bottom: 5px solid #ff9800;
background: #ffe0b2;
color: #f57c00;
}
背景を塗りつぶした見出しの下側に線を引いた見出しです。
<h2 class="grad1">ここにタイトル</h2>
.grad1{
padding: 1rem 2rem;
color: #fff;
background-color: #05e8ba;
background-image: linear-gradient(315deg, #05e8ba 0%, #087ee1 74%);
}
背景をグラデーションにした見出しです。
<h2 class="grad2">ここにタイトル</h2>
.grad2{
padding: 1rem 2rem;
color: #fff;
background-color: #fe7bb0;
background-image: linear-gradient(315deg, #fe7bb0 0%, #ff748b 74%);
border-radius:5px;
}
背景をグラデーションにした見出しの角を少し丸くした見出しです。
<h2 class="grad3">ここにタイトル</h2>
.grad3{
padding: 1rem 3rem;
color: #fff;
border-radius: 100vh;
background-color: #3bb78f;
background-image: linear-gradient(315deg, #3bb78f 0%, #0bab64 74%);
}
背景をグラデーションにした見出しの角を大きく丸くした見出しです。
<h2 class="grad-under">ここにタイトル</h2>
.grad-under{
position: relative;
padding: 1rem .5rem;
}
.grad-under:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
content: '';
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}
下線をグラデーションにした見出しです。
<h2 class="ribon1">ここにタイトル</h2>
.ribon1 {
line-height: 60px;
position: relative;
height: 60px;
margin: 2em 50px 1em;
padding: 0 2rem;
text-align: center;
color: #fff;
background:#fa4141;
font-size: 24px;
font-weight: 600;
}
.ribon1:before,
.ribon1:after {
position: absolute;
top: 0;
display: block;
height: 48px;
content: '';
border: 30px solid #fa4141;
}
.ribon1:before {
left: -40px;
border-left-width: 15px;
border-left-color: transparent;
}
.ribon1:after {
right: -40px;
border-right-width: 15px;
border-right-color: transparent;
}
リボン風の見出しです。
<h2 class="ribon2">ここにタイトル</h2>
.ribon2 {
position: relative;
margin: 1rem -35px;
padding: 2rem 2rem;
background: #fa4141;
color: #fff;
text-align:center;
}
.ribon2:before,
.ribon2:after {
position: absolute;
content: '';
}
.ribon2:before {
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-top: 10px solid #c62828;
border-left: 10px solid transparent;
}
.ribon2:after {
right: 0;
bottom: -10px;
width: 0;
height: 0;
border-top: 10px solid #c62828;
border-right: 10px solid transparent;
}
立体的に見えるリボン風の見出しです。
<h2 class="fukidashi1">ここにタイトル</h2>
.fukidashi1{
position: relative;
padding: 1.5rem 2rem;
color: #1565c0;
border-radius: 10px;
background: #e3f2fd;
}
.fukidashi1:after {
position: absolute;
bottom: -15px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #e3f2fd transparent transparent transparent;
}
吹き出し風の見出しです。
<h2 class="fukidashi2">ここにタイトル</h2>
.fukidashi2 {
position: relative;
padding: 1.5rem 2rem;
border: 3px solid #d8d8d8;
border-radius: 10px;
background: #f9f9f9;
}
.fukidashi2:before {
position: absolute;
bottom: -14px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #d8d8d8 transparent transparent transparent;
}
.fukidashi2:after {
position: absolute;
bottom: -10px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #f9f9f9 transparent transparent transparent;
}
吹き出し風の見出しにふちをつけた見出しです。
<h2 class="strip_border">ここにタイトル</h2>
.strip_border{
color: #6cb4e4;
text-align: center;
padding: 0.25em;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
背景を斜めストライプにし、上下に線を引いた見出しです。
<h2 class="bigtt">ここにタイトル</h2>
.bigtt:first-letter {
font-size: 2em;
color: #7172ac;
}
一文字目だけ装飾を変えた見出しです。
<h2 class="check_first">ここにタイトル</h2>
.check_first {
position: relative;
color: white;
background: #81d0cb;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 1.8em;
}
.check_first:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
font-weight: 900;
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}
チェックマークが先頭に付いています。FontAwesomeを使っています。
<h2 class="tag_tt">ここにタイトル</h2>
.tag_tt {
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}
.tag_tt:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
font-weight: 900;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
タグが付いている見出しです。