2018年06月29日

言葉の上にマウスカーソルを乗せると説明が表示されるやつ

ブログで記事を書いていて、文章の中に使っている分かりにくい言葉などに、ちょっとした説明を加えたいときがあります。

例えば、
・Win10メール(Windows 10 標準のメールアプリのこと。)
・クグる(Web検索するという意味。検索は Google とは限らないので「ググる」ではない。)
・アプリ(最近はパソコンでもソフトというよりアプリということが多いので、アプリと表記することにしました。)
・・・みたいな。

文章中に上の例のようにカッコ書きで説明したこともありますが、文章自体が読みにくくなりそうですし、記事ごとに毎回説明を加えるのかということもあり、あまり良くありません。

こういうのは、どこかのサイトで見かけたことのある「言葉の上にマウスカーソルを乗せると説明が表示されるやつ」を使うのがよさそうです。

こんな感じのやつです。↓
SC18629143925.png

調べてみると、これは「ツールチップ」と呼ばれるものらしく、やり方はとても簡単でした。
こういうコードを書くだけです。
<span title="説明文">"説明対象の言葉"</span>

サンプルを作ってみます。

 「 Win10メールではこのように設定します。」

「Win10メール」の文字の上にマウスカーソルを乗せると、説明が表示されます。
コードは、↓ このように書いています。
<span title=Windows10標準のメールアプリのこと。>Win10メール</span>

ただ、これだとその言葉に説明があることが分からないので、アンダーラインを加えてみます。
「Win10メール」を「<ins>」と「</ins>」で囲みます。

 「 Win10メールではこのように設定します。」

コードは、↓ このようになります。
<span title=Windows10標準のメールアプリのこと。><ins>Win10メール</ins></span>


あとは、コードのサンプルをメモを管理するソフトなどに保存しておけば、使いたいときに簡単に転用できます。

この機能の応用として、単語帳のような暗記物のページが簡単に作れそうです。
もっと便利なスマホアプリもあるので、そっちを使った方がいいでしょうけど。




にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/7838734

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

ブログ内を検索
ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール