見出しデザインのサンプルを紹介します。色はもちろん、大きさ・幅などを調整し、自分好みにカスタマイズすると良いかもです。
見出しデザインのサンプル集【CSSコピペで簡単です。】
見出しデザインのサンプルを複数用意しました。CSSはコピーできるようにしているので簡単に再現できます。
気に入ったものがあれば、ぜひご利用ください。
1.下線①
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 5px solid #4865b2
}
2.下線②
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 10px double #4865b2
}
3.下線③
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 12px groove #4865b2
}
4.下線④
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 12px ridge #4865b2
}
5.下線⑤
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 5px dashed #4865b2
}
6.下線⑥
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: 7px dotted #4865b2
}
7.下線⑦
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
border-bottom: solid 3px #cce4ff;
position: relative
}
.midashi:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #4865b2;
bottom: -3px;
width: 20%;
}
8.下線⑧
見出しデザイン
CSSコード
.midashi {
position: relative
}
.midashi:after {
margin-top: .5em;
content: "";
display: block;
height: 4px;
background: linear-gradient(to right, #4865b2, transparent)
}
9.下線⑨
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .25em 0
}
.midashi:after {
margin-top: .5em;
content: "";
display: block;
height: 4px;
background: linear-gradient(to right, #4865b2, #efff00)
}
10.下線⑩
見出しデザイン
CSSコード
.midashi {
position: relative;
display: inline-block;
margin-bottom: 1em;
padding: .5em .5em
}
.midashi:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 40%;
height: 5px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #4865b2;
border-radius: 1px
}
11.上下線①
見出しデザイン
CSSコード
.midashi {
padding: .5em .5em;
border-top: solid 3px #4865b2;
border-bottom: solid 3px #364e96
}
12.上下線②
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 0;
border-top: solid 3px #4865b2;
border-bottom: solid 3px #4865b2;
text-align: center;
}
13.上下線③
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: 1em 0
}
.midashi:after, .midashi:before {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box
}
.midashi:before {
top: 0;
height: 8px;
border-top: 3px solid #4865b2;
border-bottom: 1px solid #4865b2
}
.midashi:after {
bottom: 0;
height: 8px;
border-top: 1px solid #4865b2;
border-bottom: 3px solid #4865b2
}
14.囲い線①
見出しデザイン
CSSコード
.midashi {
border: solid 3px #4865b2;
padding: .5em
}
15.囲い線②
見出しデザイン
CSSコード
.midashi {
border: solid 3px #4865b2;
padding: .5em;
border-radius: .5em
}
16.囲い線③
見出しデザイン
CSSコード
.midashi {
padding: 10px;
border: 3px solid #4865b2;
border-radius: 20px 20px 80px 30px/30px 40px 10px 10px
}
17.囲い線④
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 1em;
border-top: solid 2px #4865b2;
border-bottom: solid 2px #4865b2;
text-align: center;
}
.midashi:after, .midashi:before {
content: '';
position: absolute;
top: -15px;
width: 2px;
height: calc(100% + 30px);
background-color: #4865b2
}
.midashi:before {
left: 15px
}
.midashi:after {
right: 15px
}
18.左側に横線
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 1.4em
}
.midashi:after {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: '';
width: 20px;
height: 4px;
background-color: #4865b2
}
19.左側に縦線
見出しデザイン
CSSコード
.midashi {
padding: .5em .5em;
background: transparent;
border-left: solid 10px #4865b2
}
20.両側に横線
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
background: transparent;
border-left: solid 10px #4865b2;
border-right: solid 10px #4865b2;
text-align: center
}
21.左側に二重縦線①
見出しデザイン
CSSコード
.midashi {
border-left: 10px double #4865b2;
padding: .5em 1.4em
}
22.左側に二重縦線②
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 0 .5em 1.4em;
border-left: solid 10px #4865b2
}
.midashi:before {
position: absolute;
content: '';
top: calc(50% - 18px);
left: 8px;
border-bottom: solid 36px #4865b2;
border-right: solid 8px #4865b2
}
23.左側に三重縦線
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: 0.5em .5em .5em 2em;
border-left: solid 8px #4865b2
}
.midashi:before {
bottom: 0;
left: 5px;
border-bottom: solid 35px #4865b2
}
.midashi:after, .midashi:before {
position: absolute;
content: '';
border-right: solid 8px #4865b2
}
.midashi:after {
bottom: 0;
left: 18px;
border-bottom: solid 27px #4865b2
}
24.左側に縦線+背景色
見出しデザイン
CSSコード
.midashi {
padding: .5em;
background: #f7f7f7;
border-left: solid 10px #4865b2
}
25.両側に縦線+背景色
見出しデザイン
CSSコード
.midashi {
padding: .5em;
background: #f7f7f7;
border-left: solid 10px #4865b2;
border-right: solid 10px #4865b2
}
26.下線+背景色
見出しデザイン
CSSコード
.midashi {
padding: .5em;
background: #f7f7f7;
border-bottom: solid 3px #4865b2
}
27.吹き出し①
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em;
color: #f7f7f7;
background: #4865b2
}
.midashi:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #4865b2;
width: 0;
height: 0
}
28.吹き出し②
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em;
background: #4865b2;
color: #f7f7f7
}
.midashi:after {
position: absolute;
content: '';
top: 100%;
border: 15px solid transparent;
border-top: 15px solid #4865b2;
width: 0;
height: 0;
left: calc((100%/2) - 15px);
}
29.角折れ①
見出しデザイン
CSSコード
.midashi {
position: relative;
color: #f7f7f7;
background: #4865b2;
padding: .5em .5em
}
.midashi:after {
position: absolute;
content: '';
left: 0;
top: 0;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #959e9b;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15)
}
30.角折れ②
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em;
background-color: #4865b2;
color: #f7f7f7
}
.midashi:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 0;
border-width: 0 1pc 1pc 0;
border-style: solid;
border-color: #959e9b #fff #959e9b #ddd;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .1)
}
31.角折れ③
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em;
background: #4865b2;
color: #f7f7f7
}
.midashi:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: 0;
border-bottom: solid 15px transparent;
border-right: solid 20px #959e9b
}
32.角カット
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em;
background: #4865b2;
color: #f7f7f7
}
.midashi:before {
position: absolute;
content: '';
top: 0;
left: 0;
border-top: solid 10px #fff;
border-right: solid 15px transparent
}
.midashi:after {
position: absolute;
content: '';
bottom: 0;
left: 0;
border: 0;
border-bottom: solid 10px #fff;
border-right: solid 15px transparent
}
33.左側に縦線+▲
見出しデザイン
CSSコード
.midashi {
position: relative;
background: #f7f7f7;
padding: .5em 1.5em;
border-left: 8px solid #4865b2
}
.midashi:after {
position: absolute;
content: '';
top: calc(50% - 20px);
left: 4px;
border: 20px solid transparent;
border-left: 10px solid #4865b2
}
34.両側を斜めカット①
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 1.0em;
background-color: #4865b2;
color: #f7f7f7
}
.midashi:before {
position: absolute;
content: '';
top: 0;
left: 0;
border-top: solid 90px white;
border-right: solid 14px transparent
}
.midashi:after {
position: absolute;
content: '';
bottom: 0;
right: 0;
border-bottom: solid 90px white;
border-left: solid 14px transparent
}
35.両側を斜めカット②
見出しデザイン
CSSコード
.midashi {
position: relative;
padding: .5em 1.0em;
background-color: #4865b2;
color: #f7f7f7
}
.midashi:before {
position: absolute;
content: '';
top: 0;
left: 0;
border-bottom: solid 90px white;
border-right: solid 14px transparent
}
.midashi:after {
position: absolute;
content: '';
top: 0;
right: 0;
border-top: solid 90px white;
border-left: solid 14px transparent
}
36.グラデーション①
見出しデザイン
CSSコード
.midashi {
padding: .5em 0;
color: #f7f7f7;
background: linear-gradient(transparent 10%, #4865b2 100%)
}
37.グラデーション②
見出しデザイン
CSSコード
.midashi {
padding: .5em .5em;
background: linear-gradient(to right, #4865b2, transparent);
color: #f7f7f7
}
38.両側に横線①
見出しデザイン
CSSコード
.midashi {
position: relative;
display: inline-block;
padding: .5em 55px;
width: 100%;
text-align: center;
}
.midashi:after, .midashi:before {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 3px;
background-color: #4865b2
}
.midashi:before {
left: 0
}
.midashi:after {
right: 0
}
39.両側に横線②
見出しデザイン
CSSコード
.midashi {
position: relative;
display: inline-block;
padding: .5em 55px;
width: 100%;
text-align: center;
}
.midashi:after, .midashi:before {
content: '';
position: absolute;
top: 40%;
display: inline-block;
width: 45px;
height: .5em;
border-top: solid 1px #4865b2;
border-bottom: solid 1px #4865b2
}
.midashi:before {
left: 0
}
.midashi:after {
right: 0
}
40.カッコ①
見出しデザイン
CSSコード
.midashi {
position: relative;
line-height: 1.4;
padding: .5em 1em;
display: inline-block;
width: 100%;
text-align: center;
}
.midashi:after, .midashi:before {
content: '';
width: 20px;
height: 30px;
position: absolute;
display: inline-block
}
.midashi:before {
border-left: solid 3px #4865b2;
border-top: solid 3px #4865b2;
top: 0;
left: 0
}
.midashi:after {
border-right: solid 3px #4865b2;
border-bottom: solid 3px #4865b2;
bottom: 0;
right: 0
}
41.カッコ②
見出しデザイン
CSSコード
.midashi {
position: relative;
line-height: 1.4;
padding: .5em 1em;
display: inline-block;
top: 0;
width: 100%;
text-align: center;
}
.midashi:after, .midashi:before {
position: absolute;
top: 0;
content: '';
width: 8px;
height: 100%;
display: inline-block
}
.midashi:before {
border-left: solid 3px #4865b2;
left: 0
}
.midashi:after, .midashi:before {
border-top: solid 3px #4865b2;
border-bottom: solid 3px #4865b2
}
.midashi:after {
content: '';
border-right: solid 3px #4865b2;
right: 0
}
42.1文字目強調①
見出しデザイン
CSSコード
.midashi:first-letter {
font-size: 2em;
color: #4865b2
}
43.1文字目強調②
見出しデザイン
CSSコード
.midashi {
padding: .5em 0
}
.midashi:first-letter {
font-size: 2em;
padding-bottom: 5px;
border-bottom: 3px solid;
color: #4865b2
}