メニュー

ピストグループ株式会社 | 超簡単!CSSコピペで実装できる基本的な見出しデザイン10選!
ウェブページの見出しタイトルをhtml,CSSを利用してオシャレに実装する事例をご紹介します。
22670
single,single-post,postid-22670,single-format-standard,ajax_updown_fade,page_not_loaded,,select-theme-ver-2.2,wpb-js-composer js-comp-ver-4.5.2,vc_responsive

超簡単!CSSコピペで実装できる基本的な見出しデザイン10選!


本記事で学べる内容

CSSのことが分からない方も簡単に見出しを作れる

シンプルな見出しデザインを参考に出来る

見出しはサイト全体のイメージを左右する大切な要素の一つ。ウェブデザインを始めて間もないCSSがあまり扱えない方にとっては一番最初にぶち当たる壁なのではないでしょうか?

今回は、そんな方でも安心の、CSSをコピペするだけで実装できるシンプルな見出しを10種類ほどご紹介したいと思います。

ご紹介する簡単CSSを参考に、あなたの思い通りの見出しデザインを作ってみてくださいね。

目次

1.コピペで簡単!見出しCSS10選

・1-1.見出し下線ボーダー

・1-2.見出しの上下にボーダー

・1-3.見出し左にボーダー

・1-4.見出しを線で囲む

・1-5.見出し背景

・1-6.背景色と下線ボーダー

・1-7.見出しを囲む、手書き風ボーダー

・1-8.見出しにボックスシャドウをかける

・1-9.紙を切り取ったような囲み線デザイン

・1-10.グラデーションのかかった囲み線

2.まとめ

1.コピペで簡単!見出しCSS0選

コピペで実装できる簡単な見出しデザインサンプルです。最初なので比較的簡単なものをご紹介したいと思います。 ウェブデザイン初心者の方は最初コピペで使用し、慣れてきたら余白やカラーなどを調整し、デザインなどの変更をしてみてください。

1-1.見出し下線ボーダー

見出しサンプル下線ボーダー

CSS{}

h1{

padding-bottom: .5em;

border-bottom: 1px  solid #ccc;

}

シンプルな、文字の下に下線の入った見出しデザインです。

これをベースに  double  dashed  dotted  など、線の種類を変えるだけでも色々なデザインの見出しを作ることが可能です。

1-2.見出しの上下にボーダー

見出しサンプル上下ボーダー

CSS{}

h1{

padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

1-1でご紹介した、シンプルな線を上下に引いたしたものです。

これを二重線に変えたい時は、h1の要素に border-style:double と記述すると変わります。

1-3.見出し左にボーダー

見出しサンプル左ボーダー

CSS{}

h1{
padding: .25em 0 .25em .75em;
border-left: 6px solid #ccc;
}

3つめは見出しの左に線が入るパターンです。見出しの始まりを分かりやすくし、強調する効果があります。線の太さを変えたい場合は  border-left の後の記述を変えてください。

1-4.見出しを線で囲む

見出しサンプル囲み

CSS{}

h1{
padding: .5em .75em;
border: 1px solid #ccc;
}

4つめは見出しを線で囲んだものです。

これに border-radius の記述を加えると角が取れて角丸の囲み線が出来ます。

1-5.見出し背景

見出しサンプル背景色

CSS{}

h1{
padding: .5em .75em;
background-color: #f6f6f6;
}

シンプルに見出しの背景色を変えたものです。背景の色を変えたいときは、 background-color: の後の記述を自分の好みのものに変えて下さい。

1-6.背景色と下線ボーダー

見出しサンプル背景色と下線ボーダー

CSS{}

h1{
padding: .4em .4em; background-color: #f6f6f6;

border-bottom: 2px solid #ccc
}

1-1と1-5の応用で、背景を設定してその下にドロップシャドウのような下線を引いたパターンです。

1-7.見出しを囲む、手書き風ボーダー

見出しサンプル手書き風囲み線

CSS{}

h1{
padding: 0.3em; border: 3px solid #ccc; border-radius: 1em .4em 1em .4em/.4em 1em .4em 1em
}

手書き風の囲み線デザインです。border-radius の値を変えることで好みのデザインに出来ます。

1-8.見出しにボックスシャドウをかける

見出しサンプルボックスシャドウ

CSS{}

h1{
padding: .5em .75em; background-color: #f6f6f6;

box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

見出しの背景にボックスシャドウがかかる囲み線のデザインです。

影を付けることで見出しに立体感を付けることができます。

1-9.紙を切り取ったような囲み線デザイン

見出しサンプル紙を切ったようなデザイン

CSS{}

h1{
padding: .3em .75em;
background: #f4f4f4;
border-top: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}

見出しの背景にボックスシャドウがかかる囲み線のデザインです。

影を付けることで見出しに立体感を付けることができます。

1-10.グラデーションのかかった囲み線

見出しサンプルグラデーション

CSS{}

h1{
padding: .5em .75em;
background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3)
}

グラデーションのかかった囲み線の見出しデザインです。

2.まとめ

いかがだったでしょうか?

今回ご紹介した見出しのCSSは比較的簡単なものをご紹介させて頂きましたが、これを応用することで、クリエイティブな見出しを作ることも可能です。

逆にシンプルなイメージのものにしたい時などは重宝するかもしれません。

 

見出しはイメージを決める大切な要素です。

沢山の見出しデザインの引き出しを持っておくと色々便利ですので、是非参考になるものがあれば覚えておいてもらえれば幸いです。

この記事をシェアする

<li class="fa fa-male" style="vartical-align:middle;"></i> <h4>この記事を書いた人</h4>

中野ゆうた-ウェブデザイナー-
愛媛県大洲市出身のウェブデザイナー。主にPhotoshop,Illustratorを使ったデザイン制作を担当。