HTML/CSSで下線を引く方法+リンク下の下線の消し方。（サンプルコード付き）

こんにちは！
WEBページを見ていると「どうやってキレイな下線を作成しているんだろう？」
「自分も下線を引けるようになると制作の幅が広がるんだけどな・・」
「リンク下の下線を消したいけど、消す方法がわからない・・」
そんなお悩みを抱えた、初心者WEBサイト制作者のかたも多いのではないでしょうか？

HTML/CSSを使用し下線を引けるようになると、目次などを目立たせる事ができ、より見やすいWEBサイトを作成できるようになります。
加えて、リンク下の下線を消せるようになると、オリジナリティのあるWEBサイト制作ができるようになります。

今回は、初心者のかた向けに、下線の引き方・リンク下の不要な線の消し方を、サンプルコード付きで詳しく解説していきたいと思います。

1 HTML/CSS下線とは
2 下線の書き方（基本編）
3 下線のカスタマイズ方法（応用編）
4 リンクの下線を消す方法
5 まとめ

HTML/CSS下線とは

下線は文章を目立たせる。

WEBサイトを見ているとよくみかける下線。
下線を引くことの目的は、文章の一部を目立たせ、サイト閲覧者に重要な部分をよりわかりやすくする為です。
つまり、良いWEBサイトを制作するには下線の作成はかかせません！
それでは、下線の作成方法を説明していきます。

下線の書き方（基本編）

下線を引く方法は3種類あります。
1番オススメの方法は3番目で解説します。時間がない方は3番目だけ見て下さい。
各方法の、メリット・デメリットを含め順番に解説していきます。

方法1.タグで下線を引く方法

タグを使用し下線を引きます。
※サンプルコード表示結果

uタグで囲んだ中に下線が引かれます。

※HTMLサンプルコード　　　　　　　　　　　　

<u>uタグで囲んだ中に下線が引かれます。</u>

1	<u>uタグで囲んだ中に下線が引かれます。</u>

※解説
下線を引きたい文章を〜で囲みます。
簡単に引くことができますが、フォントや色の線も変える事ができません。
現在はCSSで下線を引くことが推奨されており、タグは非推奨となっています。

方法2.HTMLで直接下線を引く方法

HTMLコードに直接CSSを記入します。
※サンプルコード表示結果

ここに下線を引きます。

※HTMLサンプルコード　　　　　　　　　　　　　　　

<p>ここに<span style="text-decoration: underline">下線を引き</span>ます。</p>

1	<p>ここに<span style="text-decoration: underline">下線を引き</span>ます。</p>

※解説
下線を引きたい箇所をタグで囲み、styleを指定します。
styleに直接CSSプロパティ「text-decoration: underline」を記載し、下線を表示します。
しかし、HTMLコード内にCSSの記述を増やすのはオススメできません。
理由は、
・下線を増やしたい箇所がある度にstyle=”text-decoration: underline”を記入しなければならない。
・あとからのまとめての変更にも、個別に1つ1つ対応しなければならないなど、作業工数が増えてしまう。

上記の理由から、次に解説する3番目の方法をオススメします。

方法3.class名をつけてCSSで指定する。

●一番オススメの方法
CSSコードで指定します。
※下記サンプルコード表示結果

ここに下線を引きます。

※HTMLサンプルコード
　　　　　　　　　　　　　　

 <p>ここに<span class="example">下線を引き</span>ます。</p>

1	<p>ここに<span class="example">下線を引き</span>ます。</p>

※CSSサンプルコード

.example {
  text-decoration: underline;
}

.example {

text-decoration: underline;

}

※解説
CSSを指定し下線を引きます。
CSSを指定することで同じ線を使い回す事ができ、まとめての変更も簡単にすることができます。
作業工数を減らすことができる為、一番オススメの方法です。

上記3点が下線の引き方の基礎となります。
ここからは下線のカスタマイズ（応用編）の解説をしていきます。

下線のカスタマイズ方法（応用編）

線の種類、太さ、色をカスタマイズ

CSSのborderプロパティを利用します。
borderプロパティとは

border-bottomにすると下線を引く指定になります。
下線の種類、太さ、色をカスタマイズしていきます。

○線の種類

※サンプルコード表示結果

