スライドショー

CSSだけで作れるトレンド見出しデザイン20選|2019年版

こんにちは! ライターのナナミです。

この記事にたどり着いたということは、見出しのデザインでお困りですね?ちょっとした箇所ですが、なかなか悩ましいポイントですよね。今回はそんなお悩みを解決!

CSSだけで作れる見出しデザイン案をまとめました。この記事は下記の流れで進めていきます。

  • 2019年のデザイントレンドは?
  • デザイン案20選
  • もっとデザイン案を探そう

見出しはサイトの情報発信においてかなり重要な要素です。簡単で素敵なデザインを作れるようになっちゃいましょう!

2019年のデザイントレンド

デザインにおいて大切なのは、現在の流行を捕らえられているかどうかです。せっかく作るんだったら、新しくてかっこいいサイトにしたいですしね。調べたところ、2018年はこんな感じのデザインがトレンドなようです。

head1

画像:デザインサンプル

  • シンプル
  • 写真を大きく使う
  • 動きをつける
  • 幾何学模様
  • タイポグラフィ

すっきりとスタイリッシュな雰囲気が素敵ですね。デザイントレンドについては、こちらの記事がまとめてくれています。
https://ferret-plus.com/8641

これを踏まえて、おすすめ見出しデザインを紹介していきますよ!なお、以降の紹介では擬似要素とpositionを使う場面がいっぱいあります。もしもこの2つのことがよくわからなかったら、下記の記事で確認してみてくださいね。


CSSのposition:absolute;とは?要素を思いのままに配置する方法
更新日 : 2019年7月31日

シンプル系

まずはどんなサイトにも合わせやすい、シンプルなデザイン案をご紹介します。

アンダーライン

head2-1

画像:アンダーライン

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    border-bottom:  solid;  /* 線指定 */
    padding-bottom:  5px;   /* 余白指定 */
    margin-bottom: 15px;    /* 周りの余白指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}

シンプルイズベスト、アンダーラインです。本文との区切りもわかりやすくていいですね。

飾り付きアンダーライン

head2-2

画像:飾り付きアンダーライン

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    border-bottom: solid 3px;   /* 線指定 */
    padding-bottom:  5px;       /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test:before {
    content:  '';                   /* 空白の要素を作る */
    width: 50px;                    /* 幅指定 */
    height: 3px;                    /* 高さ指定 */
    background-color: #42a6ff;      /* 背景色指定 */
    display:  block;                /* ブロック要素にする */
    position:  absolute;            /* 位置調整 */
    left:  0;                       /* 位置調整 */
    bottom: -3px;                   /* 位置調整 */
}

端っこにちょっと差し色を入れてみました。シンプルながらも洒落っ気が出ますね。

二重線

head2-3

画像:二重線

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    border-bottom: solid 3px;   /* 線指定 */
    padding-bottom:  5px;       /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test:before {
    content:  '';               /* 空白の要素を作る */
    width: 100%;                /* 幅指定 */
    height: 1px;                /* 高さ指定 */
    background-color: #000;     /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    bottom: -6px;               /* 位置調整 */
}

太さの違う二重線をいれてみました。強弱がついている感じが、しっかりした雰囲気を出してくれますね。二重線については下記の記事でも色々と紹介していますので、ぜひご覧ください。

【超簡単】もう悩まない!CSSのみで二重線をつける方法
更新日 : 2019年7月30日

ちょっとだけアンダーライン

head2-4

画像:部分的アンダーライン

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    padding-bottom:  5px;   /* 余白指定 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}
.head_test:before {
    content:  '';           /* 空白の要素を作る */
    width: 50px;            /* 幅指定 */
    height: 4px;            /* 高さ指定 */
    background-color: #000; /* 背景色指定 */
    display:  block;        /* ブロック要素にする */
    position:  absolute;    /* 位置調整 */
    left:  0;               /* 位置調整 */
    bottom: -6px;           /* 位置調整 */
}

見出し全てではなく、ちょっとだけ線を入れました。このちょっとだけでも、本文との仕切りには十分ですね。

