ホームページ制作に役立つ見出しをまとめています。
紹介したい見出しができたら随時掲載していきます。
190531 背景色がある見出し「28.背景に影の見出し」追加
190321 公開

.
1.線による見出し
1.シンプルな下線の見出し

HTML
<div class="midashi">1.シンプルな下線の見出し</div>
CSS
.midashi {
border-bottom: solid 2px black;
}

2.色文字と破線の見出し

HTML
<div class="midashi">2.色文字と破線の見出し</div>
CSS
.midashi {
color:blue;
border-bottom:dashed 2px blue;
}

3.色文字と点線の見出し

HTML
<div class="midashi">3.色文字と点線の見出し</div>
CSS
.midashi {
color:red;
border-bottom:dotted 2px red;
}

4.色文字と二重線の見出し

HTML
<div class="midashi">4.色文字と二重線の見出し</div>
CSS
.midashi{
color:green;
border-bottom:double 5px green;
}

5.上下に線の見出し

HTML
<div class="midashi">5.上下に線の見出し</div>
CSS
.midashi {
padding:0.5em 0;
border-top:solid 2px;
border-bottom:solid 2px;
}

6.囲んだ見出し

HTML
<div class="midashi">6.囲んだ見出し</div>
CSS
.midashi {
padding:0.5em;
border:solid 3px green;
}

7.角丸で囲んだ見出し

HTML
<div class="midashi">7.角丸で囲んだ見出し</div>
CSS
.midashi {
padding:0.5em;
border:solid 3px green;
border-radius:0.5em;
}

8.角丸で囲んだ見出し

HTML
<div class="midashi">8.角丸で囲んだ見出し</div>
CSS
.midashi {
padding:0.5em;
border:solid 3px green;
border-radius: 0.5em 0 0 0.5em;
}

9.左線の見出し

HTML
<div class="midashi">9.左線の見出し</div>
CSS
.midashi {
padding:0.25em 0.5em;
background:transparent;
border-left:solid 7px green;
}

10.下線で左は別色の見出し

HTML
<div class="midashi">10.下線で左は別色の見出し</div>
CSS
.midashi {
position:relative;
border-bottom:solid 3px #33FF99;
}
.midashi:after {
position:absolute;
content:" ";
display:block;
border-bottom:solid 3px green;
bottom:-2px;
width:10%;
}

11.太い下線の見出し(縦グラデーション)