下線を引きます。solid

下線を引きます。double

下線を引きます。doted

下線を引きます。dashed

※HTMLサンプルコード

<p class="example1">下線を引きます</p>
<p class="example2">下線を引きます</p>
<p class="example3">下線を引きます</p>
<p class="example4">下線を引きます</p>

下線を引きます

下線を引きます

下線を引きます

下線を引きます

※CSSサンプルコード

.example1 {
  border-bottom: solid 1px black;
}
 
.example2 {
  border-bottom: double 1px black;
}
 
.example3 {
  border-bottom: dotted 1px black;
}
 
.example4 {
  border-bottom: dashed 1px black;
}

.example1 {

border-bottom: solid 1px black;

}

.example2 {

border-bottom: double 1px black;

}

.example3 {

border-bottom: dotted 1px black;

}

.example4 {

border-bottom: dashed 1px black;

}

※解説
どの線にしたいのかを選択肢し、border-bottom:〇〇　1px black;
の〇〇に線の種類を記載し、線の種類を変更します。
solid（実線）double（二重線）dotteed（点線）dashed（破線）

○線の太さ

※サンプルコード表示結果

下線を引きます

※HTMLサンプルコード

<p class="example1">下線を引きます</p>
<p class="example2">下線を引きます</p>

1 2	<p class="example1">下線を引きます</p> <p class="example2">下線を引きます</p>

※CSSサンプルコード　　　　　　　　　　　　　　　　　　　　

.example1 {
  border-bottom: solid 1px black;
}
 
.example2 {
  border-bottom: solid 10px black;
}

.example1 {

border-bottom: solid 1px black;

}

.example2 {

border-bottom: solid 10px black;

}

※解説
線の太さを選択肢し、border-bottom:solid　〇〇　 black;
の〇〇に線の太さを記載し、線の太さを変更します。

○線の色

※サンプルコード表示結果

下線を引きます

※HTMLサンプルコード

<p class="example1">下線の色赤</p>
<p class="example2">下線の色青</p>

1 2	<p class="example1">下線の色赤</p> <p class="example2">下線の色青</p>

※CSSサンプルコード　　

.example1 {
  border-bottom: solid 1px red;
}
 
.example2 {
  border-bottom: solid 1px blue;
}

.example1 {

border-bottom: solid 1px red;

}

.example2 {

border-bottom: solid 1px blue;

}

※解説
線の色を選択肢し、border-bottom:solid　1px　〇〇;
の〇〇に線の色を記載し線の色を変更します。

蛍光ペンの様な下線

CSSのグラデーションプロパティで、蛍光ペンの様な下線を表現します。
※サンプルコード表示結果

下線を引きます

※HTMLサンプルコード　

<p class="example1">下線を引きます</p>
<p class="example2">下線を引きます</p>  
<p class="example3">下線を引きます</p>

下線を引きます

下線を引きます

下線を引きます

※CSSサンプルコード　　　　　　　　　　

.example1 {
  background: linear-gradient(transparent  70%, orange  70%);
}
 
.example2 {
  background: linear-gradient(transparent  50%, orange  50%);
}
 
 
.example3 {
  background: linear-gradient(transparent  0%, orange  0%);
}

.example1 {

background: linear-gradient(transparent 70%, orange 70%);

}

.example2 {

background: linear-gradient(transparent 50%, orange 50%);

}

.example3 {

background: linear-gradient(transparent 0%, orange 0%);

}

※解説
CSSのグラデーションプロパティ（linear-gradient）を指定し表示します。
ポイントは2つです。

①サンプルコードでorangeが指定されている箇所に、お好みの色を指定することで、お好みの色の線が表示されます。

②transparent、orenge（指定した色）の%指定で線の高さを指定します。
例1は、文字の下だけの高さに。
例2は文字の半分の高さに。
例3は、文字全体の高さに。
それぞれの％をあわせ、お好みの高さにカスタマイズすることができます。

下線に背景色をプラス

※サンプルコード表示結果

下線・背景色を引きます

※HTMLサンプルコード

<p class="example">下線・背景色を引きます</p>

1	<p class="example">下線・背景色を引きます</p>

※CSSサンプルコード　　　　　　　　　　　　　　