文字の横にライン

head2-5

画像:文字横にライン

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    display:  inline-block; /* インラインブロックにする */
    background-color: #fff; /* 背景色指定 */
    margin-left: 20px;      /* 周りの余白指定 */
    padding: 0 10px;        /* 余白指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}
.head_test-wrap {
    position: relative;     /* 位置調整 */
    margin-bottom:15px;     /* 周りの余白指定 */
}
.head_test-wrap:before {
    content:  '';           /* 空白の要素を作る */
    background-color: #000; /* 背景色指定 */
    display:  block;        /* ブロック要素にする */
    position:  absolute;    /* 位置調整 */
    left:  0;               /* 位置調整 */
    width:  100%;           /* 幅指定 */
    height:  1px;           /* 高さ指定 */
    top: 0;                 /* 位置調整 */
    bottom:  0;             /* 位置調整 */
    margin:  auto;          /* 位置調整 */
}

文字と線を重ねるようにして配置しました。同じ見出しが続いても、区切りをきちんとつけられそうですね。

ポップ系

シンプル系だとちょっと固すぎる…そんな時に使える、ポップでキュートな案をご紹介します。

丸を重ねる

head3-1

画像:丸のデザイン

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    padding-top: 40px;          /* 余白指定 */
    padding-left: 40px;         /* 余白指定 */
    padding-bottom: 20px;       /* 余白指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
    padding-left: 40px;         /* 余白指定 */
}
.head_test:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #ffeaac;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    height: 90px;               /* 高さ指定 */
    width: 90px;                /* 幅指定 */
    border-radius:  50%;        /* 丸くする */
    top: 0;                     /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
}

ポップさと言えば丸。文字にちょっと重ねるようにして、おしゃれにしてみました。

ポストイット風

head3-2

画像:ポストイット風

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #feeaac;  /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #b3b3b3;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 50%;                  /* 位置調整 */
    height: 60%;                /* 高さ指定 */
    top: 26%;                   /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
    width: 46%;                 /* 幅指定 */
    box-shadow: 0 0 8px 8px #b3b3b3;/* 影指定 */
    transform: rotate(3deg);    /* 回転 */
}

影を入れてちょっと質感を出して見ました。背景を方眼柄とかにしてみると、より雰囲気が出そうですね。

グラデーション

head3-3

画像:グラデーション

HTML

<h1 class="head_test">
    見出しデザインのテストです
</h1>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    background: linear-gradient(to right, rgb(48, 224, 192) 0%,rgba(96,155,208,0.7) 30%,rgba(125,185,232,0) 100%);/* グラデーション指定 */
    padding:  10px;         /* 余白指定 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    border-radius:  2px;    /* 角丸指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}

ちょっとエレガントな雰囲気ですかね?するりと色が消えていく感じが、柔らかい雰囲気を出してくれます。グラデーションの細かい設定について知りたい方は、下記の記事をどうぞ!

最初の文字を丸の中へ

head3-4

画像:頭文字を装飾

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        <span class="head_test-point">見</span>出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test-point {
    background-color: #2196F3;  /* 背景色指定 */
    border-radius:  50%;        /* 丸くする */
    padding:  10px;             /* 余白指定 */
    font-size: 40px;            /* 文字サイズ指定 */
    color: #fff;                /* 文字色指定 */
    margin-right: 5px;          /* 周りの余白指定 */
}

見出しにインパクトをつけつつ、可愛らしい感じにしてみました。飾りでつけたちっちゃい丸がいいアクセントになりますね。

手書き風の線

head3-5

画像:手書き風の線

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    border-bottom: solid 4px rgba(76, 175, 80, 0.6);        /* 線指定 */
    border-radius: 0px 0px 160px 180px/0px 0px 20px 4px;    /* 角丸指定 */
}
p {
    margin:  0;         /* デフォルトCSS打ち消し */
    line-height: 2;     /* 行間調整 */
}

下線は下線でも、ちょっと手書きっぽくしてみました。端っこの線がすっと抜けているので、筆でしゅっと書いたような風合いになりますね。こちらはborder-radiusで要素を変形させて、下線を引いた状態にしています。

