見出しデザインのサンプル集【CSSコピペで簡単です。】

見出しデザインのサンプルを紹介します。色はもちろん、大きさ・幅などを調整し、自分好みにカスタマイズすると良いかもです。

広告

見出しデザインのサンプル集【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}
広告