今回のアイデアテーマはアンダーライン。線種・質感・色表現の違いだけで遊ぶデザイン集です。
初心者でも安心のコピペで使えるCSSをご用意しました！
#01見本
太実線（バー型）のアンダーライン見出し
文字の70%より下だけに濃いめのバーを敷く定番。
線の太さは[transparent 70%]のパーセンテージで変えられますよ！
HTML
<div class="hU-1">太実線（バー型）のアンダーライン見出し</div>CSS
.hU-1{
background: linear-gradient(transparent 70%, #3b82f6 0) no-repeat;
background-size: 100%;
}#02見本
破線のアンダーライン見出し
カジュアルで読みやすい区切り。
[border-bottom]の数値で線の太さを変えられます！
HTML
<div class="hU-2">破線のアンダーライン見出し</div>CSS
.hU-2{
border-bottom: 4px dashed #0ea5e9;
padding-bottom: 6px;
}#03見本
点線のアンダーライン見出し
軽やかで可読性の高いリズム感。
[border-bottom]の数値で点の太さを変えられます！
HTML
<div class="hU-3">点線のアンダーライン見出し</div>CSS
.hU-3{
border-bottom: 4px dotted #22c55e;
padding-bottom: 6px;
}#04見本
ダブルラインのアンダーライン見出し
2本線でクラシック感。
[.hU-4:before{ bottom:4px }]の数値で2重線の間隔を変えられます！
HTML
<div class="hU-4">ダブルラインのアンダーライン見出し</div>CSS
.hU-4{
position: relative;
padding-bottom: 10px;
}
.hU-4:before,
.hU-4:after{
content: ""; position:absolute; left:0; right:0; height:2px; background:#334155;
}
.hU-4:before{ bottom:4px }
.hU-4:after { bottom:0 }
#05見本
グラデーションのアンダーライン見出し
横方向の色変化でリッチに。
[background: linear-gradient(90deg,#06b6d4,#3b82f6,#a78bfa)]3色のグラデーションカラーコードを使っています。
中間色を入れるとグラデーションは綺麗に見えますよ！
HTML
<div class="hU-5">グラデーションのアンダーライン見出し</div>CSS
.hU-5{
background: linear-gradient(90deg,#06b6d4,#3b82f6,#a78bfa) bottom/100% 4px no-repeat;
padding-bottom: 6px;
}#06見本
マーカー風のアンダーライン見出し
太めで柔らかい“塗った感”。
HTML
<div class="hU-6">マーカー風のアンダーライン見出し</div>CSS
.hU-6{
background: linear-gradient(transparent 60%, rgba(250,204,21,.45) 0) no-repeat;
background-size: 100% 0.9em;
}#07見本
波線（wavy）のアンダーライン見出し
CSSの text-decoration で波線。対応ブラウザでは滑らか。
HTML
<div class="hU-7">波線（wavy）のアンダーライン見出し</div>CSS
.hU-7{
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #f43f5e;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}#08見本
ストライプのアンダーライン見出し
繰り返しストライプでポップに。
HTML
<div class="hU-8">ストライプのアンダーライン見出し</div>CSS
.hU-8{
background: repeating-linear-gradient(90deg,#22c55e 0 10px,#00ff56 10px 20px) bottom/100% 4px no-repeat;
padding-bottom: 6px;
}#09見本
ホバーで伸びるアンダーライン見出し
UI感ある動きでインタラクションを付与。
HTML
<div class="hU-9">ホバーで伸びるアンダーライン見出し</div>CSS
.hU-9{ position: relative; padding-bottom: 6px; }
.hU-9:after{ content:""; position:absolute; left:0; bottom:0; height:4px; width:0; background: linear-gradient(90deg,#60a5fa,#22d3ee); transition: width .35s ease; }
.hU-9:hover:after{ width:100% }
#10見本
半ドット行列のアンダーライン見出し
粒感のある装飾で可愛く。
HTML
<div class="hU-10">ドット行列のアンダーライン見出し</div>CSS
.hU-10{
background: radial-gradient(circle at 4px 100%, #a855f7 2px, transparent 3px) bottom/12px 6px repeat-x;
padding-bottom: 6px;
}いかがでしたでしょうか？
ちょっとしたアクセントに使えるアイディアを今後もご紹介していきたいと思います！
コメント