見出しのタイトルデザインをHTMLとCSSのみで表現する参考事例まとめ

見出しタイトルのデザインに画像等を使用せずに、CSSのみでタイトルデザイン出来る参考事例をまとめてみました。

なるべく簡単なものから順に紹介していますが、似ているタイトルデザインもあるかも知れませんのでご了承ください。

見出しタイトルのWEBデザインをCSSのみで使える小技・テクニック

見出しデザインを実際に、ブラウザ表示部分とタグコードを記載しています。ブラウザ表示で確認しながらコードで書き方を見比べる事が出来ます。

見出し１．フォントサイズ

まずは簡単にH1タグにフォントサイズだけをまず指定しました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

ここではフォントサイズを大きくしただけですが、H1タグに対してスタイルシートで、「font-size:20px;」に指定したことで、ブラウザでの表示が大きくなりました。

見出し2．枠（ボーダー）上下左右4線

見出しタイトルの上下左右をボーダーで囲みました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

H1タグの文字の周りに枠線を囲ってみました。H1タグに、枠線の太さ・種類・色を「border: 1px soli #4682b4;」で指定して、文字と枠線の間に隙間（スペース）を「padding: .25em .5em;」で指定してます。

見出し3．直線の下線のみ

見出しタイトルに下線を一本だけ引いてみました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

H1タグの文字に一本の下線を引いてます。下線の設定で、太さ・種類・色を「border-bottom: 1px soli #4682b4;」で指定して、文字と下線の間に隙間（スペース）を「padding: .25em .5em;」で指定してます。

線の種類には直線だけでなく、他にもいくつかありますのでご覧ください。

　　線の種類　　設定
1.　直線　　　　solid
2.　二重線　　　double
3.　点線　　　　dotted
4.　破線　　　　dashed
5.　線なし　　　none

CSS（スタイルシート）で線の種類を設定するときは「border-bottom」の線の種類を指定することで設定できます。

見出し4．直線の下線のみ

見出しタイトルに下線の二重線を引いてみました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

H1タグの文字に二重下線を引いてます。二重下線の設定で、太さ・種類・色を「border-bottom: double #4682b4;」で指定して、文字と下線の間に隙間（スペース）を「padding: .25em .5em;」で指定してます。

見出し5．点線の下線

見出しタイトルに下線の点線を引いてみました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

H1タグの文字に点線を引いてます。点線の設定で、太さ・種類・色を「border-bottom: 2px dotted #4682b4;」で指定して、文字と下線の間に隙間（スペース）を「padding: .25em .5em;」で指定してます。

見出し6．破線の下線

見出しタイトルに下線の破線を引いてみました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード

H1タグの文字に破線を引いてます。破線の設定で、太さ・種類・色を「border-bottom: 2px dashed #4682b4;」で指定して、文字と下線の間に隙間（スペース）を「padding: .25em .5em;」で指定してます。

見出し7．二重下線の線種別組み合わせ

見出しタイトルに下線の二重線を引いて、線を違う太さに指定してみました。

■ブラウザ表示

見出しのデザイン -Title Design-

■ソースコード