ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

【CSS初心者向け】コピペするだけで見栄えが良くなる見出しデザイン10選!

| カテゴリー : HTML/CSS

こんにちは!やましたです。

今回はブログでよく見かける10の見出しデザインを紹介します。
簡単に実装できるので、ぜひ使ってみてください。

HTMLは次のようなものを使っています。

spanは必要ない場合もあるので適宜書き換えてください。

下線付き

単純にborder-bottomで下線を引いているだけですが、シンプルで使い勝手の良い見出しデザインです。

角丸+背景付き

border-radiusで角丸を実現しています。border-radiusの値を大きくすることでもっと角が丸くなります。

下線(点線)+文字色

見出しに加えた下線を破線にして文字色と異なる配色にしています。
ボーダーの種類もdotted(点線)、double(二重線)など色々ありますので試してみてください。

左側にボーダー + 下線

ブログなどでよく見るパターンですね。下線を削除して左ボーダーのみの見出しもよく見ます。

吹き出し風

下の三角形の部分をafterを使って再現しました。borderの太さを変えることで三角形の形を微調整することができます。

下線 + 最初の1文字だけ大きく

見出しの先頭文字だけ大きくする手法をドロップキャップといいます。

最初の1文字目だけ大きくしたいときは疑似要素であるfirst-letterを使います。

上記のCSSでは、先頭の文字が1.5emのサイズになります。

2色組み合わせた下線

最近よく見る、下線を2色で配色するパターンです。

カラーの組み合わせや、線の幅を変えることバリエーションが楽しめそうです!

枠の上にサブタイトルを表示する

こちらもよく見るパターンですね!

サブタイトルの位置を調整するのが、枠で囲った感じを出すコツです。

ラインマーカー風

グラデーションを利用してラインマーカーのような見た目を表現しています。

始点を透明(transparent)に70%の位置で、終わりは#E6E6FAを50%でグラデーションを表しました。

タグ風

span要素をうまく使ってタグのように見せる見出しデザインです。複数行のときは見た目が崩れるので要注意です。

まとめ

今回は実用性が高く、CSSだけで実装できるものを10パターン紹介しました。

デザインを変えたいと思った時はコードに少し手を加えるだけなので、扱いやすいものばかりです。
制作の参考になれば嬉しいです。

以上、CSSにコピペするだけで使える見出しデザイン10選でした。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。