ブログWeb制作

2019/4/9

CSSのみで作る見出しデザイン

画像は使用せずにHTMLとCSSのみで作る見出しデザインを紹介します。
コピーで使用する場合はフォントサイズによって位置がズレる事がありますので、CSSで調整をしてください。

見出しデザインとCSSソースコード

下線デザイン1(下線)

タイトルの下にボーダーを引いたシンプルな見出しデザインです。

SAMPLE

見出しデザイン

下線デザイン2(破線)

タイトルの下に破線(点線)を引いたシンプルな見出しデザインです。

SAMPLE

見出しデザイン

下線デザイン3(2本線)

タイトルの下に2本線を引いたシンプルな見出しデザインです。

SAMPLE

見出しデザイン

下線デザイン4(マーカー)

タイトルの下にマーカー(蛍光ペン)を引いたような見出しデザインです。

SAMPLE

見出しデザイン

横線デザイン1(縦ライン)

タイトルの先頭に縦ラインを入れた見出しデザインです。

SAMPLE

見出しデザイン

横線デザイン2(縦ライン+下線)

タイトルの先頭に縦ラインと下線を入れた見出しデザインです。

SAMPLE

見出しデザイン

枠線デザイン1(枠線)

枠線(角丸)を入れた見出しデザインです。

SAMPLE

見出しデザイン

枠線デザイン2(枠線)

枠線(角丸)を入れた見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン1

タイトル全体に背景色(角丸)を入れた見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン2(背景色+下線)

タイトル全体に背景色+下線を入れた見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン3(背景色+縦ライン)

タイトル全体に背景色+縦ラインを入れた見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン4(ステッチ風)

タイトル全体に背景色+破線を入れたステッチ風の見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン5(ストライプ)

タイトル全体にストライプを入れた見出しデザインです。

SAMPLE

見出しデザイン

背景色デザイン6(吹き出し)

タイトル全体に吹き出しを入れた見出しデザインです。

SAMPLE

見出しデザイン

マークデザイン1(サークル)

タイトル先頭にサークルマークを入れた見出しデザインです。

SAMPLE

見出しデザイン

マークデザイン2(サークル+下線)

タイトル先頭にサークルマーク+下線を入れた見出しデザインです。

SAMPLE

見出しデザイン

マークデザイン3(サークル+枠線)

タイトル先頭にサークルマーク+枠線を入れた見出しデザインです。

SAMPLE

見出しデザイン

マークデザイン4(サークル+背景色)

タイトル先頭にサークルマーク+枠線を入れた見出しデザインです。

SAMPLE

見出しデザイン

中央寄せ1(ライン)

タイトルを中央に寄せ左右にラインを入れた見出しデザインです。

SAMPLE

見出しデザイン

中央寄せ2(下線)

タイトルを中央に寄せ下線を入れた見出しデザインです。

SAMPLE

見出しデザイン

PAGE TOP