htmlで下線を引くのにuタグはNG！spanタグかCSSで「text-decoration: underline;」で指定しよう

無料ブログやWordPressでサイト運営を行っている皆さん、文章に下線(アンダーライン)を引きたくなることってありますよね？

その際、恐らく以下の画像のような記事上に出ている下線マークを押して、アンダーラインを引いていると思います。

しかし、下線部分のソースコードを見たときにhtmlタグで「<u>〜</u>」と書かれている場合は”要注意“です。

html5では廃止が予定されており、既に非推奨な書き方なのです。

html5から下線タグとして廃止予定の<u>、変わりに<span>タグ(or CSS)で「text-decoration: underline;」と指定しよう！

当サイトはCMSのWordPressを利用しており、テーマにStinger6を利用しています。

※現在はLuxeritasというAMP等色々対応している高機能無料テーマを使用しています。

恐らく使っているテキスト記述用のプラグイン(TinyMCE Advanced)が適用してくれているからだと思いますが、当サイトではビジュアルエディタ上の下線ボタンを押して、しっかり「<span style=”text-decoration: underline”>～</span>」と記述してくれます。

無料ブログの場合デフォルトのエディタの下線ボタンを押すと<u>タグを吐き出している可能性がある！

注意して頂きたいのが、アメブロやFC2、はてなブログといった無料ブログを利用している場合。

恐らくビジュアルエディタがデフォルトであると思いますが、<span>タグあるいはCSSによる「text-decoration: underline;」の指定をしてくれていないケースも。(多分アメブロ)

ハイパーリンクの下線を消したい場合は、「text-decoration: none;」と指定すればOK

ここまでhtml・cssで文字に下線を引きたい時の書き方について述べてきましたが、逆にリンク等のデフォルトで入っている下線を消したい場合もあると思います。

それもtext-decorationで簡単に消すことができます。

<a href=""><span style="text-decoration: none;">リンク先</span></a>

こんな感じで記述すれば、リンクの下線が消えます。

自分のブログを確認して、htmlの<u>タグで下線を引いている場合は今すぐ<span>タグかCSSで「text-decoration: underline;」と指定しましょう！

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

posted with カエレバ

狩野 祐東 SBクリエイティブ 2016-10-27

Amazon

楽天市場

こんなプログラミングにおける悩みを色々抱えていて、フロントエンドエンジニアになりたい方、TechAcademyのオンラインブートキャンプで勉強をするのはいかがですか？

本を読んで独学するより、遥かに簡単に技術を身につけることができます。

参考：WordPress(PHP)を挫折せずにできるだけ独学で勉強する方法・コツをまとめる