HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】
初心者向けにHTMLで文字(テキスト)にアンダーラインを付ける方法を解説しています。下線をつけることで文章が読みやすくなり、目立たせることができるはずです。難しい知識は必要ないので、HTML初心者でもぜひ覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事では、HTMLで文字(テキスト)にアンダーラインを付ける方法を解説します。
アンダーラインを付ける方法を利用して見ている人に訴えたい内容を強調することが可能です。
アンダーラインは下線とも言いますが、下線の使い方を活用することで、コンテンツの内容が伝わりやすくなります。
目次
アンダーラインを付けるタグとその書き方
アンダーラインの効果
アンダーラインは日本語でいうと下線です。
文字通り表示したテキストの下に下線を引くことができます。
アンダーラインをつけることで、見出しの印象を強くしたり、下線を引くことで文中の重要な単語を強調したりすることができます。
書き方
アンダーラインはタグを追加するだけで簡単に記述できます。
<u>アンダーラインが引かれます。</u>
このようにするとフォントと同じ色のアンダーラインが引かれます。
<u>タグは、<u>内の文字列にアンダーラインを引くという意味のタグなので、見出しなどにもアンダーラインを引くことができます。
<u><h1>見出しにアンダーラインが引かれます。</h1></u>
このようにすると、見出しの下にアンダーラインが引かれます。
uタグの装飾方法
<u>タグでも確かに線は引けるのですが、フォントと同じ色の線で太さなどは変えることができません。
そのため実際のWebデザインで使用するには少し不自由を感じます。
そこでアンダーラインを引く時に使用されるのが、spanタグです。
spanタグとは
spanタグ自体に特別な意味はありません。
つまり、spanタグを利用したからといって表示上変化は起こりません。
では、spanタグにはどのような利用法があるかというと、spanタグで囲まれた部分をインライン要素としてグループ化することが可能です。
<span>インライン要素としてグループ化される</span>
インライン要素とは、文章が記載されている部分のみを範囲指定できます。
グループ化とは、指定した内容をひとまとめで認識させることです。
HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン
HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン
サンプルコード
<span style="border-bottom: solid 1px red;"> アンダーライン１行目<br> アンダーライン２行目 </span>
解説
span で、アンダーライン１行目とアンダーライン２行目という文字列をインライン要素としてグループ化しています。
style=”border-bottom: solid 1px red;では、赤いアンダーラインを実装しています。
実行結果
実際に書いてみよう
それでは実際にアンダーラインを記述していきましょう。
uタグの例
まずuタグですが上に挙げた例と同じように文字をuタグで加工するだけで実現できます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<u>アンダーラインが引かれます。</u>
</body>
</html>
解説
<u>アンダーラインが引かれます。</u>でアンダーラインを引いた状態の文字列にしています。
実行結果
spanタグの例
次にspanタグですが、少し太めのアンダーラインを引いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<span style="border-bottom: solid 5px red;">アンダーライン</span>
</body>
</html>
解説
<span style=”border-bottom: solid 5px red;”>アンダーライン</span>で、アンダーラインの部分に太い赤線が表示されています。
5pxを指定することで太さが5pxというサイズの太めの線になりました。
実行結果
まとめ
今回はHTMLでテキストにアンダーラインをつける方法について解説していきました。
書くと分かるように、とても簡単にアンダーラインを引くことができたと思います。
また、spanタグではstyle指定の他にも様々なプロパティを設定することができるので気になる方は調べてみてください。
HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。 |
AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。
小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。
基幹システム移管用データコンバートシステム。
小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
