今回は見出し・ヘッダー(h1〜h6タグ)の洗練されたおしゃれなデザインサンプルを紹介します。h3タグベースに、CSSのソースコードはコピペで利用できるように整理してますので、ご自由にご利用ください!
最もポピュラーでありながら、デザイン性の良さから様々なサイトで活用されています!他サイトと同じパターンが多く、見出しであることがひと目で分かるので、ユーザビリティ向上にも一役買ってくれるでしょう(。・ω・。)
1文字目を強調し、シンプルにヘッダーであることをアピールしてます!ヘッダーを強調しすぎたくないけど、ヘッダーであることはわかってほしい・・・といった時に活躍してくれるヘッダーデザインです(。・ω・。)
こちらは一風変わったデザインです!幾何学的なデザインで、シンプルながらおしゃれな演出をしています(。・ω・。)
日本ではメジャーなカギ括弧(「」」でデザインしたヘッダです!こちらもわかりやすくて良いです(。・ω・。) ただ、日本以外では逆に伝わりにくいかもしれないので、注意しましょう!あと、本文にカギ括弧(「」)をよく使う方も、意味が重ならないようにするために要注意です!
メジャーなデザインに戻ってきました!上下ボーダー、こちらも色々なサイトで使われています!シンプルですが、こちらもヘッダーとしてはわかりやすいので人気が高いです(。・ω・。)
先程と同じく上下ボーダーですが、今度は二重線にしてます!また、二重線の2つの線の太さも変えているので、よりおしゃれに演出できてます(。・ω・。)
最後にご紹介するのはマーク付きのヘッダー(見出し)です!マークが付くだけでもかなりおしゃれになりますね(。・ω・。)
いかがでしたでしょうか?お気に入りのものございましたら、是非コピペでご利用ください!
[Excel マクロでエクセルの行の高さを自動調整する方法