シンプルな見出しのアイデアまとめ

ブログの記事やシンプルなサイトの下層ページで使える、シンプルな見出しのアイデアをまとめてみました。
ぜひご活用ください！

下線をつけた見出し

シンプルで見出しとコンテンツの区切りもわかりやすい下線をつけた見出し。
borderの太さを変えたり、色を変えることで色々なデザインに合わせることができます。

見え方サンプル

記事のコンテンツ内の見出しなどに使いやすい左に線をつけた見出し。
borderを使うことで簡単に作ることもできますが、before / afterの擬似要素を使うことで、テキストの高さより少し短く調整することや、角丸を加える、太さが異なる2本線の指定などをすることができます。

見え方サンプル

CSSの:first-letterを指定して最初の文字にアレンジを加えた見出し。
太さや文字色、サイズの組み合わせや調整次第で様々な見せ方をすることができます。

見え方サンプル

見出しの文字の前にアイコンを入れた見出し。
google fontのマテリアルアイコンを使う場合、CSSを読み込むだけで簡単にアイコンを入れることができます。

見え方サンプル

記事がありません

シンプルなボタンのアイデアまとめ