STAFF BLOG

CSSのみで作る見出しデザイン

Web制作

2019/4/9

CSSのみで作る見出しデザイン

画像は使用せずにHTMLとCSSのみで作る見出しデザインを紹介します。
コピーで使用する場合はフォントサイズによって位置がズレる事がありますので、CSSで調整をしてください。

1 見出しデザインとCSSソースコード

見出しデザインとCSSソースコード

下線デザイン1（下線）

タイトルの下にボーダーを引いたシンプルな見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 0 0 8px;
     border-bottom: solid 1px #ccc;
}

h1 {

padding: 0 0 8px;

border-bottom: solid 1px #ccc;

}

下線デザイン2（破線）

タイトルの下に破線（点線）を引いたシンプルな見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 0 0 8px;
     border-bottom: dashed 1px #ccc;
}

h1 {

padding: 0 0 8px;

border-bottom: dashed 1px #ccc;

}

下線デザイン3（2本線）

タイトルの下に2本線を引いたシンプルな見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;
     padding: 0 0 8px;
}
h1::after {
     position: absolute;
     content: '';
     left: 0;
     bottom: 0;
     width: 100%;
     height: 8px;
     box-sizing: border-box;
     border-top: solid 3px #ccc;
     border-bottom: solid1px  #ccc;
}

h1 {

position: relative;

padding: 0 0 8px;

}

h1::after {

position: absolute;

content: '';

left: 0;

bottom: 0;

width: 100%;

height: 8px;

box-sizing: border-box;

border-top: solid 3px #ccc;

border-bottom: solid1px #ccc;

}

下線デザイン4（マーカー）

タイトルの下にマーカー(蛍光ペン)を引いたような見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 4px;
     background: linear-gradient(transparent 70%, #E5410A 70%);
}

h1 {

padding: 4px;

background: linear-gradient(transparent 70%, #E5410A 70%);

}

横線デザイン1（縦ライン）

タイトルの先頭に縦ラインを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     border-left: 6px solid #E5410A;
}

h1 {

padding: 8px 4px 8px 12px;

border-left: 6px solid #E5410A;

}

横線デザイン2（縦ライン+下線）

タイトルの先頭に縦ラインと下線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     border-left: 6px solid #E5410A;
     border-bottom: solid 1px #ccc;
}

h1 {

padding: 8px 4px 8px 12px;

border-left: 6px solid #E5410A;

border-bottom: solid 1px #ccc;

}

枠線デザイン1（枠線）

枠線(角丸)を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     border: solid 1px #ccc;
     border-radius: 5px;
}

h1 {

padding: 8px 4px 8px 12px;

border: solid 1px #ccc;

border-radius: 5px;

}

枠線デザイン2（枠線）

枠線(角丸)を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px 4px 8px 24px;
     border: solid 1px #ccc;
     border-radius: 5px;
}
h1::after {
     position: absolute;
     content: '';
     top: 8px;
     left: 8px;
     width: 6px;
     height: -webkit-calc(100% - 16px);
     height: calc(100% - 16px);
     background-color: #E5410A;
}

h1 {

position: relative;

padding: 8px 4px 8px 24px;

border: solid 1px #ccc;

border-radius: 5px;

}

h1::after {

position: absolute;

content: '';

top: 8px;

left: 8px;

width: 6px;

height: -webkit-calc(100% - 16px);

height: calc(100% - 16px);

background-color: #E5410A;

}

背景色デザイン1

タイトル全体に背景色(角丸)を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     background-color: #f6f6f6;
     border-radius: 5px;
}

h1 {

padding: 8px 4px 8px 12px;

background-color: #f6f6f6;

border-radius: 5px;

}

背景色デザイン2（背景色+下線）

タイトル全体に背景色+下線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     background-color: #f6f6f6;
     border-radius: 5px;
     border-bottom: solid 1px #ccc;
}

h1 {

padding: 8px 4px 8px 12px;

background-color: #f6f6f6;

border-radius: 5px;

border-bottom: solid 1px #ccc;

}

