-
HTML/CSS
- html
- アンダーライン
【HTML】アンダーラインの引き方4選(引くときの注意点も)
「HTMLでコーディングをしているけど、アンダーラインの引き方がわからない…。」そんなお悩みありませんか?
HTMLでコーディングをしていて、下線を引くことはたまにありますよね。
この記事では、アンダーラインの引き方を複数紹介していきます。
また、その次にアンダーラインを引くときの注意点も解説します。
それでは、さっそくみていきましょう。
【HTML】アンダーラインの引き方4選
アンダーラインの引き方として以下の4つを紹介します。
- linear-gradientを使用してマーカー風にひく
- borderを使う
- uタグを使う
- text-decorationを使う
それぞれみていきましょう。
linear-gradientを使用してマーカー風にひく
まずは、「linear-gradient」を使う場合です。
たとえば、以下のようにコードを書きます。
<p>こんにちは今日は<span>日曜日</span>です</p>span {
background: linear-gradient(transparent 65%, rgb(171, 171, 247) 0%);
}出力すると下のようになります。
マーカーでアンダーラインを引いたような線が現れました。
linear-gradientは本来色のグラデーションをつけるための関数です。
この関数を使うと様々な色を混ぜて自由にグラデーションをつくることができます。
linear-gradientに関してよりくわしく知りたい場合は、以下の記事を読んでみてください。
以上、linear-gradient関数を用いて、マーカー風にアンダーラインを引く方法についてでした。
borderを使う
つづいて、CSSのborderプロパティを使う方法です。
※borderは「境界線」という意味です。
コードは例えば以下のように書きます。
<p>こんにちは</p>p {
width: fit-content;
border-bottom: 1px solid #000;
}出力すると以下のようになります。
下線が表示されているのがわかります。
今回はpタグのブロックの下の辺の線を表示させました。
ちなみに、ブロック要素はwidth(横幅)がデフォルトだと100%になっているので、「width: fit-content;」としてブロックに入っている文字の長さに横幅を合わせました。
borderプロパティでも下線が引けるということを覚えておきましょう。
uタグを使う
次に、uタグを使う方法です。
※ちなみにuタグのuは「underline(下線)」の略です。
コードの書き方は単純で、下線を引きたい部分を、<u></u>で囲むだけです↓
<p>こんにちは今日は<u>日曜日</u>です</p>上のコードを出力すると以下のようになります。
uタグで囲った部分に、黒の細い下線が現れました。
以上uタグを使ったアンダーラインの引き方でした。
text-decorationを使う
さいごに、text-decorationプロパティを使う方法を見ていきます。
※textは「文字」、decorationは「装飾」という意味です。
コードは下のように書きます。
<p>こんにちは</p>p {
text-decoration: underline;
}出力すると以下のようになります。
text-decorationをunderline(アンダーライン)と設定することで、下線が現れました。
(補足)
逆にtext-decorationプロパティを使って下線を消す場面もあります。
それはaタグ(アンカータグ)でリンクをつくったときです。
aタグでリンクをつくるとデフォルトで下線がついています。
その時に、text-decorationをnoneに設定すると下線を消すことができます。
これは、よくある手法なので知らなかった方は覚えておきましょう。
アンダーラインを引くときの注意点
アンダーラインを引くうえで注意すべき点は、アンダーラインを引きすぎないようにするということです。
まず、アンダーラインは一番伝えたいことを強調するときに使用します。
なので、線を引きすぎると、どこが重要か見づらくなってしまいます。
アンダーラインを引くときは無駄に線を引いていないかチェックするようにしましょう。
強調するときに使い多用を避けた方がいいものとして、太字も挙げられます。
HTMLとCSS上での太字のつくり方に関しては、以下の記事を読んでみてください。
もう一つの注意点としてはアンダーラインに色をつける場合は、色を考えて選ぶ必要があるということです。
周りと調和する色で引くか、文字の色やベースの色と正反対の色で強調する場合の2つのパターンが挙げられます。
アンダーラインに色をつける際は、周りのデザインを考慮して、色を選びましょう。
以上、アンダーラインを引くときの注意点でした。
まとめ
いかがでしたか？
HTMLでのアンダーラインの引き方について理解が深まったことでしょう。
また、アンダーラインを引くときの注意点として、アンダーラインを多用しすぎないよう気をつけましょう。
線の色にもこだわれるとなおよいです。
ぜひコードを書いてみて実践してみてください。
今回の知識が役に立てば幸いです。
