【HTML入門】<u>タグで文字に下線を引くのをおすすめしない理由

こんにちは!侍エンジニア塾ブログ編集部のシホです!

HTMLで文字に下線(アンダーライン)を引く方法は<u>タグを使えばとても簡単なのですが、下線の太さや色を変える場合に少し戸惑いませんか?

今回はHTMLで文字に下線を引く方法に加え、CSSで装飾する方法を解説したいと思います。CSSを使えば下線の種類・太さ・色を一気に指定することができ、とても便利です!

ぜひ参考にしてみてください。

HTMLがそもそもなにかわからない方はこちらをご覧ください↓

HTMLで下線をひく方法

HTMLでは文字を強調させたいときに、 HTMLで下線を引く のように文字の下に下線を引くことができます。<u>タグを使うことで、簡単に下線を引くことができます。

【<u>タグの使い方】

uは「Under line(下線)」の略です。<u> ~ </u>で下線を引きたいテキスト部分を囲みます。

See the Pen odoxGj by Shiho Sakai (@shiho-sakai) on CodePen.0

こんな風に簡単にできます。ただし、HTMLは基本的に構造やページの内容を示すものなので、装飾をする場合はCSS(スタイルシート)で記述しましょう。

CSSで下線をひく方法

下線を引く

CSSでは「text-decoration」プロパティに「underline」を指定して下線を引くことができます。

See the Pen JvOXBd by Shiho Sakai (@shiho-sakai) on CodePen.0

下線の種類・太さ・色を変える

下線の種類・太さ・色は「border-bottom」プロパティに半角スペースであけて「種類・太さ・色」を指定することで変えることができます。

太さはピクセル、色は英語表記またはカラーコードで指定してください。

See the Pen deZMxv by Shiho Sakai (@shiho-sakai) on CodePen.0

リンクの下線を消す

最後にリンクの下線を消す方法を説明します。HTMLでリンクを作る方法はこちらをご覧ください↓

リンクを作ると、次のサンプルのようにリンク文字の下に下線が引かれます。

See the Pen VxpeVy by Shiho Sakai (@shiho-sakai) on CodePen.0

その下線を消したいときは、「text-decoration」プロパティに「none」を指定します。noneは何も装飾しませんよという意味です。

See the Pen jxarqR by Shiho Sakai (@shiho-sakai) on CodePen.0

WEBサイト製作スキルを身につけて自由に働きたい方は

HTMLやCSSを学んでいる人の中には、その先にフリーランスとして案件を獲得し、自由な生活をしたいと考えている人もいるのではないでしょうか?

そんな方はHTMLやCSSのようなマークアップ言語だけでなく、JavaScriptやPHPといったいわゆる「プログラミング言語」も扱えるようになる事をオススメします。

というのも、HTMLやCSSだけの案件は数が少ないことに加え、単価も安いものが多いからです。しかし、+@でプログラミングスキルがあれば、好条件な案件を継続的に獲得しやすくなります。

かといって、プログラミング言語の習得はHTMLやCSSと比べて難易度が一気に上がるため、独学だと挫折しがちなもの。そこで、先も見据えている人はプログラミングスクールの利用をしてしっかりスキルを身に付けるのが良いでしょう。

弊社「侍エンジニア塾」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日

少しでも興味を持った方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料体験レッスンの
予約はこちら

まとめ

いかがでしたでしょうか。HTMLで<u>タグを使うと簡単に文字に下線が引けますが、装飾はできるだけCSSで記述するようにしましょう!ぜひ実践してみてください!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★