背景色デザイン3（背景色+縦ライン）

タイトル全体に背景色+縦ラインを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px 4px 8px 12px;
     background-color: #f6f6f6;
     border-left: 6px solid #E5410A;
}

h1 {

padding: 8px 4px 8px 12px;

background-color: #f6f6f6;

border-left: 6px solid #E5410A;

}

背景色デザイン4（ステッチ風）

タイトル全体に背景色+破線を入れたステッチ風の見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px;
     color: #fff;
     background-color: #E5410A;
     border: 1px dashed #fff;
     box-shadow: 0px 0px 0px 5px #E5410A;
}

h1 {

padding: 8px;

color: #fff;

background-color: #E5410A;

border: 1px dashed #fff;

box-shadow: 0px 0px 0px 5px #E5410A;

}

背景色デザイン5（ストライプ）

タイトル全体にストライプを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     padding: 8px;
     color: #fff;
     background: repeating-linear-gradient(-45deg, #E5410A, #E5410A 5px,#dd643b 5px, #dd643b 10px);
     text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
}

h1 {

padding: 8px;

color: #fff;

background: repeating-linear-gradient(-45deg, #E5410A, #E5410A 5px,#dd643b 5px, #dd643b 10px);

text-shadow: 1px 1px 0px rgba(0,0,0,0.3);

}

背景色デザイン6（吹き出し）

タイトル全体に吹き出しを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px;
     color: #fff;
     background-color: #E5410A;
     border-radius: 5px;
}
h1::after {
     position: absolute;
     content: '';
     top: 100%;
     left: 20px;
     border: 10px solid transparent;
     border-top: 10px solid #E5410A;
     width: 0;
     height: 0;
}

h1 {

position: relative;

padding: 8px;

color: #fff;

background-color: #E5410A;

border-radius: 5px;

}

h1::after {

position: absolute;

content: '';

top: 100%;

left: 20px;

border: 10px solid transparent;

border-top: 10px solid #E5410A;

width: 0;

height: 0;

}

マークデザイン1（サークル）

タイトル先頭にサークルマークを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px 4px 8px 24px;
}
h1::after {
     position: absolute;
     content: '';
     top: 50%;
     left: 0;
     transform:translateY(-50%);
     width: 10px;
     height:10px;
     border: solid 4px #E5410A;
     border-radius:100%;
}

h1 {

position: relative;

padding: 8px 4px 8px 24px;

}

h1::after {

position: absolute;

content: '';

top: 50%;

left: 0;

transform:translateY(-50%);

width: 10px;

height:10px;

border: solid 4px #E5410A;

border-radius:100%;

}

マークデザイン2（サークル+下線）

タイトル先頭にサークルマーク+下線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px 4px 8px 24px;
     border-bottom:  solid　1px #ccc;
}
h1::after {
     position: absolute;
     content: '';
     top: 50%;
     left: 0;
     transform:translateY(-50%);
     width: 10px;
     height:10px;
     border: solid 4px #E5410A;
     border-radius:100%;
}

h1 {

position: relative;

padding: 8px 4px 8px 24px;

border-bottom: solid　1px #ccc;

}

h1::after {

position: absolute;

content: '';

top: 50%;

left: 0;

transform:translateY(-50%);

width: 10px;

height:10px;

border: solid 4px #E5410A;

border-radius:100%;

}

マークデザイン3（サークル+枠線）

タイトル先頭にサークルマーク+枠線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px 4px 8px 32px;
     border:  solid　1px #ccc;
}
h1::after {
     position: absolute;
     content: '';
     top: 50%;
     left: 8px;
     transform:translateY(-50%);
     width: 10px;
     height:10px;
     border: solid 4px #E5410A;
     border-radius:100%;
}

h1 {

position: relative;

padding: 8px 4px 8px 32px;

border: solid　1px #ccc;

}

