タイトル・URLをコピー
記事タイトルHTML/CSSで下線を引く方法+リンク下の下線の消し方。(サンプルコード付き)
記事URLhttps://digitor.jp/textbook/html-underline/
記事タイトルHTML/CSSで下線を引く方法+リンク下の下線の消し方。(サンプルコード付き)
記事URLhttps://digitor.jp/textbook/html-underline/
POINTこの記事をざっくり言うと
HTML で下線を引く方法がわかる。
HTMLにCSSを加え、実践的な下線を引く方法がわかり、カスタマイズできる様になる。
リンク下の不要な下線を消せる様になる。
こんにちは!
WEBページを見ていると「どうやってキレイな下線を作成しているんだろう?」
「自分も下線を引けるようになると制作の幅が広がるんだけどな・・」
「リンク下の下線を消したいけど、消す方法がわからない・・」
そんなお悩みを抱えた、初心者WEBサイト制作者のかたも多いのではないでしょうか?
HTML/CSSを使用し下線を引けるようになると、目次などを目立たせる事ができ、より見やすいWEBサイトを作成できるようになります。
加えて、リンク下の下線を消せるようになると、オリジナリティのあるWEBサイト制作ができるようになります。
今回は、初心者のかた向けに、下線の引き方・リンク下の不要な線の消し方を、サンプルコード付きで詳しく解説していきたいと思います。
HTML/CSS下線とは
下線は文章を目立たせる。
WEBサイトを見ているとよくみかける下線。
下線を引くことの目的は、文章の一部を目立たせ、サイト閲覧者に重要な部分をよりわかりやすくする為です。
つまり、良いWEBサイトを制作するには下線の作成はかかせません!
それでは、下線の作成方法を説明していきます。
下線の書き方(基本編)
下線を引く方法は3種類あります。
1番オススメの方法は3番目で解説します。時間がない方は3番目だけ見て下さい。
各方法の、メリット・デメリットを含め順番に解説していきます。
方法1.<u>タグで下線を引く方法
<u>タグを使用し下線を引きます。
※サンプルコード表示結果
uタグで囲んだ中に下線が引かれます。
※HTMLサンプルコード
|
<u>uタグで囲んだ中に下線が引かれます。</u> |
※解説
下線を引きたい文章を<u>〜</u>で囲みます。
簡単に引くことができますが、フォントや色の線も変える事ができません。
現在はCSSで下線を引くことが推奨されており、<u>タグは非推奨となっています。
方法2.HTMLで直接下線を引く方法
HTMLコードに直接CSSを記入します。
※サンプルコード表示結果
※HTMLサンプルコード
|
<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> |
※CSSサンプルコード
|
.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; } |
※解説
どの線にしたいのかを選択肢し、border-bottom:〇〇 1px black;
の〇〇に線の種類を記載し、線の種類を変更します。
solid(実線)double(二重線)dotteed(点線)dashed(破線)
○線の太さ
※サンプルコード表示結果
※HTMLサンプルコード
|
<p class="example1">下線を引きます</p> <p class="example2">下線を引きます</p> |
※CSSサンプルコード
|
.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> |
※CSSサンプルコード
|
.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%); } |
※解説
CSSのグラデーションプロパティ(linear-gradient)を指定し表示します。
ポイントは2つです。
①サンプルコードでorangeが指定されている箇所に、お好みの色を指定することで、お好みの色の線が表示されます。
②transparent、orenge(指定した色)の%指定で線の高さを指定します。
例1は、文字の下だけの高さに。
例2は文字の半分の高さに。
例3は、文字全体の高さに。
それぞれの%をあわせ、お好みの高さにカスタマイズすることができます。
下線に背景色をプラス
※サンプルコード表示結果
※HTMLサンプルコード
|
<p class="example">下線・背景色を引きます</p> |
※CSSサンプルコード
|
.example { color: black; background: pink; border-bottom: solid 3px red; } |
※解説
下線と背景色を分けて指定し、より目立たせることができます。
backgroundにpink、 border-bottomの色をredに指定し表示してます。
各色にお好みの色を指定し表示してみてください。
2色の線を表示
※サンプルコード表示結果
※サンプルコードHTML
※サンプルコード 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; } |
※解説
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> |
※サンプルコード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); } |
※解説
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
|
a { text-decoration: none; } |
まとめ
最後にポイントをまとめます。
下線を引く方法を3点、リンクの下線を消す方法1点を紹介しました。
1.方法1.「u」タグで下線を引く方法
2.方法2.HTMLで直接下線を引く方法
3.方法3.class名をつけてCSSで指定する。※1番オススメの方法
4.aタグにCSSで「text-decoration: none;」を指定し下線を消す方法
いかがだったでしょうか?
今回は、下線を引く方法・リンクの下線を消す方法を紹介しました。
下線を引くことは、文章の一部を目立たせ、サイト閲覧者に重要な部分をよりわかりやすくする為におこないます。
つまり、よりよいWEBサイトを作成するには、下線がかかせません!
サンプルコードもあるので各用途に合わせて、ぜひ活用してみてくださいね。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルHTML/CSSで下線を引く方法+リンク下の下線の消し方。(サンプルコード付き)
記事URLhttps://digitor.jp/textbook/html-underline/
記事タイトルHTML/CSSで下線を引く方法+リンク下の下線の消し方。(サンプルコード付き)
記事URLhttps://digitor.jp/textbook/html-underline/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。