この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
今回はCSSで作る見出しのデザインの作り方について解説します。
コピペで作るだけではなく、自分でカスタマイズできるようにわかりやすく解説します。
見出しのデザインの作り方
- 見出しデザインをコピぺだけではなく、自分でカスタマイズしたい
- borderプロパティやpadding以外のコードでも書きたい
この記事を読むとわかること
- 見出しデザインでのdisplay:inline-blockとposition:relative・absoluteの使い方
- ::before・::afterで余分なHTMLを増やさずに装飾を追加できること
- カスタマイズできるコピぺ可のサンプルコード
シンプルな見出しデザインのコード例
まず、ベースとなるシンプルな見出しデザインのコードを紹介します。
こちらのコードをベースとして、説明していきます。
<h2 class="heading-marker-left">シンプルな見出しデザイン</h2>
<style>
.heading-marker-left {
position: relative;
display: inline-block;
margin: 16px 0;
padding-left: 12px; /* ← 縦線とテキストの間隔 */
font-size: 24px; /* ← 文字サイズ */
}
.heading-marker-left::before {
content: "";
position: absolute; /* ← 絶対配置を有効に */
left: 0; /* ← 親要素の左端から */
top: 50%; /* ← 親要素の中央に */
transform: translateY(-50%);
width: 4px; /* ← 縦線の太さ */
height: 60%; /* ← 縦線の高さ */
background: #3498db; /* ← 縦線の色 */
}
</style>
以下はプレビューです。表示の確認に活用してください。
See the Pen シンプルな見出しデザインのコード by goro (@goro-clover) on CodePen.
このデザインは、見出しの左側に縦線が付いているデザインです。
例のコードを解説
では、上記例のコードを解説を解説します。
h2（親要素）のコード
.heading-marker-left のコードについてです。こちらのclassはh2（h1やその他の見出しのタグでも可）に適用するスタイルです。
position: relative;については、後述します。
display: inline-block;のスタイルを設定しています。
h1〜h6のタグは、デフォルトではdisplay: blockが設定されています。
display: blockでは、見出し全体が幅いっぱい（親要素に対して100%）になります。
ボーダーや背景を「テキスト幅だけ」に合わせたければ、余計な横幅を取ってしまい扱いづらいです。
display: inline-blockを設定すると、下記のメリットがあります。
- テキストの横幅だけをCSSで装飾できる
- width・height・margin・paddingが設定できる
ですので、背景色やボーダーを「文字列のちょうど周りだけ」に適用したいときは必須の設定です。
padding-left: 12px; については、 縦線とテキストの間隔を設定するスタイルです。
こちらの設定がない場合は、 縦線とテキストがぴったりとくっついてしまいます。
今回は余白を設けたいので、padding-left:を設定しています。
::before（擬似要素）のコード
次に.heading-marker-left::beforeのコードについてです。
今回のコードでは、::beforeを使用してスタイリングしています。
ここで、見出しに縦線を入れるだけだったら::beforeではなく、borderを使ったらいいのでは？と思いませんか。
::beforeを使っている理由は、::beforeの方が細かいデザインの調整ができるからです。
borderで表現できるデザインでイメージに合えばそれでも大丈夫です。
ですが、より細かいデザインの調整がしたければ、::beforeの使用をおすすめします。
position: absolute;のコードを書いている理由は、細かい位置調整ができるからです。
position プロパティを使うと、topやleftなどのプロパティで細かい調整ができます。
before、after擬似要素でposition プロパティを使う際には、親要素に position: relative;を設定した方が位置調整がしやすいです。
擬似要素を使わない方法
擬似要素を使わずに例のコードの見た目も作れます。
しかし、線の高さ（長さ）は要素全体の高さに依存しますので、線だけを部分的に短くしたり、中央寄せはできません。
See the Pen 擬似要素を使わない見出しデザインのコード by goro (@goro-clover) on CodePen.
擬似要素のメリット
また、擬似要素を使うメリットとして、HTMLに余分な装飾用の要素（spanやdiv）を増やすことなく、CSSだけで装飾できます。
さきほどの擬似要素を使わないコードでは線の細かな調整はできないと書きました。
細かい調整をしようとすると、spanタグを追加して、装飾する必要があります。
その場合でも擬似要素（before、after）を使ったら、余分な装飾用の要素（spanやdiv）を増やさなくて済みます。
ですので、装飾用のspanなどを増やさないで、HTMLは見出しの構造のみを書けます。
<!-- 装飾用タグを追加した例 -->
<h2 class="heading">
<span class="border"></span>
ボーダー付き見出し
</h2>ここまでのまとめ
- display:inline-block
- 見出しをテキスト幅にぴったり合わせ、paddingやwidth・heightを設定可能にする。
- position:relative・position:absolute
- 親要素にposition: relative;を設定し、擬似要素の位置を見出しを基準に細かく調整できる。
- ::before・::after擬似要素
- 余分なHTML要素を増やさずに、縦線・下線・背景など細かい装飾を追加できる。
コピペ可の見出しデザインサンプルコード
次に、コピペ可能な見出しデザインのサンプルコードを紹介します。
すべての見出しのコードをひとつにまとめました。
VSCodeにコピペして、カスタマイズしてみてください。
paddingやwidthなどのプロパティをカスタマイズして、どのような表示になるかぜひ確認してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>見出しサンプルプレビュー</title>
<style>
body {
padding: 32px;
line-height: 1.6;
}
h2 {
margin: 32px 0 16px;
}
.heading-underline {
border-bottom: 2px solid #333;
padding-bottom: 4px;
}
.heading-marker-left {
position: relative;
display: inline-block;
padding-left: 12px;
}
.heading-marker-left::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
background: #3498db;
}
.heading-thin-line {
position: relative;
padding-bottom: 4px;
}
.heading-thin-line::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #666;
}
.heading-border-top {
border-top: 3px solid #e91e63;
padding-top: 4px;
}
.heading-gradient-line {
position: relative;
padding-bottom: 8px;
}
.heading-gradient-line::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #6a11cb, #2575fc);
border-radius: 2px;
}
.heading-double-line {
position: relative;
padding-bottom: 12px;
}
.heading-double-line::before,
.heading-double-line::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #333;
}
.heading-double-line::before {
bottom: 4px;
}
.heading-double-line::after {
bottom: 0;
}
</style>
</head>
<body>
<h2 class="heading-underline">1. シンプル下線</h2>
<h2 class="heading-marker-left">2. 左マーカー</h2>
<h2 class="heading-thin-line">3. 細線下線</h2>
<h2 class="heading-border-top">4. 上部ボーダー</h2>
<h2 class="heading-gradient-line">5. グラデ下線</h2>
<h2 class="heading-double-line">6. ダブルライン</h2>
</body>
</html>See the Pen Untitled by goro (@goro-clover) on CodePen.
まとめ
最後に今回のまとめを書きます。
- 見出しデザインは、display:inline-blockとposition:relative・absoluteの活用がおすすめ
- ::before・::afterを使うと余分なHTMLを増やさずに装飾を追加できる
今回は見出しデザインの作り方について紹介しました。
それではまたノシ