HTML
<div class="midashi">11.太い下線の見出し</div>
CSS
.midashi {
background:linear-gradient(transparent 40%, #33FF99 100%);/*%で縦グラデーションの設定*/
}

12.ストライプの下線の見出し

HTML
<div class="midashi">12.ストライプの下線の見出し</div>
CSS
.midashi {
position:relative;
}
.midashi:after {
content:"";
position:absolute;
left:0;
bottom:-5px;
width:100%;
height:7px;
background:-webkit-repeating-linear-gradient(-45deg, #33FF99, #33FF99 2px, #fff 2px, #fff 4px);
background:repeating-linear-gradient(-45deg, #33FF99, #33FF99 2px, #fff 2px, #fff 4px);
}

13.グラデーションの下線の見出し(1色)

HTML
<div class="midashi">13.グラデーションの下線の見出し</div>
CSS
.midashi {
position:relative;
}
.midashi:after {
content:"";
display:block;
height:5px;
background:-webkit-linear-gradient(to right, lightgreen, transparent);
background:linear-gradient(to right, lightgreen, transparent);
}

14.グラデーションの下線の見出し(2色)

HTML
<div class="midashi">14.グラデーションの下線の見出し</div>
CSS
.midashi {
position:relative;
}
.midashi:after {
content:"";
display:block;
height:5px;
background:-webkit-linear-gradient(to right, lightgreen, yellow);
background:linear-gradient(to right, lightgreen, yellow);
}

15.矢印下線の見出し

HTML
<div class="midashi">15.矢印下線の見出し</div>
CSS
.midashi {
position:relative;
padding-left:1.2em;
}
.midashi:before {
content:'';
position:absolute;
bottom:-3px;
left:0;
width:0;
height:0;
border:none;
border-left:solid 15px transparent;
border-bottom:solid 15px green;
}
.midashi:after {
position:absolute;
content:'';
bottom:-3px;
left:10px;
width:100%;
border-bottom:solid 3px green;
}

16.矢印とグラデ下線の見出し

HTML
<div class="midashi">16.矢印とグラデ下線の見出し</div>
CSS
.midashi {
position: relative;
padding-left:1.2em;
}
.midashi:before {
content:'';
position:absolute;
bottom:-3px;
left:0;
width:0;
height:0;
border:none;
border-left:solid 15px transparent;
border-bottom:solid 15px green;
}
.midashi:after {
content:'';
position:absolute;
bottom:-3px;
left:10px;
width:100%;
display:block;
height:5px;
background:-webkit-linear-gradient(to right, green, transparent);
background:linear-gradient(to right, green, transparent);
}

17.文字の両端に線の見出し

HTML
<div class="midashi">17.文字の両端に線の見出し</div>
CSS
.midashi {
position:relative;
display:inline-block;
padding:0 80px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:50%;
display:inline-block;
width:15%;
height:2px;
background-color:black;
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

18.文字の両端に二重線の見出し

HTML
<div class="midashi">18.文字の両端に二重線の見出し</div>
CSS
.midashi {
position:relative;
display:inline-block;
padding:0 80px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:50%;
display:inline-block;
width:65px;
height:6px;
border-top:solid 2px green;
border-bottom:solid 2px green;
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

19.スラッシュで囲んだ見出し

HTML
<div class="midashi">19.スラッシュで囲んだ見出し</div>
CSS
.midashi {
position:relative;
display:inline-block;
padding:0 50px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top: 50%;
display:inline-block;
width:35px;
height:2px;
background-color:green;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

20.カギカッコの見出し

HTML
<div class="midashi">20.カギカッコの見出し</div>
CSS
.midashi {
position:relative;
padding:0 40px;
line-height:1.5;
display:inline-block;
}
.midashi:before, .midashi:after {
content:'';
width:15px;
height:25px;
position:absolute;
display:inline-block;
}
.midashi:before {
border-left:solid 3px green;
border-top:solid 3px green;
top:-3px;
left: 20px;
}
.midashi:after {
border-right:solid 3px green;
border-bottom:solid 3px green;
bottom:-3px;
right: 20px;
}

21.大カッコの見出し

HTML
<div class="midashi">21.大カッコの見出し</div>
CSS
.midashi {
position:relative;
padding:0 40px;
line-height:1.5;
display:inline-block;
top:0;
}
.midashi:before, .midashi:after {
content:'';
width:10px;
height:100%;
position:absolute;
display:inline-block;
}
.midashi:before {
border-left:solid 3px green;
border-top:solid 3px green;
border-bottom:solid 3px green;
left:25px;
}
.midashi:after {
content:'';
border-top:solid 3px green;
border-right:solid 3px green;
border-bottom:solid 3px green;
right:25px;
}

22.交差線のある囲みの見出し

HTML
<div class="midashi">22.交差線のある囲みの見出し</div>
CSS
.midashi {
position:relative;
padding:0.25em 1em;
border-top:solid 2px green;
border-bottom:solid 2px green;
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:-7px;
width:2px;
height:-webkit-calc(100% + 14px);
height:calc(100% + 14px);
background-color:green;
}
.midashi:before {
left:7px;
}
.midashi:after {
right:7px;
}

23.上下大カッコの見出し

HTML
<div class="midashi">23.上下大カッコの見出し</div>
CSS
.midashi {
position:relative;
margin:10px 0;
text-align:center;
padding:5px;
background-color:white;
}
.midashi:before{
content:'';
height:80px;
width:120px;
border:solid 1px green;
display:block;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
z-index:-1;
}

24.両端に線の見出し(センター)

HTML
<div class="midashi"><span>24.両端に線の見出し(センター)</span></div>
CSS
.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:1px;
background:#aaa;
background-color:black;
}

25.両端に二重線の見出し(センター)

HTML
<div class="midashi"><span>25.両端に二重線の見出し(センター)</span></div>
CSS
.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:6px;
border-top:solid 2px green;
border-bottom:solid 2px green;
}

26.両端にグラデーション線の見出し

HTML
<div class="midashi"><span>26.両端にグラデーション線の見出し</span></div>
CSS
.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:3px;
background:#aaa;
background:-webkit-linear-gradient(-45deg, transparent, green 10%, green 90%, transparent);
background:linear-gradient(-45deg, transparent, green 10%, green 90%, transparent);
}

27.上吹き出しの見出し

HTML
<div class="midashi">27.上吹き出しの見出し</div>
CSS
.midashi {
position:relative;
background:white;
border:solid 3px green;padding: 0.3em;
border-radius:10px;
}
.midashi::before,
.midashi::after {
position:absolute;
top:-70%;
left:20px;
content:'';
height:0;
width:0;
border:10px solid transparent;
}
.midashi::before {
border-bottom:15px solid green;
}
.midashi::after {
margin-top:4px;
border-bottom:15px solid white;
}

28.下吹き出しの見出し

HTML
<div class="midashi">28.下吹き出しの見出し</div>
CSS
.midashi {
position:relative;
background:white;
border:solid 3px green;padding: 0.3em;
border-radius:10px;
}
.midashi::before,
.midashi::after {
position:absolute;
top:100%;
left:20px;
content:'';
height:0;
width:0;
border:10px solid transparent;
}
.midashi::before {
border-top:15px solid green;
}
.midashi::after {
margin-top:-4px;
border-top:15px solid white;
}

.
2.背景色がある見出し
1.背景色の見出し

HTML
<div class="midashi">1.背景色の見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
}

2.下線の見出し

HTML
<div class="midashi">2.背景色と下線の見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 3px green;
}

3.左線の見出し

HTML
<div class="midashi">3.背景色と左線の見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
border-left:solid 7px green;
}

