閉じる
閉じる

あまめも

【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. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  2. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  3. [甘]ブログに関連記事を追加しようと思って「WordPress …

  4. WordPressで<div>の様なHTMLタグを表…

  5. [甘]とりあえず、グローバルメニューの作成完了?

  6. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

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

  1. スシロー外観

Twitter

ページ上部へ戻る