【CSS/html】文字だけに下線を引く方法
2022年08月06日
「文字に下線を引こうとしたら外枠に線が引かれちゃう」
「横いっぱいじゃなくて文字の長さだけ線を引きたい」
文字だけに下線を引く方法を解説します。
【html】uタグ
uタグで囲うと文字に下線が引かれます。
短い文字の時
<u>短い文字の時</u>
長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時
<u>長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時</u>uタグはhtml5でも使えるタグです。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【CSS】text-decoration:underline
「text-decoration:underline」はまさに文字だけに下線を引くためのCSSです。
短い文字の時
<style>
.example{
text-decoration: underline;
}
</style>
<div class="example">
短い文字の時
</div>
長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時
<style>
.example{
text-decoration: underline;
}
</style>
<div class="example">
長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時
</div>先述したuタグと同じ効果が得られます。
uタグと違い、さまざまな調整も可能です。
【CSS】spanにborder-bottom
border-bottomで文字だけに下線を引きたいときはインライン要素に指定しましょう。具体的にはspanで囲み、そのspanにborder-bottomを指定します。
短い文字の時
<style>
.example2{
border-bottom: 1px solid #999;
}
</style>
<span class="example2">
短い文字の時
</span>
長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時
<style>
.example2{
border-bottom: 1px solid #999;
}
</style>
<span class="example2">
長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時長い文章の時
</span>
このspanを「display:inline-block」や「display:block」にしてしまうと枠の下線になってしまいます。
文字が短いならそれでもうまくいきます。
【まとめ】文字だけに下線を引く方法
【html】uタグ
【CSS】text-decoration:underline
【CSS】spanにborder-bottom
以上、文字だけに下線を引く方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