border-radiusについてもっと詳しく知りたい方は、下記の記事をどうぞ!

CSSのborder-radiusで要素を角丸にする方法
更新日 : 2018年11月27日

スタイリッシュ系

もっとキリッと、かっこよくしたい!そんなイケてるあなたにはこちら、スタイリッシュなデザイン案です。

背景色とデザインボーダー

head4-1

画像:背景色とデザインボーダー

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 24px;            /* 文字サイズ指定 */
    background-color:  #000;    /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    padding: 10px 0 10px 30px;  /* 余白指定 */
    margin-bottom:  20px;       /* 周りの余白指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}

.head_test:before {
    content: '';                /* 空の要素を作る */
    height: 110%;               /* 高さ指定 */
    width: 3px;                 /* 幅指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 14px;                 /* 位置調整 */
    top: -3px;                  /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    background-color:  #fff;    /* 背景色指定 */
    transform: rotate(3deg);    /* 回転 */
}
.head_test:after {
    content: '';                /* 空の要素を作る */
    height: 116%;               /* 高さ指定 */
    width: 3px;                 /* 幅指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 14px;                 /* 位置調整 */
    top: -6px;                  /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    background-color:  #fff;    /* 背景色指定 */
    transform: rotate(-15deg);  /* 回転 */
}

背景色だけではちょっと物足りなかったので、斜めのボーダーを入れてみました。白背景の時にしか使えないのでご注意ください!

三角を重ねる

head4-2

画像:三角の装飾

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                     /* デフォルトCSS打ち消し */
    font-size:  24px;               /* 文字サイズ指定 */
    position:  relative;            /* 位置調整 */
    font-weight:  normal;           /* 文字の太さ調整 */
    margin-bottom: 15px;            /* 周りの余白指定 */
    padding-top: 50px;              /* 余白指定 */
    padding-left: 40px;             /* 余白指定 */
}
p {
    margin:  0;                     /* デフォルトCSS打ち消し */
    line-height: 2;                 /* 行間調整 */
    padding-left:  40px;            /* 余白指定 */
}
.head_test:before {
    content:  '';                   /* 空白の要素を作る */
    width: 0;                       /* 幅指定 */
    height: 0;                      /* 高さ指定 */
    border-style: solid;            /* 三角を作る */
    border-width: 0px 0 110px 80px; /* 三角を作る */
    border-color: transparent transparent #a3d0e4 transparent;  /* 三角を作る */
    position:  absolute;            /* 位置調整 */
    z-index:  -1;                   /* 重なり調整 */
    transform: rotate(30deg);       /* 回転 */
    top: -20px;                     /* 位置調整 */
    left: 30px;                     /* 位置調整 */
}

ポップが丸ならこっちは三角だ!安易な発想ですが、結構かっこよくないですか?この三角もCSSで作っています。

詳細は下記の記事が詳しく解説してくれていますので、参考にしてみてください。
https://www.granfairs.com/blog/staff/make-triangle-with-css

最初の文字だけ大きくする

head4-3

画像:頭文字を大きくする

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        <span class="head_test-point">見</span>出しデザインのテストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    font-size:  24px;       /* 文字サイズ指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 15px;    /* 周りの余白指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}
.head_test-point {
    font-size:  50px;       /* 文字サイズ指定 */
}

もっとシンプルかつスタイリッシュにするならこれですね。インパクトも抜群です。

英語の後ろに日本語

head4-4