4.立体的な見出し

HTML
<div class="midashi">4.立体的な見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 4px #d7d7d7;
}

5.左線と立体的な見出し

HTML
<div class="midashi">5.左線と立体的な見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 4px #d7d7d7;
border-left:solid 7px green;
}

6.周りに影をつけた見出し

HTML
<div class="midashi">6.周りに影をつけた見出し</div>
CSS
.midashi {
padding:0.5em;
background:#CCFFCC;
box-shadow:0 0 13px black;/*数字で影の位置変更*/
}

7.ステッチ風の見出し

HTML
<div class="midashi">7.ステッチ風の見出し</div>
CSS
.midashi {
padding:0.3em;
background:#CCFFCC;
box-shadow:0px 0px 0px 5px #CCFFCC;
border:dashed 2px white;
}

8.角折れの見出し

HTML
<div class="midashi">8.角折れの見出し</div>
CSS
.midashi {
position:relative;
padding:0.5em;
background:#CCFFCC;
}
.midashi:after {
content:'';
position:absolute;
left:0px;
top:0px;
border-width:0 0 15px 15px;
border-style:solid;
border-color:#fff #fff lightgreen;
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
}

9.ステッチで角折れの見出し

HTML
<div class="midashi">9.ステッチで角折れの見出し</div>
CSS
.midashi {
position:relative;
padding:0.3em;
background:#CCFFCC;
box-shadow:0px 0px 0px 5px #CCFFCC;
border:dashed 2px white;
}
.midashi:after {
content: '';
position: absolute;
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff lightgreen;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

10.上吹き出しの見出し

HTML
<div class="midashi">10.上吹き出しの見出し</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi:after {
content: '';
position: absolute;
top: -70%;
left: 20px;
border: 15px solid transparent;
border-bottom: 15px solid #CCFFCC;
width: 0;
height: 0;
}

11.下吹き出しの見出し

HTML
<div class="midashi">11.下吹き出しの見出し</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
border: 15px solid transparent;
border-top: 15px solid #CCFFCC;
width: 0;
height: 0;
}

12.タグ風の見出し

HTML
<div class="midashi">12.タグ風の見出し</div>
CSS
.midashi {
background: #CCFFCC;
padding: 0.5em;
line-height: 1.5;
vertical-align:middle;
border-radius: 20px 0px 0px 20px;
}
.midashi:before {
content: '●';
color: white;
margin-right: 8px;
}

13.背景がストライプの見出し

HTML
<div class="midashi">13.背景がストライプの見出し</div>
CSS
.midashi {
text-shadow: 0 0 5px white;
padding: 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
background: repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
}

14.ストライプで左線の見出し

HTML
<div class="midashi">14.ストライプで左線の見出し</div>
CSS
.midashi {
text-shadow: 0 0 5px white;
padding: 0.5em;
border-left: solid 7px green;
background: -webkit-repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
background: repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
}

15.リボン風の見出し1

HTML
<div class="midashi">15.リボン風の見出し1</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px lightgreen;
}

16.尖った見出し

HTML
<div class="midashi">16.尖った見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}

