配色デザイン本が全国の書店で発売中!

【コピペ可!】【HTML・CSS】文章の途中にボーダーラインを引く方法

3年生

今回は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デザインについてはコチラの記事もおすすめです!

最後まで読んでくださりありがとうございました!

コメント

タイトルとURLをコピーしました