2019/10/27HTMLとCSSのみで簡単に作れる比較的シンプルな見出しデザインを20例紹介します。コピペで使用する場合はフォントサイズによってマークの位置等がズレてしまいますのでCSSを調整して下さい。(アンダーライン)タイトルの下にボーダーを引いたシンプルな見出しデザインです。(二重線)タイトルの下に二重線ボーダーを引いた見出しデザインです。縦幅やボーダーラインのサイズ・カラーも変更することができます。(2トーンカラー)タイトルの下にツートーンパターンの下ボーダーを引いた見出しデザインです。widthを変更することでツートンの比率を変えることができます。(マーカー)タイトルの下にマーカー(蛍光ペン)で下ボーダーを引いたような見出しデザインです。(縦ライン)タイトルの先頭に縦ラインを入れた見出しデザインです。縦ラインはwidthbackground-colorでラインの太さや色をカスタマイズできます。(縦ライン×下線)5の見出しデザインに下ボーダーを加えたパターンです。(縦ライン×枠線)タイトルの先頭に縦ラインを入れ、さらに枠線(角丸)を加えた見出しデザイン。(縦ライン×背景色)7の見出しデザインに背景色を付けたパターンです。(横ライン)タイトルの先頭に横ラインを入れた見出しデザインです。横ラインはheightbackground-colorでラインの太さや色をカスタマイズできます。(横ライン×背景色)9の見出しデザインに背景色を付けたパターンです。(サークル)タイトルの先頭にサークルマークを入れた見出しデザインです。サークルはborderでラインの太さや色をカスタマイズできます。(サークル×枠線)タイトルの先頭にサークルマークを入れ、さらに枠線(角丸)を加えた見出しデザイン。(サークル×背景色)12の見出しデザインに背景色を付けたパターンです。(ドッド×背景色)タイトルの先頭にドッドマークを入れ背景色を付けた見出しデザインです。ドッドはwidthheightbackground-colorでドッドの大きさや色をカスタマイズできます。white;border-radius:100%;}15中央寄せ(ライン)タイトルを中央に寄せ左右にラインを配置した見出しデザインです。100%;}16中央寄せ(角括弧)タイトルを中央に寄せ左右に角括弧を配置した見出しデザインです。none;}17中央寄せ(下向き線)タイトルを中央に寄せ下ボーダーに吹き出しのような下向き線を付けた見出しデザインです。white;}18グラデーション(背景その1)12の見出しデザインにグラデーションで背景に立体感を付けたパターンです。#446689;border-radius:100%;}19グラデーション(背景その2)フラットデザインが主流になる前に良く見られた光沢感のある見出しデザインです。rgba(0,0,0,1);}20グラデーション(背景その3)19の見出しデザインと同様に立体感のあるパターンです。