【HTML&CSS】文字を太字にする方法、下線を付ける方法を解説！

どうも皆さんこんにちは！kwです！

今回は、文字を太字にする方法、下線を付ける方法を解説していきたいと思います！

この二つの方法は何通りかやり方があるのですが、今回は一般的なやり方を紹介していきます。

もし、マイナーな方も知りたいとの希望があれば、マイナー版も出したいと思います。

この太字にする方法、下線を引く方法を覚えると、デザインの幅が大幅に広がるので、まだ知らない方は今回で是非、覚えちゃってください！

1.文字を太字にする方法
2.CSSで文字を太字にする方法
3.文字に下線を付ける方法
4.CSSを使って文字に下線を付ける方法
5.まとめ

1.文字を太字にする方法

文字を太字にするには、太字にしたい文字をタグで囲ってあげます。

実際に例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

今回は、普通にタグで書いた文章と、タグも使ったバージョンで比較してみました。

このように比較すると、しっかり太字になっているのが分かりますね。

ついでに、文字を太字にする方法をもう一つ、紹介していきます。

2.CSSで文字を太字にする方法

いちいち、タグやその他テキストを表示できるタグの中にタグを配置するのってなかなか面倒ですよね。

そこで、CSSでまとめて太字にする方法もご紹介していきます。

CSSで太字にするには、font-weightというプロパティを使います。

やり方は、タグやその他テキストを表示できるタグにCSSから、font-weight:bold;として記述してあげるだけです。

実際に例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

今回も、普通のタグ、タグ、font-weight:bold;の三つで比較してみました。

font-weight:bold;の方でもしっかりと太字になっていますね。

この方法を使えば、複数の要素でも、CSSでまとめて太字にすることができます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

とても便利なプロパティですね！

このようにすれば、複数のタグの文字列でも一気に太字にすることができます。

3.文字に下線を付ける方法

文字に下線を付けるには、下線を付けたい文字をタグで囲ってあげます。

実際に例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

とても簡単ですね！

このように、タグを使うと文字列に下線をつけることができます。

次は、CSSを使って下線を付ける方法を紹介していきます。

4.CSSを使って文字に下線を付ける方法

先ほど紹介したタグ、何回もタグで文字を囲うのは正直面倒ですよね。

そこで、CSSで下線を付ける方法をご紹介します。

CSSで下線を付けるには、border-bottomというプロパティを使います。

（今回はborderについて少ししか触れませんが、自分の別記事でborderプロパティについて詳しく触れている記事があるので、borderプロパティについてもっと知りたい方はそちらを参考にしていただけると幸いです↓

【HTML&CSS】borderプロパティの使い方を紹介！ - kw-webdesign’s blog）

どうやって使うのか実際例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

今回はタグと比較してみました。

ただ、少しタグより線が細いことに気がついた方もいるでしょう。

ですが、安心してください。このプロパティでは、線の太さを指定することができます。

border-bottom:1px solid black;という風に記述してあって、この1pxの部分を変更することによって自由に線の太さを指定することができます。

※また、CSSで文字に下線を付ける場合には、display:inline;をつけてください。

この方法を使えば、複数の要素でも、CSSでまとめて下線を付けることができます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

ものすごく効率が良くなりましたね！

このように、border-bottomプロパティを使うと、複数の要素にまとめて下線を付けることができます。

5.まとめ

いかがでしたでしょうか？

このような技術を覚えておくと、本当にデザインの幅が広がるので、是非習得してみてください！

今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。