記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

下線の作成方法、リンクの下線の消し方を初心者の方向けに紹介。基本的な下線の作成方法に加えて、応用編の線の種類、色、を変えるカスタマイズ方法も紹介。全てサンプルコードが付いているので、実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

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

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

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

HTML/CSS下線とは

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

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

下線の書き方(基本編)

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

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

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

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

※HTMLサンプルコード            

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

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

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

ここに下線を引きます。

※HTMLサンプルコード               

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

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

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

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

ここに下線を引きます。

※HTMLサンプルコード
              

※CSSサンプルコード

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

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

下線のカスタマイズ方法(応用編)

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

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

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

○線の種類

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

下線を引きます。solid

下線を引きます。double

下線を引きます。doted

下線を引きます。dashed

※HTMLサンプルコード

※CSSサンプルコード

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

○線の太さ

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

下線を引きます

下線を引きます

※HTMLサンプルコード

※CSSサンプルコード                    

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

○線の色

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

下線を引きます

下線を引きます

※HTMLサンプルコード

※CSSサンプルコード  

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

蛍光ペンの様な下線

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

下線を引きます

下線を引きます

下線を引きます

※HTMLサンプルコード 

※CSSサンプルコード          

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

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

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

下線に背景色をプラス

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

下線・背景色を引きます

※HTMLサンプルコード

※CSSサンプルコード              

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

2色の線を表示

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

下線を引きます。

※サンプルコードHTML

※サンプルコード CSS

※解説
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

※サンプルコードCSS

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

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

※サンプルコードHTML

※サンプルコード CSS  

まとめ

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

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

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

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

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

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

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。