17.下線で尖った見出し

HTML
<div class="midashi">17.下線で尖った見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
border-bottom: solid 3px green;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}

18.下線で両端が尖った見出し

HTML
<div class="midashi">18.下線で両端が尖った見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
border-bottom: solid 3px green;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}
.midashi:after {
position: absolute;
content: '';
right: -3px;
top: -7px;
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;
border-bottom: solid 70px white;
z-index: -1;
}

19.背景色がグラデーションの見出し(1色)

HTML
<div class="midashi">19.背景色がグラデーションの見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to right, #CCFFCC, transparent);
background: linear-gradient(to right, #CCFFCC, transparent);
}

20.背景色が横グラデーションの見出し(2色)

HTML
<div class="midashi">20.背景色が横グラデーションの見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to right, #CCFFCC, #FFFF99);
background: linear-gradient(to right, #CCFFCC, #FFFF99);
}

21.背景色が縦グラデーションの見出し(2色)

HTML
<div class="midashi">21.背景色が縦グラデーションの見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to top, #FFFF99, #CCFFCC); 
background: linear-gradient(to top, #FFFF99, #CCFFCC);
}

22.ボックスの見出し

HTML
<div class="midashi">22.ボックスの見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
background: #CCFFCC;
}
.midashi:before {
content: " ";
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
width: calc(100%);
height: 0;
border: solid 8px transparent;
border-bottom-color: #90EE90;
}

23.左線と下線の見出し

HTML
<div class="midashi">23.左線と下線の見出し</div>
CSS
.midashi {
padding: 0.5em;
background: #CCFFCC;
border-left: solid 5px green;
border-bottom: solid 1px green;
}

24.上下に線の見出し

HTML
<div class="midashi">24.上下に線の見出し</div>
CSS
.midashi {
background: #CCFFCC;
padding: 0.5em;
border-top: solid 3px green;
border-bottom: solid 3px green;
}

25.リボン風の見出し2

HTML
<div class="midashi">25.リボン風の見出し2</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before,
.midashi::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
.midashi::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: lightgreen;
}
.midashi::after {
right: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-top-color: lightgreen;
}

26.リボン風の見出し3

HTML
<div class="midashi">26.リボン風の見出し3</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before,
.midashi::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
.midashi::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: lightgreen;
}
.midashi::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: lightgreen;
}

27.上線と背景グラデーションの見出し

HTML
<div class="midashi">27.上線と背景グラデーションの見出し</div>
CSS
.midashi {
padding: 0.5em;
border-top: solid 3px green;
background: -webkit-linear-gradient(top, #fff 0%, #CCFFCC 100%);
background: linear-gradient(to bottom, #fff 0%, #CCFFCC 100%);
box-shadow: -1px -1px 1px lightgreen inset;
}

28.背景に影の見出し

HTML
<div class="midashi">28.背景に影の見出し</div>
CSS
.midashi {
background: #CCFFCC;
padding: 0.5em;
box-shadow: 10px 10px 10px -3px  gray;
font-size:1.5em;
margin:0 0 0 1em;
}

.
3.デザインのある見出し

アイコンは「Font Awesome」を使用しています。

頭文字を装飾した見出し

HTML
<div class="midashi">頭文字を装飾した見出し</div>
CSS
.midashi:first-letter {
font-size: 1.8em;
color: green;
}

(アイコン)チェックの見出し

HTML
<div class="midashi">(アイコン)チェックの見出し</div>
CSS
.midashi {
position: relative;
padding-left: 1.2em;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: green;
}

(アイコン)丸で囲んだ見出し

HTML
<div class="midashi">(アイコン)丸で囲んだ見出し</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.3em 0 0.3em 2.5em;
color: #474747;
border-radius: 0 10px 10px 0;	
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 35px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 45px;
text-align: center;
height: 45px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 5px white; 
border-radius: 50%;
}

(アイコン)影付き丸で囲んだ見出し

HTML

 

<div class="midashi">(アイコン)影付き丸で囲んだ見出し</div>
CSS
.midashi {
position: relative;
padding: 0.2em 0 0.2em 2em;
background: #CCFFCC;
color: #474747;
border-radius: 0 10px 10px 0;
}
.midashi0:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 35px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 35px;
text-align: center;
height: 35px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 2px 2px 1px silver;
}

(アイコン)四角で囲んだ見出し

