【初心者】CSSのコピペだけで実装できる見出しデザイン例4つ

見出し

✐ 2019/10/09

⟳ 2020/05/06

今日は私がこのテーマのために作った見出しのデザインを４つご紹介します。

見出しは<h1>タグとか<h2>タグなどと呼ばれ、webページ内の目次のような役割があります。

読者にとって文章を読みやすくするだけでなく、検索エンジンにページの情報をわかりやすく伝えるSEOの面でも重要です

今日ご紹介する４つの見出しは、６年間続けたアメブロでは見出しをまったく使わなかった私が、当ブログテーマ（wordPress）のために作ったものです。

参考にした記事はサルワカさんの「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」です。

サルワカ「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」 — CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

見出しをカスタマイズしたい方や一からデザインを考えている方のお役に立てたらうれしいです！

【h2】タグのデザイン
- 【h3】タグのデザイン
  - 【h4】タグのデザイン
    - 【h5】タグのデザイン
終わりに

【h2】タグのデザイン

「左に線＋背景色＋下線」で立体感のあるバーのデザインです。サルワカさんの記事に使われている見出しがとても見やすいので教科書にさせて頂きました。

左の線をタイトル下のナビゲーションバーと同じ「深い青色」にして、全体のまとまりを意識しました。文字を強調できる、優秀な見出しだと思ってます。

h2 {
    margin: 20px 0 30px 0;
    padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
    color: #4B4C4C;  /*文字色 濃いグレー*/
    background: #f4f4f4; /*背景色*/
    border-left: solid 5px #3F3C7C; /*左線*/
    border-bottom: solid 3px #d7d7d7; /*下線*/
    font-size: 20px;
    font-weight: bold;
  }

【h3】タグのデザイン

シンプルで色の切り替えがオシャレなこちらの<h3>タグは、ぜひ使いたいナンバーワン候補でした。

当初は<h2>タグにしたかったのですが、実際に使ってみると視覚的にちょっと弱く感じたので<h3>タグに設定しました。

h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 18px;
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA; /*pink*/
    bottom: -3px;
    width: 30%;
  }

【h4】タグのデザイン

ひとつくらい他のタグとちがった印象にしてみようと思い、シェブロンマーク（V字型）を取り入れてみました。

ちょっと小さくて地味かな…作り直すかもしれません！

h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 17px;
    color: #3F3C7C;　/*文字色ブルー*/
  }

h4:before { 
    font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

【h5】タグのデザイン

「吹き出し風」の個性的なデザインが気に入って採用しました。記事内で<h5>タグの出番が少なくて残念。なので、記事の下に表示される「関連記事」のタイトル枠にもこのデザインを採用しました。キミドリ色がポップでなかなか気に入っています。

コードは擬似要素が入っていて苦戦しましたが、早く使いたくてウズウズしていたのを覚えています。

h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色へ変更*/
    border-radius: 15px;
    font-size: 15px; /*fontをpより小さく*/
  }

  .h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

h1タグはどこに使う？
当サイトのh１タグは、
　①各記事ページ・・・タイトルに一回だけ使用
　②トップページ・・・記事カードの各タイトルに使用