.example {
  color: black;
  background: pink;
  border-bottom: solid 3px red;
}

.example {

color: black;

background: pink;

border-bottom: solid 3px red;

}

※解説
下線と背景色を分けて指定し、より目立たせることができます。
backgroundにpink、 border-bottomの色をredに指定し表示してます。
各色にお好みの色を指定し表示してみてください。

2色の線を表示

※サンプルコード表示結果

下線を引きます。

※サンプルコードHTML

<h2>下線を引きます。</h2>

1	<h2>下線を引きます。</h2>

※サンプルコード　CSS

h2 {
  position: relative;
  border-bottom: 3px solid blue;
}
 
h2::after {
  position: absolute;
  content: " ";
  border-bottom: solid 3px red;
  bottom: -3px;
  width: 20%;
  display: block;
}

h2 {

position: relative;

border-bottom: 3px solid blue;

}

h2::after {

position: absolute;

content: " ";

border-bottom: solid 3px red;

bottom: -3px;

width: 20%;

display: block;

}

※解説
after疑似要素を使用します。
after疑似要素について詳しく知りたい方は下記を参考にして下さい。
https://www.asobou.co.jp/blog/web/before-after

線の右側の色を変えたいときには、h2 { position: relative; border-bottom: 3px solid blue;}のblueをお好みの色に変更して下さい。線の左側の色を変えたいときは、h2::after { position: absolute;　content: ” “;　border-bottom:solid 3px red;　bottom: -3px;　 width: 20%;　display: block;　}のredをお好みの色に、またwidthの％を変えることでredの線の長さを変更することができます。

ストライプの線を引く

※サンプルコード表示結果

ここに下線を引きます。

※サンプルコードHTML

<p>ここに<span class="example">下線を引き</span>ます。</p>

1	<p>ここに<span class="example">下線を引き</span>ます。</p>

※サンプルコードCSS

.example{ 
  position: relative;
  padding: 6px;
}
.example:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(-45deg, blue, blue 2px, white 2px, white 4px);
}

.example{

position: relative;

padding: 6px;

}

.example:after {

content: '';

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 8px;

background: repeating-linear-gradient(-45deg, blue, blue 2px, white 2px, white 4px);

}

※解説
after疑似要素を使用します。
after疑似要素について詳しく知りたい方は下記を参考にして下さい。
https://www.asobou.co.jp/blog/web/before-after

ストライプの角度、線の色もお好みで変えることができます。
.example:after　｛background: repeating-linear-gradient(-45deg, blue, blue 2px, white 2px, white 4px);｝の-45degを変更しストライプの角度を変える事ができます。
blueの箇所にお好みの色で指定することで、ストライプの線の色を変更できます。

リンクの下線を消す方法

※サンプルコード表示結果

下線消したい

※HTMLサンプルコード

<a href="#">下線消したい</a>

1	<a href="#">下線消したい</a>

※解説
aタグでリンクを作成すると上記の様な下線が表示されます。
これはaタグでリンクを作成する際、デフォルトで下線が表示されるルールとなっているからです。
つまり意図的に消さない限り下線が表示されます。
意図的に消すにはcssでaタグに対して、cssプロパティ「text-decoration: none;」を指定します。

※サンプルコード表示結果

下線消したい

※サンプルコードHTML

<a href="#">下線消したい</a>

1	<a href="#">下線消したい</a>

※サンプルコード　CSS　　

a {
  text-decoration: none;
}

a {

text-decoration: none;

}

まとめ

最後にポイントをまとめます。
下線を引く方法を3点、リンクの下線を消す方法1点を紹介しました。

1.方法1.「u」タグで下線を引く方法

2.方法2.HTMLで直接下線を引く方法

3.方法3.class名をつけてCSSで指定する。※1番オススメの方法

4.aタグにCSSで「text-decoration: none;」を指定し下線を消す方法

いかがだったでしょうか？
今回は、下線を引く方法・リンクの下線を消す方法を紹介しました。
下線を引くことは、文章の一部を目立たせ、サイト閲覧者に重要な部分をよりわかりやすくする為におこないます。
つまり、よりよいWEBサイトを作成するには、下線がかかせません！
サンプルコードもあるので各用途に合わせて、ぜひ活用してみてくださいね。