HTML
<div class="midashi">(アイコン)四角で囲んだ見出し</div>
CSS
.midashi {
position: relative;
padding: 0.2em 0 0.2em 1.5em;
background: #CCFFCC;
color: #474747;
border-radius: 0 10px 10px 0;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 30px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 30px;
text-align: center;
height: 30px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

(アイコン)考えごと風な見出し

HTML
<div class="midashi">(アイコン)考えごと風な見出し</div>
CSS
.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
margin-left: 70px;
border-radius: 15px;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f111";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 10px;
left: -50px;
bottom: 0;
color: #CCFFCC;
}
.midashi:after {
font-family: "Font Awesome 5 Free";
content: "\f111";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 20px;
left: -30px;
bottom: 0;
color: #CCFFCC;
}

先頭に大きな●の見出し

HTML
<div class="midashi">先頭に大きな●の見出し</div>
CSS
.midashi {
position: relative;
text-shadow:0 0 10px white;
}
.midashi:before {
content: "";
position: absolute;
background: yellowgreen;
width: 2em;
height: 2em;
border-radius: 50%;
top: 50%;
left: -10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

先頭に大きな●で背景ありの見出し

HTML
<div class="midashi">先頭に大きな●で背景ありの見出し</div>
CSS
.midashi {
position: relative;
padding: 0.2em;
text-shadow:0 0 10px white;
background: #CCFFCC;
z-index: -4;
border-radius: 0 10px 10px;
}
.midashi:before {
content: "";
position: absolute;
background: yellowgreen;
width: 2em;
height: 2em;
border-radius: 50%;
top: 50%;
left: -10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

ポストイット風の見出し

HTML
<div class="midashi">ポストイット風の見出し</div>
CSS
.midashi {
position:relative;
display:inline-block;
padding: 0.5em;
background-color: #CCFFCC;
border-radius: 2px;
border-left: solid 7px green;
width:50%;
}
.midashi:before {
content:  '';
background-color: #b3b3b3;
display: block;
position:absolute;
left: 51%;
height: 60%;
top: 30%;
z-index:  -1;
width: 46%;
box-shadow: 0 0 4px 8px #b3b3b3;
transform: rotate(1deg);
}

頭の文字が●の中の見出し1

HTML
<div class="midashi"><span class="midashi-point">先</span>頭の文字が●の中の見出し1</div>
CSS
.midashi {
position:relative;
padding: 0.5em;
}
.midashi-point {
background-color: green;
border-radius:100%;
padding:5px;
color: #fff;
margin-right:2px;
}

頭の文字が●の中の見出し2

HTML
<div class="midashi"><span class="midashi-point">先</span>頭の文字が●の中の見出し2</div>
CSS
.midashi {
position:relative;
padding: 0.5em;
}
.midashi-point {
background-color: green;
border-radius:50%;
padding:10px;
font-size: 1.5em;
color: #fff;
margin-right:5px;
}

背景に▲の見出し

HTML
<div class="midashi">背景に▲の見出し</div>
CSS
.midashi {
position:relative;
padding:0.5em;
}
.midashi:before {
content:'';
width:0;
height:0;
border-style:solid;
border-width:20px 30px 60px 10px; 
border-color:transparent transparent #CCFFCC transparent;
position:absolute;
z-index:-1;
transform: rotate(60deg);
top:-20px;
left:30px;
}

上に文字上に文字の見出し

HTML
<div class="midashi"><span>上に文字</span>上に文字の見出し</div>
CSS
.midashi{
padding:0.5em;
}
.midashi span {
display:block;
margin-bottom:0.2em;
color:#aaa;
font-size:0.7em;
}

.
4.タブ付きの見出し
背景色の見出し

HTML
<div class="midashi">背景色の見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
background: #CCFFCC;
line-height: 1.4;
border-radius: 0 5px 5px 
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f00c チェック';
font-weight: 900;
background: green;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}

囲んだ見出し

HTML
<div class="midashi">囲んだ見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em;
line-height: 1.4;
border: solid 3px green;	
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f0eb  ポイント';
font-weight: 900;
background: green;
color: #fff;
left: -2px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}

上下に線の見出し

HTML
<div class="midashi">上下に線の見出し</div>
CSS
.midashi {
position: relative;
padding: 0.5em 0;
border-top: solid green 3px;
border-bottom: solid green 3px;
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f007  コメント';
font-weight: 900;
background: green;
color: #fff;
left: -2px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}