Web制作独学者へ【HTML/CSS】横線を引く方法を伝授

Tweet

みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
Web制作において、横線を引くケースは多々あります。
今日は、【HTML/CSS】でその横線を引く方法について説明します。

Web制作独学者へ【HTML/CSS】横線を引く方法を伝授

要素に横線を引きたい、文章中に区切り線を引きたい、文字に下線を引きたい等、横線を引く方法をケース別に説明します。

要素の上か下に横線を引く場合

要素の下に線を引くにはborder-bottom

See the Pen
Untitled by kacyan (@kacyan)
on CodePen.

要素の上に線を引くにはborder-top

See the Pen
Untitled by kacyan (@kacyan)
on CodePen.

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

単に横線を引く場合

要素に関係なく横線を引くときはこの方法を使う。

【HTML】hrタグを使う

See the Pen
Untitled by kacyan (@kacyan)
on CodePen.

文字の下に線を引く場合

テキスト文字の真下にのみ横線を引くときはこの方法を使う。

【HTML】uタグを使う

See the Pen
Untitled by kacyan (@kacyan)
on CodePen.

【CSS】text-decoration:underlineを使う

See the Pen
Untitled by kacyan (@kacyan)
on CodePen.

今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。

下記を押していただけると励みになります！
↓

　　　　　　　　　　　　　　　　人気記事

プログラミングスクール：エンジニアおすすめの３社

フリーランス初心者にとってクラウドソーシングは登竜門だ！

Tweet