今回はCSSで文章の途中にボーダーラインを引く方法を解説していきます!
borderプロパティを使ってを引く方法
下線はborderプロパティを使って表現する事ができます。
borderプロパティでは「線の種類」「線の太さ」「線の色」を指定します。
こばやし
順番は変わってもOKです!
下線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
border-bottom: solid 3px #6bb7d1;/*下線を引く*/
}
こばやし
HTMLで線を引きたい箇所を<span></span>で囲みます。
CSSの「solid」とは1本の線のことです。
破線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
border-bottom: dashe 3px #6bb7d1;/*破線を引く*/
}
こばやし
先程CSSで「solid」だった箇所を「dashe」に変更すると線が破線になります。
2本線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
border-bottom:double 5px #6bb7d1;/*2本線を引く*/
}
こばやし
CSSで「double」と指定すると2本線になります。
点線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
border-bottom: dotted 3px #87CEFA;/*点線を引く*/
}
こばやし
CSSで「dotted」と指定すると点線になります。
border以外を使って線を引く方法
マーカー風の下線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
background: linear-gradient(transparent 50%, #fdff9f 50%);/*マーカー風の下線を引く*/
}
こばやし
マーカー風のラインが引きたい場合は、「border」ではなく「background」で表現します。
文字下全体に線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
background: linear-gradient(transparent 0, #cefeff 0);/*文字全体に線を引く*/
}
ストライプ風の線を引く
こちらはダミーテキストです。
<p> こちらは<span>ダミーテキスト</span>です。</p>
p span{
position: relative;
padding: 0.4em 0.1em;
}
p span:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, skyblue, #d1d7ff 2px, #e9edff 2px, #e9edff 4px);/*色を変えたい場合はここのカラーを変更する*/
}
まとめ
今回はCSSを使って下線を引く方法を解説しました!
Webデザインについてはコチラの記事もおすすめです!
最後まで読んでくださりありがとうございました!
こばやし
デザイン本が全国の書店で発売中です!
頑張って作ったので、手に取って頂けたら嬉しいです!
コメント