CSSのみで実装するシンプルな見出し21パターン

CSSのみで実装するシンプルな見出し21パターン

蛍光ペンのような線をひいた見出しデザイン

ラインを使った見出し

<h2 class="heading01">ラインを使った見出し</h2>

.heading01 {
    display: inline;
    font-size: 26px;
    background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%);
}

蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。

2色を重ねた線と見出しデザイン

ラインを使った見出し

<h2 class="heading02">ラインを使った見出し</h2>

.heading02 {
    position: relative;
    font-size: 26px;
    text-align: center;
    border-bottom: 5px solid #f6f6f6;
}

.heading02::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background-color: #387ccc;
}

2色の線を重ねたような見出しデザインです。青の線は疑似要素を使ってposition: absoluteで配置しています。left: 50%とtransform: translateX(-50%)で中央に配置しています。左側に配置したい場合はleft: 0で実装可能です。

左右に線を配置した見出しデザイン

ライン見出し

<h2 class="heading03">ライン見出し</h2>

.heading03 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    text-align: center;
}

.heading03::before,
.heading03::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: #e3bf00;
}

.heading03::before {
    margin-right: 20px;
}
.heading03::after {
    margin-left: 20px;
}

疑似要素2つを使って線を表現します。

線2本とテキストをflexboxを使用して上下左右の中央配置にして、::before { margin-right: 20px }と::after { margin-left: 20px }でテキストと線の間の余白を指定しています。

吹き出しの見出しデザイン

ラインを使った見出し

<h2 class="heading04">ラインを使った見出し</h2>

.heading04 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    text-align: center;
}

.heading04::before,
.heading04::after {
    content: '';
    width: 3px;
    height: 40px;
    background-color: #3fc1c9;
}

.heading04::before {
    margin-right: 30px;
    transform: rotate(-35deg)
}
.heading04::after {
    margin-left: 30px;
    transform: rotate(35deg)
}

左右に線を配置した見出しの線をtransform: rotateで回転させて吹き出しのように見せています。

大文字英字と斜め線の見出しデザイン

英字とラインの見出し

<h2 class="heading05" data-en="Recruit">英字とラインの見出し</h2>

.heading05 {
    position: relative;
    padding-bottom: 50px;
    font-size: 26px;
    text-align: center;
}

.heading05::before {
    content: attr(data-en);
    display: block;
    color: #e04272;
    font-size: 20px;
    font-style: italic;
    text-transform: uppercase;
}

.heading05::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%) rotate(30deg);
    width: 1px;
    height: 40px;
    background-color: #e04272;
}

text-transform: uppercaseで大文字にした英字と疑似要素::afterで斜めの線を表現した見出しデザインです。

今回は英字をdata属性で表示しています。疑似要素::beforeのcontent: attr(data-en)でHTMLのdata-en="Recruit"を読み込み、スタイルを施しています。これはRecruitを<span>で括っても良いです。

斜線はleft: 50%とtransform: translate(-50%) rotate(30deg)で回転させて斜めにし、中央配置にしています。

半透明の英字と斜め線の見出しデザイン

英字とラインの見出し

<h2 class="heading06" data-en="Recruit">英字とラインの見出し</h2>

.heading06 {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 26px;
    text-align: center;
}

.heading06 span {
    position: relative;
    z-index: 2;
}

.heading06::before {
    content: attr(data-en);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(224,66,114,0.2);
    font-size: 80px;
    font-style: italic;
}

.heading06::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%) rotate(30deg);
    width: 1px;
    height: 40px;
    background-color: rgba(224,66,114,1);
}

大文字英字と斜め線の見出しの英字を半透明にして背景にした見出しデザインです。position: absoluteとtop: -20px left: 50% transform: translateX(-50%)で左右中央の上に少しずらして配置しています。

英字のフォントによってはフォントサイズや配置の変更が必要になるので調整が難しいスタイルではありますが、バランス良く配置できるとおしゃれになります。

手書き風の英字と見出しデザイン

手書き風の英字と見出し

<h2 class="heading07" data-en="Recruit">手書き風の英字と見出し</h2>

.heading07 {
    position: relative;
    padding-top: 50px;
    padding-left: 30px;
    font-size: 26px;
}

.heading07 span {
    position: relative;
    z-index: 2;
}

.heading07::before {
    content: attr(data-en);
    position: absolute;
    transform: rotate(-5deg);
    top: -20px;
    left: 0;
    color: rgba(224,66,114,0.6);
    font-size: 80px;
    font-weight: 400;
    font-family: luxus-brut, cursive;
    font-style: italic;
}

