こんにちは！侍エンジニアブログ編集部のシホです！
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.
こんな風に簡単にできます。ただし、HTMLは基本的に構造やページの内容を示すものなので、装飾をする場合はCSS（スタイルシート）で記述しましょう。
CSSで下線をひく方法
下線を引く
CSSでは「text-decoration」プロパティに「underline」を指定して下線を引くことができます。
See the Pen JvOXBd by Shiho Sakai (@shiho-sakai) on CodePen.
下線の種類・太さ・色を変える
下線の種類・太さ・色は「border-bottom」プロパティに半角スペースであけて「種類・太さ・色」を指定することで変えることができます。
太さはピクセル、色は英語表記またはカラーコードで指定してください。
See the Pen deZMxv by Shiho Sakai (@shiho-sakai) on CodePen.
リンクの下線を消す
最後にリンクの下線を消す方法を説明します。HTMLでリンクを作る方法はこちらをご覧ください↓
リンクを作ると、次のサンプルのようにリンク文字の下に下線が引かれます。
See the Pen VxpeVy by Shiho Sakai (@shiho-sakai) on CodePen.
その下線を消したいときは、「text-decoration」プロパティに「none」を指定します。noneは何も装飾しませんよという意味です。
See the Pen jxarqR by Shiho Sakai (@shiho-sakai) on CodePen.
WEBサイト製作スキルを身につけて自由に働きたい方は
HTMLやCSSを学んでいる人の中には、その先にフリーランスとして案件を獲得し、自由な生活をしたいと考えている人もいるのではないでしょうか？
そんな方はHTMLやCSSのようなマークアップ言語だけでなく、JavaScriptやPHPといったいわゆる「プログラミング言語」も扱えるようになる事をオススメします。
というのも、HTMLやCSSだけの案件は数が少ないことに加え、単価も安いものが多いからです。しかし、+＠でプログラミングスキルがあれば、好条件な案件を継続的に獲得しやすくなります。
かといって、プログラミング言語の習得はHTMLやCSSと比べて難易度が一気に上がるため、独学だと挫折しがちなもの。そこで、先も見据えている人はプログラミングスクールの利用をしてしっかりスキルを身に付けるのが良いでしょう。
弊社「侍エンジニア」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。
少しでも興味を持った方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！
まとめ
いかがでしたでしょうか。HTMLで<u>タグを使うと簡単に文字に下線が引けますが、装飾はできるだけCSSで記述するようにしましょう！ぜひ実践してみてください！
