HTMLのツールチップ(title属性)で改行させる方法を解説!

HTMLのツールチップ(title属性)で改行させる方法を解説します。HTMLのtitle属性は改行してコードを書くと適応されるのですが、任意の場所で改行させる方法について今回は紹介します。またtitle属性とはどのようなものかについても簡単に解説します。

コンテンツ [表示]

  1. 1HTMLのツールチップ(title属性)とは?
  2. 2HTMLのツールチップ(title属性)で改行させる方法
  3. 2.1HTMLのみを用いた場合
  4. 2.2JavaScriptを用いた場合
  5. 3まとめ

HTMLのツールチップ(title属性)とは?

まずHTMLのツールチップ(title属性)になじみがない人のために簡単ではありますが、解説します。

title属性は、マウスホバーした際にポップアップで設定したテキストを表示してくれる属性でです。

それでは実際にサンプルコードを用いて挙動を見てみましょう。

このように「タイトル」にホバーすると「これはタイトルです。」とポップアップが表示されることが分かります。

これがtitle属性の役割です。更にtitle属性を掘り下げて詳細を知りたい方は下記を参考にしてみて下さい。

あわせて読みたい
title属性
HTMLの要素にtitle属性を設定するとHTMLの要素の補足情報を設定し、カーソルを合わせたときにツールチップとして表示されます。

今回はこのtitle属性で改行させる方法について解説します。

HTMLのツールチップ(title属性)で改行させる方法

それではHTMLのツールチップ(title属性)で改行させる方法について解説します。
まず普通にtitle属性の中で改行して書いてみましょう。

実際にサンプルコードを用いて挙動を見てみましょう。
 

このようにブラウザ上でも改行されていることが分かります。しかしこれではtitleが長くなり、いくつも改行部分があると、とても見にくいコードになってしまいます。

そこで今回はHTMLとJavaScriptで任意の場所で改行する方法について2パターン紹介します。

HTMLのみを用いた場合

HTMLのみの場合、改行を表す特殊文字である
を用います。

改行したい場所に
を挿入するだけで改行することが出来ます。

それでは実際にサンプルコードを用いて挙動を見てみましょう。

このようにtitle属性が付与されている「これはタイトルです。」が改行されていることが分かります。

JavaScriptを用いた場合

では次にJavaScriptを用いた場合について解説します。

まずtitle属性を付与したい要素にidかclass属性を追加します。そしてその要素をJavaScriptのgetElementByIdquerySelectorなどを用いて読み取ります。

次に読み取った要素にtitle属性を付与するために.titleをつけ、title属性に挿入する文章を書きます。そして改行したい場所には\nをつけます。

以上がJavaScriptを用いて改行させる方法です。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにtitle属性の文章が改行されていることが分かります。

まとめ

いかがでしたでしょうか?

title属性は要素のヒントとなるテキストを指定し、用いることでユーザーフレンドリーになります。

しかし、title属性に書く文章が長すぎたり、多用しすぎると見にくくなるというデメリットもあります。

その辺りは適宜調整してぜひ使ってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次