手書き風のフォントを使った英字と組み合わせた見出しデザイン。今回はAdobe FontsのLuxus Brutを使用してみました。

疑似要素::beforeでcontent: attr(data-en)を使ってテキストを読み込み、スタイルを指定しています。transform: rotate(-5deg)でテキストを斜めに表現しています。

このテキストを斜めに傾ける表現ですが、フォントのデザインによっては効果的になります。今回のような大文字と小文字のサイズが大きく違う手書き風フォントのであれば、違和感で目を留めやすく斜めにしてもバランス良く見えるので、私はよく利用しています。

線と英字を組み合わせた見出しデザイン01

Recruit英字とラインの見出し

<h2 class="heading08"><span>Recruit</span>英字とラインの見出し</h2>

.heading08 {
    font-size: 26px;
}

.heading08 span {
    display: flex;
    align-items: center;
    color: #498ee0;
    font-size: 18px;
    text-transform: uppercase;
}

.heading08 span::before {
    content: '';
    display: inline-block;
    margin-right: 20px;
    width: 40px;
    height: 1px;
    background-color: #498ee0;
}

シンプルに線と英字をメインの見出しの上に配置したデザイン。
英字を<span>で括り、<span>の疑似要素::beforeで線を表現。

<span>内のテキストと疑似要素の線をdisplay: flexとalign-items: centerで上下中央配置にしています。

線と英字を組み合わせた見出しデザイン02

英字とラインの見出し

<h2 class="heading09" data-en="Recruit">英字とラインの見出し</h2>

.heading09 {
    font-size: 26px;
}

.heading09::before {
    content: attr(data-en);
    display: block;
    color: #498ee0;
    font-size: 18px;
}

.heading09::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #498ee0;
}

線と英字を組み合わせた見出し01とは別の方法で、英字をdata属性を使って読み込んでいます。

線と英字を組み合わせた見出しデザイン03

英字とラインの見出し

<h2 class="heading10" data-en="Recruit"><span>英字とラインの見出し</span></h2>

.heading10 {
    position: relative;
    padding-top: 30px;
    font-size: 26px;
    border-bottom: 1px solid rgba(5,62,98,1);
}

.heading10 span {
    position: relative;
    z-index: 2;
}

.heading10::before {
    content: attr(data-en);
    position: absolute;
    top: 0px;
    left: 0;
    color: rgba(5,62,98,0.2);
    font-size: 40px;
    text-transform: uppercase;
    z-index: 1;
}

英字を背景にして下線をひいた見出しデザイン。メインの見出し（日本語）と英字の重なりの関係からメインの見出しを<span>で括り、z-indexで重なり順を指定しています。

数字と線を組み合わせた見出しデザイン01

数字と組み合わせた見出し

<h2 class="heading11" data-number="01">数字と組み合わせた見出し</h2>

.heading11 {
    position: relative;
    font-size: 26px;
    text-align: center;
}

.heading11::before {
    content: attr(data-number);
    display: block;
    margin-bottom: 30px;
    color: #fc5185;
    font-size: 30px;
}

.heading11::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: #fc5185;
}

疑似要素::beforeのcontent: attr(data-number)で数字を読み込み、margin-bottom: 30pxメインの見出し（日本語）との間に余白を指定。

::afterで線を表現して、position: absoluteで英字の下に配置しています。

数字と線を組み合わせた見出しデザイン02

数字と組み合わせた見出し

<h2 class="heading12" data-number="02">数字と組み合わせた見出し</h2>

.heading12 {
    position: relative;
    font-size: 26px;
}

.heading12::before {
    content: attr(data-number);
    display: inline-block;
    margin-right: 20px;
    color: #498ee0;
    font-size: 30px;
    border-bottom: 1px solid #498ee0;
}

数字と見出しを横並びにしたデザイン。テキスト量が多くなる場合には見出しにpadding-left: 30pxで余白をあけてから、疑似要素::beforeをposition: absoluteで配置することで改行位置を整えることができます。

数字と線を組み合わせた見出し03

数字と組み合わせた見出し

<h2 class="heading13" data-number="03">数字と組み合わせた見出し</h2>

.heading13 {
    position: relative;
    font-size: 26px;
}

.heading13::before {
    content: attr(data-number);
    display: block;
    color: #d8be39;
    font-size: 30px;
}

.heading13::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background-color: #d8be39;
}

