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

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

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

 本記事の内容

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


スポンサーリンク

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本か2本かということを決めてあげます。さらにpxを指定し、最後に色を指定します。

border: double 5px #FF8C00;

Toshi
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;
}

まとめ

Toshi
Toshi

いかがでしたか?詳しいコードの説明はしませんでしが、コピーしていろいろ変えてみたらわかるかと思いますぜひ、コードを参考に使って見出しを綺麗にしてみてください。

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
CSSCODE
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント