閉じる
閉じる

あまめも

【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. 「Git」を使ってみてコマンドを忘れるのでメモ2

  2. ファイルの管理がめんどくさくなってきたから「Git」使ってみた!…

  3. 【Mac】MAMPのMySQLを使ってコマンド入力する為のパスの…

  4. GitのリモートリポジトリをSSH接続で独自サーバに作成してみた…

  5. 文字をマーカーのように強調するCSS設定。個人用まとめです。

  6. gitのリモートリポジトリをDropboxで作成してpushする…

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

  1. シードル

Twitter

ページ上部へ戻る