HTMLではCSSを使わなくても、文字を強調したり、注釈を付け加えたりするタグがありますが、今回ご紹介するuタグもそのうちのひとつ。
しかしHTML5では、今まで使用されていた「下線」ではなく「非言語注釈」としての役割が新たに定義づけられました。
今回は、uタグの
・HTML5以前のuタグとの役割の違い
・uタグを使わずに下線を引く方法
について説明します。今まで通りの使い方は、既に非推奨となっていますのでここで新しくuタグの使い方を学んでいきましょう！
目次
uタグとは
uタグの読み方
uタグはそのまま「ユータグ」と読みます。uタグのuはunderline＝下線の頭文字です。
uタグの説明
uタグは以前まではunderlineの直訳の通り「下線」を引く要素として使用されていましたが、HTML4で一度廃止されました。しかしHTML5では、綴りの誤りやその他の注釈、中国語の単語を示すときに使用するよう再定義されています。
uタグで利用できる属性
uタグでは以下のグローバル属性のみが使用可能です。グローバル属性はHTMLの全要素で使用できる属性です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットを生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
uタグの基本的な使い方
uタグの使い方
まずはuタグの基本の使い方である、綴りのミスを指摘する使用用途を見てみましょう。uタグは再定義はされたものの、その見た目は再定義前と変わりませんそのため綴りミスなど、何かの間違いを指摘する際は、CSSで別途uタグを装飾する必要があります。
まずは装飾なしのuタグを見てみましょう。流星群は英語で”meteor swarm”と書きますが、meteorが『metor』になっている綴りのミスがあります。
See the Pen
uタグ基本 by rabbittyu (@rabbittyu)
on CodePen.
今度は綴りミスをわかりやすく指定できるように、CSSでuタグの表示を少し変更しました。CSS適用前は単なる下線でしたが、一般的に使用されているスペルミスの指摘のように、赤の波線になっています。
See the Pen
uタグ基本② by rabbittyu (@rabbittyu)
on CodePen.
uタグを使わずに下線を表示する方法
ではここでuタグを使用せずに、下線を引く方法について詳しくご紹介します。下線を引くにはHTMLのタグではなく、CSSのtext-decorationプロパティを使用します。
pタグで通常の文章を書き、下線を引きたい部分をspanタグで囲います。class属性に指定する名前を他の文章でも指定すれば、CSSも一つで済みます。
See the Pen
underline by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はuタグの新しく定義された使い方についてご説明しました。uタグ＝下線と認識されている方が殆どかと思いますが、最新版のHTML5では「注釈」という意味で再定義されました。
そのため以前のように文章に下線を引きたい場合は、その文章をspanタグで囲った後に、CSSでtext-decorationプロパティを使用しましょう。
参考文献：
MDN web docks <u>: 非言語的注釈（下線）要素
u要素・uタグとは
MDN web docks text-decoration