画像:英語の後ろに日本語

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        Head Design Test<span class="head_test-point">見出しデザインのテストです</span>
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    font-size:  40px;       /* 文字サイズ指定 */
    border-bottom:  solid;  /* 線指定 */
}
.head_test-point {
    font-size: 15px;        /* 文字サイズ指定 */
    margin-left:  10px;     /* 周りの余白指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}

英語が入っているだけなのに、なんでこうもかっこいいんですかね…日本語も入れてあげることでユーザービリティもバッチリです。

もうとりあえずでっかい文字

head4-5

画像:大きい文字

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    font-size:  60px;       /* 文字サイズ指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}

もう細かいこと抜きにして、ばーんと出しちゃいましょう。インパクト極大!しかもなんかおしゃれという地味に使える見出しです。

中央揃え系

見出しは左揃えとは限りませんね!ということで中央揃え系の見出し紹介です。

日本語と英語の組み合わせ

head5-1

画像:中央揃え 日本語と英語の組み合わせ

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
        <span class="head_test-point">Head Design Test</span>
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 35px;    /* 周りの余白指定 */
    font-size: 40px;        /* 文字サイズ指定 */
    text-align:  center;    /* 文字位置指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}
.head_test-point {
    display:  block;        /* ブロック要素にする */
    font-size:  14px;       /* 文字サイズ指定 */
    margin-top:  10px;      /* 周りの余白指定 */
    position:  relative;    /* 位置調整 */
    width: 140px;           /* 幅指定 */
    margin: 10px auto 0;    /* 周りの余白指定 */
    background-color:  #fff;/* 背景色指定 */
}

.head_test-point:before {
    content: '';            /* 空の要素を作る */
    height:  1px;           /* 高さ指定 */
    background-color:  #000;/* 背景色指定 */
    position:  absolute;    /* 位置調整 */
    top: 0;                 /* 位置調整 */
    bottom:  0;             /* 位置調整 */
    margin:  auto;          /* 位置調整 */
    z-index: -1;            /* 重なり調整 */
    width: 200px;           /* 幅指定 */
    left:  -30px;           /* 位置調整 */
}

英語ずるい、おしゃれになる、ずるい。日本語と強弱をつけて配置するといい感じになりますね。

後ろに丸い飾り

head5-2

画像:文字背景に丸

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 35px;    /* 周りの余白指定 */
    font-size: 40px;        /* 文字サイズ指定 */
    text-align:  center;    /* 文字位置指定 */
    padding-top: 20px;      /* 余白指定 */
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
}
.head_test:before {
    content: '';            /* 空の要素を作る */
    width: 150px;           /* 幅指定 */
    height: 150px;          /* 高さ指定 */
    border-radius:  50%;    /* 丸くする */
    border: solid #ccc;     /* 枠線指定 */
    display:  block;        /* ブロック要素にする */
    position:  absolute;    /* 位置調整 */
    left:  0;               /* 位置調整 */
    right:  0;              /* 位置調整 */
    margin:  auto;          /* 位置調整 */
    top: 0;                 /* 位置調整 */
    z-index: -1;            /* 重なり調整 */
}
.head_test:after {
    content: '';            /* 空の要素を作る */
    width: 140px;           /* 幅指定 */
    height: 140px;          /* 高さ指定 */
    border-radius:  50%;    /* 丸くする */
    border: 1px solid #ccc; /* 枠線指定 */
    display:  block;        /* ブロック要素にする */
    position:  absolute;    /* 位置調整 */
    left:  0;               /* 位置調整 */
    right:  0;              /* 位置調整 */
    margin:  auto;          /* 位置調整 */
    top: 7px;               /* 位置調整 */
    z-index: -1;            /* 重なり調整 */
}

ちょっとロゴっぽい感じになりますね。CSSだけとは思えないデザイン感の見出しにできます。

意外とシンプルに上下ラインもあり

head5-3

画像:上下ライン

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 40px;            /* 文字サイズ指定 */
    text-align:  center;        /* 文字位置指定 */
    padding: 20px 0 15px;       /* 余白指定 */
    border-top: solid 1px;      /* 線指定 */
    border-bottom:  solid 1px;  /* 線指定 */
    width:  320px;              /* 幅指定 */
    margin: 0 auto 35px;        /* 周りの余白指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}

単純な見出しですが、スッキリしていて汎用性抜群です。borderは偉大。

あえて枠に納めない

head5-4

画像:枠

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 40px;            /* 文字サイズ指定 */
    text-align:  center;        /* 文字位置指定 */
    margin:  20px 0;            /* 周りの余白指定 */
    background-color:  #fff;    /* 背景色指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}

