こんにちは！ あますた(@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を設定する。