線と数字をシンプルに配置した見出しデザイン。数字を英字にしても使えますね。
data-number="03"でなくとも<span>でも問題ないです。

数字と線を組み合わせた見出しデザイン04

数字と組み合わせた見出し

<h2 class="heading14" data-number="04">数字と組み合わせた見出し</h2>

.heading14 {
    position: relative;
    padding-left: 60px;
    font-size: 20px;
}

.heading14::before {
    content: attr(data-number);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: rgba(63,193,201,0.3);
    font-size: 50px;
}

.heading14::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background-color: rgba(63,193,201,1);
}

半透明の数字と背景にして見出しと重ねたデザイン。テキスト量が多くなって改行する場合にはバランスが崩れやすいので数字の配置には気をつけてください。

シンプルに丸と組み合わせた見出しデザイン

とってもシンプルな見出し

<h2 class="heading15">とってもシンプルな見出し</h2>

.heading15 {
    position: relative;
    padding-bottom: 20px;
    font-size: 26px;
    text-align: center;
}

.heading15::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background-color: #b99b00;
    border-radius: 7px;
}

見出しの下に丸をつけたシンプルなデザイン。あまり装飾を施したくないシンプルなサイトで使えます。

シンプルに三角と組み合わせた見出しデザイン

とってもシンプルな見出し

<h2 class="heading16">とってもシンプルな見出し</h2>

.heading16 {
    position: relative;
    padding-bottom: 20px;
    font-size: 26px;
    text-align: center;
}

.heading16::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: #b99a00 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}

見出しの下に三角をつけたシンプルなデザイン。こちらもシンプルなサイトによく使います。小見出しが多いですね。

縦線を施した見出し

あしらいを施した見出しデザイン

<h2 class="heading17">あしらいを施した見出し</h2>

.heading17 {
    padding-bottom: 10px;
    font-size: 26px;
    background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
    background-size: 4px 4px;
    background-repeat: repeat-x;
    background-position: center bottom;
}

background-image: repeating-linear-gradientで縦線を繰り返して表現させています。

background-size: 4px 4pxで繰り返す背景（縦線）のサイズ線を指定。同時に線幅も指定しています。

背景をbackground-repeat: repeat-xで横に繰り返し、background-position: center bottomで要素のbottomに配置すれば、縦線のあしらいが完成です。

padding-bottom: 10pxは縦線との余白をとっています。前後の要素とのバランスで調整してください。

破線を施した見出し

あしらいを施した見出しデザイン

<h2 class="heading18">あしらいを施した見出し</h2>

.heading18 {
    position: relative;
    padding-bottom: 10px;
    font-size: 26px;
}

.heading18::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 11px);
}

縦線を施した見出しの別パターン。破線はborderでも実装可能ですが、線との幅を自由に調整ができるので、線と線との間の余白をあけたい場合にはこちらのスタイルを指定しています。

斜線を施した見出し

あしらいを施した見出しデザイン

<h2 class="heading19">あしらいを施した見出し</h2>

.heading19 {
    position: relative;
    padding-bottom: 10px;
    font-size: 26px;
}

.heading19::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: repeating-linear-gradient(45deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
    background-size: 8px 8px;
}

こちらも縦線を施した見出しの別パターン。
height: 8pxとbackground-size: 8px 8pxに同じ数値を指定。これで線幅を調整しています。

網掛け線を施した見出しデザイン

あしらいを施した見出し

<h2 class="heading20">あしらいを施した見出し</h2>

.heading20 {
    position: relative;
    padding-bottom: 10px;
    font-size: 26px;
}

.heading20::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image:
        repeating-linear-gradient(45deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%),
        repeating-linear-gradient(135deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
    background-size: 8px 8px;
}

斜線を施した見出しの線に逆角度から同じ線をひいた網掛け線の見出しデザインです。

斜線を背景にした見出しデザイン

あしらいを施した見出し

<h2 class="heading21" data-en="About">あしらいを施した見出し</h2>

.heading21 {
    position: relative;
    font-size: 26px;
}

.heading21 span {
    position: relative;
    z-index: 2;
}

.heading21::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: repeating-linear-gradient(-45deg, #b4a983 0px, #b4a983 2px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
    background-size: 10px 10px;
    z-index: 1;
}

.heading21::after {
    content: attr(data-en);
    position: relative;
    margin-left: 20px;
    font-size: 16px;
    z-index: 2;
}

斜線を施した見出しの斜線を背景にしたデザイン。若干線の幅を太くするとバランスが良くなります。重なり順を調整するために<span>を使用しています。