見出し

2021.12.27

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

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

下線をつけた見出し

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

見え方サンプル

左に線をつけた見出し

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

見え方サンプル

最初の文字を変えた見出し

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

見え方サンプル

文字の前にアイコンを入れた見出し

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

見え方サンプル

関連記事

  • 2021.12.27

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

  • 2022.02.09

    テキストリンクのアレンジまとめ

  • 2022.01.20

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

  • 2022.01.13

    シンプルなリストのアイデアまとめ

KEY WORD

×