.head_test:before {
    content: '';                /* 空の要素を作る */
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    border:  solid 1px #000;    /* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    right:  0;                  /* 位置調整 */
    top: 0;                     /* 位置調整 */
    bottom:  0;                 /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}

.head_test-wrap {
    padding-bottom:  20px;/* 余白指定 */
}

四角だからって文字を全部収める必要はないんじゃない?

という発想の元出来上がりました。丸よりもカチッとスタイリッシュですね。

文字の端に飾りの四角

head5-5

画像:文字端に四角の装飾

HTML

<div class="head_test-wrap">
    <h1 class="head_test">
        見出しデザインの<br>テストです
    </h1>
</div>
<p>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
    本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
</p>

CSS

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 40px;            /* 文字サイズ指定 */
    text-align:  center;        /* 文字位置指定 */
    margin:  20px 0;            /* 周りの余白指定 */
    display: inline-block;      /* インラインブロックにする */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test:before {
    content: '';                /* 空の要素を作る */
    height: 30px;               /* 高さ指定 */
    width: 60px;                /* 幅指定 */
    border: solid 1px #ccc;     /* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    top: 0;                     /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}
.head_test:after {
    content: '';                /* 空の要素を作る */
    height: 80px;               /* 高さ指定 */
    width: 80px;                /* 幅指定 */
    border: solid 1px #ccc;     /* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    right:  0;                  /* 位置調整 */
    bottom:  0;                 /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}

.head_test-wrap {
    padding-bottom:  20px;      /* 余白指定 */
    text-align:  center;        /* 文字位置指定 */
}

ちょっと幾何学っぽい感じを出してみました。これもスタイリッシュな雰囲気ですね。

その他の見出し案

CSSではもっといろんな見出しを作ることができます。色々な記事がたくさんの案を紹介しているので、ぜひこちらも参考にしてください。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 - サルワカ
https://saruwakakun.com/html-css/reference/h-design

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
https://www.nxworld.net/tips/50-css-heading-styling.html

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
http://fit-jp.com/cssheading20/

CSSだけでは高条件の案件獲得が難しい

画像:Shutterstock

WEBサイトの見栄えを整えるCSSですが、CSSだけでは好条件の案件を獲得することが難しいのが現状です。

CSSと合わせてJavaScriptやPHPといったプログラミング言語も学ぶことで、更にできる事が広がりあなたの市場価値を高めることができます。

CSSだけの案件はまだ少ない

もちろんCSSを学ぶことで出来ることは広がりますが、仕事獲得という面で考えるとCSSだけでは厳しい面もあります。なぜなら案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

しかし、先ほどお伝えしたJavaScriptPHPなども扱えるとなると、仕事獲得のしやすさや単価もグッと上がります。

だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

でもどの言語を学べばいいんだろう……。

いざプログラミング言語を選ぶとなるとこのような悩みが出てきますよね。そこで作りたいものから必要なプログラミング言語や簡易的な学習プランが分かるプログラミング診断アプリを用意しました。

あなたの作りたいものにあった学習プランと必要なスキルが分かります。ぜひご利用ください。

挫折せずにスキルを身につけたいなら

CSSに合わせて他のプログラミング言語を身に付けることをオススメしましたが、

ここから他にも学ぶのは大変だし挫折しそう……。

と思ってしまう方もいることでしょう。確かにCSSの習得だけでも学ぶべきことは多く大変です。そこに加えて他の言語を身に付けると考えると、難しく感じてしまいますよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?

弊社では、あなたの目的に合わせて専用のオーダーメイドカリキュラムを作成し、現役エンジニアの講師が専属であなたの学習をサポートします。そのため、つまづくことなく学習をすすめることができますよ。

いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験を予約する

まとめ

いかがでしたか?今回は「2018年に流行りそうな見出し」として、いろいろと紹介してみました。テクニックが必要なものもいくつかありますが、どれもCSSオンリーで作れちゃいます。

皆さんの素敵なサイト作りの参考になれば幸いです!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説