ホームページ制作に役立つ見出しをまとめています。
紹介したい見出しができたら随時掲載していきます。
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; }