h1::after {

position: absolute;

content: '';

top: 50%;

left: 8px;

transform:translateY(-50%);

width: 10px;

height:10px;

border: solid 4px #E5410A;

border-radius:100%;

}

マークデザイン4（サークル+背景色）

タイトル先頭にサークルマーク+枠線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     position: relative;     
     padding: 8px 4px 8px 32px;
     color: #fff;
     background-color: #E5410A;
     border-radius: 5px;
}
h1::after {
     position: absolute;
     content: '';
     top: 50%;
     left: 8px;
     transform:translateY(-50%);
     width: 10px;
     height:10px;
     border: solid 4px #fff;
     border-radius:100%;
}

h1 {

position: relative;

padding: 8px 4px 8px 32px;

color: #fff;

background-color: #E5410A;

border-radius: 5px;

}

h1::after {

position: absolute;

content: '';

top: 50%;

left: 8px;

transform:translateY(-50%);

width: 10px;

height:10px;

border: solid 4px #fff;

border-radius:100%;

}

中央寄せ1（ライン）

タイトルを中央に寄せ左右にラインを入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     text-align: center;
}
h1 span{
     position: relative;
     display: inline-block;
     padding: 0 8px;
}      
h1 span::before, h1 span::after{
     position: absolute;
     content: '';
     top: 50%;
     width: 40px;
     height: 1px;
     background-color: #000;
} 
h1 span::before {
     left: 100%;
}
h1 span::after { 
     right: 100%;
}

h1 {

text-align: center;

}

h1 span{

position: relative;

display: inline-block;

padding: 0 8px;

}

h1 span::before, h1 span::after{

position: absolute;

content: '';

top: 50%;

width: 40px;

height: 1px;

background-color: #000;

}

h1 span::before {

left: 100%;

}

h1 span::after {

right: 100%;

}

中央寄せ2（下線）

タイトルを中央に寄せ下線を入れた見出しデザインです。

SAMPLE: 見出しデザイン

h1 {
     text-align: center;
     position: relative;
     padding: 0 0 24px;
}
h1::after{
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     bottom: 0;
     width: 60px;
     margin: auto;
     border-bottom: 2px solid #000;
}

h1 {

text-align: center;

position: relative;

padding: 0 0 24px;

}

h1::after{

position: absolute;

content: "";

left: 0;

right: 0;

bottom: 0;

width: 60px;

margin: auto;

border-bottom: 2px solid #000;

}

BACK TO ALL

ホームページの制作費用の決まり方になるポ…

「シングルページ」とは？ホームページ構成…

ホームページ制作やネット広告も対象の助成…

HPリニューアル前に行うべき調査や注意す…

LINE 公式アカウント（旧LINE@）…

GoogleカレンダーAPIを使って、G…

CSSのみで作る見出しデザイン

見出しデザインとCSSソースコード

下線デザイン1（下線）

見出しデザイン

下線デザイン2（破線）

見出しデザイン

下線デザイン3（2本線）

見出しデザイン

下線デザイン4（マーカー）

見出しデザイン

横線デザイン1（縦ライン）

見出しデザイン

横線デザイン2（縦ライン+下線）

見出しデザイン

枠線デザイン1（枠線）

見出しデザイン

枠線デザイン2（枠線）

見出しデザイン

背景色デザイン1

見出しデザイン

背景色デザイン2（背景色+下線）

見出しデザイン

背景色デザイン3（背景色+縦ライン）

見出しデザイン

背景色デザイン4（ステッチ風）

見出しデザイン

背景色デザイン5（ストライプ）

見出しデザイン

背景色デザイン6（吹き出し）

見出しデザイン

マークデザイン1（サークル）

見出しデザイン

マークデザイン2（サークル+下線）

見出しデザイン

マークデザイン3（サークル+枠線）

見出しデザイン

マークデザイン4（サークル+背景色）

見出しデザイン

中央寄せ1（ライン）

見出しデザイン

中央寄せ2（下線）

見出しデザイン

関連記事

NEWS POST

POPULAR POST

CATEGORY

ARCHIVE