今回はCSSで下線を引いた見出しを作成しました。
実線を引いただけのデザインから、ストライプや線の一部だけ色を変えたもの、グラデーションをかけたものなど様々なパターンで装飾しています。
気に入った見出しがあればコピペしてブログやホームページなどでご活用ください。
実線を引いた見出し

「border-bottom」に「solid」を指定し、線を少し太くしたシンプルな下線です
CSS表示
h2 {
padding: 0.5rem 0rem;
margin-bottom: 0.2rem;
border-bottom: 3px solid #f6ba33;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
ドット線を引いた見出し

「border-bottom」に「dotted」を指定した、可愛らしい下線。色もピンクにして女性向けの記事に最適です
CSS表示
h2 {
padding: 0.5rem 0;
margin-bottom: 0.2rem;
border-bottom: 3px dotted #E94C83;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
破線にした見出し

「border-bottom: 4px dashed;」で破線にしてます
コードを表示
h2 {
position: relative;
margin-bottom: 0.2rem;
padding: 0.5rem 0rem;
color: #353535;
border-bottom: 4px dashed;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
二重の下線を引いた見出し

border-bottomにdoubleを指定し二重線にしています。
CSS表示
h2 {
padding: 0.5rem 0;
margin-bottom: 0.2rem;
border-bottom: 6px double #4CB9F6;
color: #35353;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
太さの違う下線を2本引いたシンプルな見出し

太線は「h2セレクタ」、細い線は「before」疑似要素のborder-bottomで引いてます。 色は「color」プロパティで調整可能。
CSS表示
h2 {
position: relative;
margin-bottom: 0.2rem;
padding: 0.5rem;
border-bottom: 5px solid;
color: #F09033;
font-size: 26px;
font-weight: bold;
}
h2:before {
position: absolute;
bottom: -0.6rem;
left: 0rem;
right: 0rem;
border-bottom: 1px solid;
content: '';
}
HTML・CSSのカスタマイズや動作確認ができます
蛍光ペンのような下線を引いた見出し

強調表示などで使える蛍光ペンを加えたような下線。linear-gradientを使用し、上から60%まで透過させ、60%以降に色を加えることで文字の下側にかかる線となります。
CSS表示
h2 {
padding: 0.2rem;
margin-bottom: 0.2rem;
background: linear-gradient(transparent 60%, #66ccff 60%);
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
蛍光ペンのような下線を文字だけに引いた見出し

「h2」セレクタで中央寄せにして「span」セレクタでグラデーションをかけてます
コードを表示
<h2><span>CSSでつくる見出しデザイン</span></h2>
h2 {
padding: 0.2rem;
margin-bottom: 0.2rem;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2 span {
background: linear-gradient(transparent 60%, #FFFE03 60%);
}
HTML・CSSのカスタマイズや動作確認ができます
蛍光ペンような下線を少しゆがませて引いた見出し

「span」セレクタで「border-radius」を指定し歪んだ線にしています
コードを表示
<h2><span>CSSでつくる見出しデザイン</span></h2>
h2 {
padding: 0.2rem;
margin-bottom: 0.2rem;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2 span {
background: linear-gradient(transparent 60%, #52FD4D 60%);
border-radius: 80% 50% 60% 5%/80% 75% 15% 75%;
}
HTML・CSSのカスタマイズや動作確認ができます
蛍光ペンで波線を入れたような見出し

「text-decoration」で下部に波線を入れ、「text-underline-offset」で下線の位置を調整しています。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
color: #333;
text-decoration: 4px underline wavy #E056DB;
text-underline-offset: 5px;
text-align: center;
font-weight: bold;
font-size: 24px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を2色に色分けした見出し

「linear-gradient」で2色に色分けし、「background-size」で幅を100%、高さを10%に指定。「background-position」で下部に表示しています。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
padding: 0.8rem 0;
margin-bottom: 0.2rem;
background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
background-repeat: no-repeat;
background-size: 100% 10%;
background-position: bottom;
color: #323232;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を2色に色分けして隙間をあけた見出し

「linear-gradient」で途中から「transparent」を指定し隙間をあけてます
コードを表示
h2 {
padding: 0.8rem 0;
margin-bottom: 0.2rem;
background-image: linear-gradient(90deg, #4bf487 0 50px, transparent 50px 60px, #121212 0 60px);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: bottom;
color: #353535;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を2色に色分けし線の太さを変えた見出し

「border-bottom」で細い線を引き、before疑似要素で幅を15%にしたオレンジの線を引いてます。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
position: relative;
margin-bottom: 0.2rem;
padding: 1rem 0;
border-bottom: 1px solid #353535;
color: #353535;
font-size: 26px;
font-weight: bold;
}
h2:before {
position: absolute;
content: '';
width: 15%;
left: 0;
bottom: -1px;
border-bottom: 5px solid #ef8633;
}
HTML・CSSのカスタマイズや動作確認ができます
文字幅に合わせ下線を2色に色分けした見出し

「overflow:hidden;」を指定し、「before」「after」疑似要素で幅を100%にした「border-bottom」を指定し色分けしています。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
position: relative;
padding: 0.8rem 0;
margin-bottom: 0.2rem;
overflow: hidden;
color: #323232;
font-weight: bold;
font-size: 26px;
}
h2:before,
h2:after {
position: absolute;
width: 100%;
bottom: 0;
content: '';
}
h2:before {
border-bottom: 5px solid #e860ce;
}
h2:after {
border-bottom: 5px solid #323232;
}
HTML・CSSのカスタマイズや動作確認ができます
グラデーションの下線を引いた見出し

下線を鮮やかなグラデーションにした見出しです。「linear-gradient」グラデーションを作り、「background-size」で高さを10pxに。「background-position」で下部に配置し下線にしています。
CSS表示
h2 {
padding: 0.8rem 0;
margin-bottom: 0.2rem;
background-image: linear-gradient(109.6deg, rgba(238, 58, 136, 1) 11.2%, rgba(128, 162, 245, 1) 91.1%);
background-repeat: no-repeat;
background-size: 100% 10px;
background-position: bottom;
color: #353535;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を文字に重ねてグラデーションにした見出し

下線は「background-image」で調整可能です。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
padding: 0.8rem 0 0;
margin-bottom: 0.2rem;
background-image: linear-gradient(135deg, #F0FF00 10%, #58CFFB 100%);
background-repeat: no-repeat;
background-size: 100% 13px;
background-position: bottom;
color: #353535;
text-align: center;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
文字を二色にして下線を引いた見出し

線の高さにあわせて色分けした見出しです。テキストはlinear-gradientで180degで上から下方向にグラデーションをかけ、上部を黒、下部をピンクに色分け。下線はbefore疑似要素で引いてます
CSS表示
h2 {
position: relative;
margin-bottom: 0.2rem;
background: linear-gradient(180deg, #353535 0 60%, #ED0081 60%);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2::before {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 40%;
background-color: #353535;
z-index: -1;
content: '';
}
h2 {
position: relative;
margin-bottom: 0.2rem;
background: linear-gradient(180deg, black 0 50%, #ED0081 50%);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を市松模様にした見出し

linear-gradientを使用して下線を市松模様にしました。注目を集めたい見出しに最適です。
CSS表示
h2 {
position: relative;
padding:0.5rem 0;
margin-bottom: 0.2rem;
font-size: 26px;
font-weight: bold;
color:#353535;
}
h2:before {
position: absolute;
content: '';
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
/* オレンジの四角 */
background: linear-gradient(45deg, #EA5433 25%, transparent 25%, transparent 75%, #EA5433 75%),
linear-gradient(45deg, #EA5433 25%, transparent 25%, transparent 75%, #EA5433 75%);
background-position: 0 0, 5px 5px;
/* 四角のサイズ */
background-size: 10px 10px;
/* 白の四角 */
background-color:#dedede;
}
HTML・CSSのカスタマイズや動作確認ができます
カラフルに色分けした下線を入れたポップな見出し

下線をカラフルにしポップなデザイン。linear-gradientで色分けしています。
CSS表示
h2 {
padding: 1rem 0;
margin-bottom: 0.2rem;
background-image: linear-gradient(90deg, #74E1F5 0 25%, #F5D574 25% 50%, #74F590 50% 75%, #F57474 75%);
background-repeat: no-repeat;
background-size: 100% 0.3rem;
background-position: bottom;
color: #353535;
font-weight: bold;
font-size: 26px;
text-align: center;
}
HTML・CSSのカスタマイズや動作確認ができます
下線を斜めストライプにした見出し

repeating-linear-gradientを使用し、斜めのストライプを作成しました。角度を45度に指定し、白色と透過を2px毎に繰り返しています。
CSS表示
h2 {
position: relative;
margin-bottom: 0.5rem;
padding-bottom: 1rem;
background-image: repeating-linear-gradient(45deg, transparent 0 3px, #e06850 3px 6px);
background-repeat: no-repeat;
background-size: 100% 0.5rem;
background-position: bottom;
font-weight: bold;
font-size: 26px;
color: #353535;
}
HTML・CSSのカスタマイズや動作確認ができます
縁を入れたストライプを下線にした見出し

「-webkit-text-stroke」で文字に縁を入れ、before疑似要素の「repeating-linear-gradient」でストライプにしています
コードを表示
h2 {
position: relative;
padding: 0.7rem 0;
margin-bottom: 0.2rem;
color: #EC7686;
font-weight: bold;
font-size: 26px;
-webkit-text-stroke: 1px #999;
}
h2::before {
position: absolute;
height: 0.5rem;
width: 100%;
bottom: 5px;
right: 0;
border: 1px solid #999;
background: repeating-linear-gradient(45deg, #EC7686 0 2px, transparent 2px 4px);
content: '';
}
HTML・CSSのカスタマイズや動作確認ができます
ストライプに少し文字を重ねたCSS見出しデザイン

「repeating-linear-gradient」でストライプにし、「background-position」で位置を調整。
コードを表示
<h2>CSSでつくる見出しデザイン</h2>
h2 {
position: relative;
padding: 0.7rem 0;
margin-bottom: 0.2rem;
background-image: repeating-linear-gradient(45deg, transparent 0 3px, #bee0e1 3px 6px);
background-repeat: no-repeat;
background-size: 100% 15px;
background-position: left 0 bottom 7px;
color: #353535;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線に小さい斜めストライプを入れた見出し

ストライプを小さくしお洒落にしています。background-sizeで幅を指定。
CSS表示
h2 {
padding: 1.3rem 0;
margin-bottom: 0.5rem;
background-image: repeating-linear-gradient(45deg, #68dfed 0 2px, transparent 2px 4px);
background-repeat: no-repeat;
background-size: 4rem 0.4rem;
background-position: center bottom;
color: #353535;
font-weight: bold;
font-size: 26px;
text-align: center;
}
HTML・CSSのカスタマイズや動作確認ができます
吹出口の右側だけ線を入れた見出し

before疑似要素で「skew」を指定し線を斜めに、「border-right」で右側だけ実線を入れてます
コードを表示
h2 {
position: relative;
padding-bottom: 0.5rem;
border-bottom: 3px solid #333;
background-color: white;
color: #333;
font-weight: bold;
font-size: 26px;
}
h2:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) skew(-25deg);
height: 20px;
width: 10px;
border-right: 3px solid #333;
background-color: white;
content: "";
}
HTML・CSSのカスタマイズや動作確認ができます
下線を引き吹出口を線にした見出し

before疑似要素で高さ、幅を調整し吹出口を線にしてます
コードを表示
h2 {
position: relative;
padding: 1rem;
border-radius: 15px;
border-bottom: 5px solid #333;
background-color: #e0c9be;
color: #333;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 25px;
width: 3px;
background-color: #e0c9be;
content: "";
}
HTML・CSSのカスタマイズや動作確認ができます
下線を短くした見出し

linear-gradientにより左右40%を白い線にし、中央の30%を黒い下線を引いてます。色分けすることでお洒落に。
CSS表示
h2 {
position: relative;
padding: 0.5rem 0 0.8rem;
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 26px;
background-image: linear-gradient(90deg, white 0% 40%, black 40% 60%, white 60%);
background-repeat: no-repeat;
background-size: 100% 0.3rem;
background-position: bottom;
}
HTML・CSSのカスタマイズや動作確認ができます
二色に色分けした小さい線を入れた見出し

linear-gradientで50%ずつ赤と黒を指定し、2色に色分けしています
CSS表示
h2 {
position: relative;
padding: 0.5rem 0 1rem;
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 26px;
background: linear-gradient(90deg, #E93F33 0% 50%, #212121 50%);
background-repeat: no-repeat;
background-size: 4rem 0.4rem;
background-position: bottom;
color: #212121;
}
HTML・CSSのカスタマイズや動作確認ができます
グラデーションの小さい線を入れた見出し

linear-gradientで下線をグラデーションにし、background-sizeで小さくしてお洒落に。
CSS表示
h2 {
position: relative;
padding: 0.5rem 0 1rem;
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 26px;
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
background-repeat: no-repeat;
background-size: 4rem 0.4rem;
background-position: bottom;
}
HTML・CSSのカスタマイズや動作確認ができます
3色の小さい線を入れた見出し

linear-gradientで33%ずつ色分けして3色にしています
CSS表示
h2 {
padding: 0.5rem 0 1rem;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #C780A9 0% 33%, #e8e833 33% 66%, #81c682 66%);
background-repeat: no-repeat;
background-size: 4rem 0.4rem;
background-position: bottom;
color: white;
font-weight: bold;
font-size: 26px;
}
HTML・CSSのカスタマイズや動作確認ができます
下線の代わりに小さな英字を配置した見出し

contentに 'heading'を設定し、位置を調整し文字の下に配置。after疑似要素で横線をひいてます
コードを表示
h2 {
position: relative;
margin-bottom: 0.2rem;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2::before,
h2::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h2::before {
bottom: -20px;
color: #ea504a;
font-size: 12px;
text-transform: uppercase;
content: 'heading';
}
h2::after {
bottom: -15px;
width: 100px;
height: 2px;
background-image: linear-gradient(90deg, #ea504a 10px, transparent 10px calc(100% - 10px), #ea504a calc(100% - 10px));
content: '';
}
HTML・CSSのカスタマイズや動作確認ができます
下線の代わりに小さな英字を配置した見出し

contentに 'heading'を設定。位置を調整し文字の下に配置しています
コードを表示
h2 {
position: relative;
margin-bottom: 0.2rem;
font-weight: bold;
font-size: 26px;
text-align: center;
}
h2::before {
position: absolute;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2rem 2rem;
background-color: #333;
color: #f8c433;
font-size: 12px;
text-transform: uppercase;
content: 'heading';
}
HTML・CSSのカスタマイズや動作確認ができます
以上がCSSで下線を引いた見出しデザインとなります。
「linear-gradient」を使用し下線を引くとグラデーションや色分け、線幅を小さくするなど様々な表現が可能になります。ぜひ試してみてくださいね。