閉じる
閉じる

あまめも

【HTML】略語の正式名称を簡単に表示する方法

文字

こんにちは! あますた(@amaguristar)です。

  • 「略語を書く事あるけど一々(※1)とか書いて下の方に別で正式名称書くのめんどいな〜」

そんな時ありませんか? 略語を表すタグがありますよ。

 

<abbr>タグを使うと直ぐに解決

実際にとりあえず使ってみる。

例えば、HTMLについて書いた論文~~以下略~~

という様な文章があるとき、HTMLにカーソルを合わせると正式名称が表示されるように設定できます。

設定方法

設定方法はとても簡単。

<abbr title="正式名称">略語</abbr>

と掲載するだけ。上記例題の場合htmlは下記の様に記述してます。

例えば、<abbr title="Hyper Text Markup Language">HTML</abbr>について書いた論文~~以下略~~

注意点

使用するブラウザによっては、略文字に下線が引かれたりと表示方法が異なります。

  • 「常に同じ様に表示したい!」

って方は、cssを下記の様に設定して表示方法を統一しておくのも1つの対策方法です。

abbr {
    border-bottom: 1px dashed; /* 1pxのドットで文字の下に下線を引く */
    text-decoration: none; /* ブラウザによりフォントが装飾されるのでデフォルトの装飾をoffにする */
    cursor: help; /* カーソルを文字に合わせた時に形状を「?」にする */
}

下線の設定や、ホバーした際のカーソルの表示は好みでカスタムしてください。

まとめ

略語にマウスを合わせた時に正式名称を表示したい時は、<abbr>タグを使用する。

<abbr title="正式名称">略語</abbr>

注意点としては、ブラウザにより表示が異なるので統一したい場合はcssを設定する。

<acronym>という頭字語(各単語の頭文字をとって略したもの)を示すタグもありますが、HTML5では<abbr>に統一されたようです。

関連記事

  1. MarkdownのHタグにクラスを追加する簡単な方法

  2. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  3. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  4. サイトデザイン

    「サイトでキーワードを目立つ様に囲みたい!」そんな時はcssでク…

  5. 【HTML】ホームページから任意のファイルをダウンロードさせる方…

  6. 【基礎】「MySQL」を使い始めたのは良いのですがコマンドを忘れ…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る