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

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

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

 本記事の内容

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


スポンサーリンク

CSSで見出し装飾

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

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

コピペで使える見出し

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

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

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

見出しは border 

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

綺麗なみだし

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

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

見出し一覧

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

綺麗な見出し

まとめ

Toshi
Toshi

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

コメント