【コピペで使える】CSSの見出し（タイトル）

Toshi

記事をより見やすくしたいですよね？今回は、CSSで見出しを整えてみましょうといった内容です！見出しを整えることで、ユーザー（読者）が記事を読みやすくなります。コピペで使えるサンプルコードもあるのでぜひ使用してみてください！

今回解説していく内容は以下です！

本記事の内容

・CSSで見出し装飾
・コピペで使える見出し

CSSで見出し装飾
コピペで使える見出し
1. 見出しは border
2. 見出し一覧
まとめ

CSSで見出し装飾

CSSで見出し装飾するメリットとしては

記事が見やすく、わかりやすくなるということです！

ただ文字を大きくする

これだけじゃちょっと見出しとして弱いですよね。。見出しでも記事の印象がかわるのでできるだけ、自分の好きなデザインというよりはみやすさを重視しましょう！

コピペで使える見出し

ここからは実際にコピペで使える見出しを紹介していきます！

See the Pen
コピペで使えるCSS見出し by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

「CodePen」で一覧化していますが使いたいものがあれば「見出し一覧」からコードを引っ張ってきましょう！と、その前に見出しが 基本的には border で作られていることを知っておく必要がありそうですね！

見出しは border

見出しはborderでできています！どういうことなのでしょうか？

綺麗なみだし

.title{
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

border-right:
border-bottom:
border-left:
border-top:

border

説明するとborder-top:,border-left:,border-bottom:,border-right:,でどこに線を引くか決めます。この時全部に線を引きたい場合はboder:で指定します。次に線の大きさを決めるため、solidかdoubleを指定してあげます。solidかdoubleは線が1本か２本かということを決めてあげます。さらにpxを指定し、最後に色を指定します。

border: double 5px #FF8C00;

Toshi

要はこの線を引く技と背景色等を変えて見出しは作られているってことです！

見出し一覧

綺麗な見出し

.sample0{
border-bottom:solid 3px #CFD1FC;
position: relative;
width: 40%;
}
.sample0:after {
position: absolute;
content: "";
display: block;
border-bottom: solid 3px #00AEFF;
bottom: -3px;
width: 40%;
}

綺麗な見出し

.sample1{
width:50%;
position: relative;
padding: 0.25em 0;
}
.sample1:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(0,225,95), transparent);
background: -webkit-linear-gradient(to right, rgb(0,225,95), transparent);
background: linear-gradient(to right, rgb(0,225,95), transparent);
}

綺麗な見出し

.sample2{
width:50%;
position: relative;
padding: 0.5em;
background: #9CE8EF;
}
.sample2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #C0C0C0;
}

綺麗な見出し

.sample3{
background: linear-gradient(transparent 40%, #D8D9E2 40%);
}

綺麗な見出し

.sample4{
border-bottom: double 5px #FFC778;
}

綺麗な見出し

.sample5{
color: #000000;
padding: 0.5em 0;
border-top: solid 3px #364e96;
border-bottom: solid 3px #364e96;
}

綺麗な見出し

.sample6{
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e0edff;
}

綺麗な見出し

.sample7{
width:50%;
padding: 0.4em 0.5em;
color: #494949;
border-left: solid 5px #7db4e6;
border-bottom: solid 2px #d7d7d7;
}

綺麗な見出し

.sample8{
position: relative;
padding-left: 1.3em;
line-height: 1.4;
}
.sample8:before{ font-family: FontAwesome;
content: "\f075";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: green; 
transform: scale(-1, 1);
}

綺麗な見出し

.sample9{
padding: 10px;
font-size:20px;
background: #F0F0F0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) inset;
}

綺麗な見出し

.sample10{
position: relative;
padding-left: 30px;
font-size:20px;
color: #000000;
}
.sample10::before,
.sample10::after{
content: "△▽";
position: absolute;
}
.sample10::before{
left:-10px;
top:-3px;
}
.sample10::after{
left: -7px;
top: 3px;
color: #00c0ce;
}

綺麗な見出し

.sample11{
width:80%;
padding:20px 10px;
border:1px solid green;
-webkitborder-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
-moz-border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
}