見出しデザインの雛形を自分なりに作ってみました。シンプルなHTMLタグで簡単に装飾することをテーマに作成していますので、複雑なデザインではありませんが、色やサイズなどをご自分のサイトのデザインに合わせて自由にカスタマイズしてご使用いただければと思います。
このCSSを使用するにあたって、特に制限を設けませんが、何かしらの損害が発生したいかなる場合も当サイトは一切責任は負いませんので、そのことをご理解の上ご使用ください。
見出しデザイン一覧
各見出しの表示サンプルとHTML、CSSを掲載しています。HTMLに記載しているclassはCSS側と合わせていただければ、変更しても問題ありません。サイズや色などを自由にカスタマイズしてご使用ください。一応Chrome・Firefox・Safari・Edge・IEの各最新版の表示は確認しています。旧IEは確認していませんのでご了承ください。
アンダーラインの見出しデザイン
カラフルアンダーラインの見出しデザイン
丸アイコンの見出しデザイン
丸アイコン2個並びの見出しデザイン
四角アイコンの見出しデザイン
四角アイコン横並びの見出しデザイン
四角アイコン縦並びの見出しデザイン
四角アイコン4個並びの見出しデザイン
ひし形アイコンの見出しデザイン
ひし形アイコン横並びの見出しデザイン
まとめ
シンプルに装飾できる見出しデザインなので、カスタマイズしていろいろな場面で使っていただければと思います。もし気に入っていただければコメント欄にそっと使ったサイトの情報をコメントしていただければ、管理人が喜びます。