用語集ページの作り方

ホームページで使用する専門用語について、簡単にでも用語集のページを作成しておくことをおすすめします。

ただし、用語集の専門サイトでない限りは、キーワードごとに個別ページを作成する必要はありません。「50音順＋英数字」で用語の一覧を作成し、数ページ程度の用語集のページを作成しておくとよいでしょう。

用語集に掲載されているキーワードを見れば、どのカテゴリーに属するサイトなのかが、ひと目で分かるようにしておくことをおすすめします。

例えば、「TLD」や「DNSレコード」、「ICANN」、「レジストラ」などの用語が並んでいた場合、それはドメインに関するサイトであると分かります。

けれども、これに「SEM」や「PPC」、「CVR」などのマーケティング関連の用語も並んでいた場合、どういったカテゴリーに属するサイトなのか、ピンボケしてよく分からなくなってしまいます。

あまり関係のないキーワードまで掲載してしまうと、サイトの属性にブレが生じてしまうため、自サイトの属するカテゴリーにぴったり合致した用語のみを厳選して掲載するとよいでしょう。

用語を<dt><dd>タグで定義し、<dl>タグでリスト化

用語集のページを作成する際、まずは定義する用語を<dt>タグの項目で設定し、その説明文を<dd>タグに記載してセットにします。

<dt>用語1</dt>
<dd>説明文</dd>

使い方の詳細はこちら。→ <dt>、<dd>タグの使い方

このセットを、それぞれの用語ごとに作成します。

<dt>用語1</dt>
<dd>説明文</dd>

<dt>用語2</dt>
<dd>説明文</dd>

最後に、これらの用語セットを説明リストタグの<dl>でリスト化して完成です。

<dl>
  <dt>用語1</dt>
    <dd>説明文</dd>
  <dt>用語2</dt>
    <dd>説明文</dd>
  <dt>用語3</dt>
    <dd>説明文</dd>
</dl>コピーボタンコピーチェックボタン

この<dl>タグについてですが、HTML4.01のDTDの仕様書には「definition list（定義リスト）」との記載があります。

■definition list（定義リスト）

HTML4.01のDTDの「DL」

そのため、以前までは<dl>が「定義リスト」、<dt>が「定義する言葉」、<dd>が「定義の説明文」の意味だったと思いますが、HTML5での<dl>タグは「description list（説明リスト）」との記載に変わっています。

■description list（説明リスト）

HTML5の「dl」

おそらく、定義タグには<dfn>もあるため、<dl>タグについては「説明リストタグ」としてリニューアルしたのではないかと推測しております。

<dt>の項目に定義タグ<dfn>も併用する方法

定義の<dfn>タグについては、主に段落などの文章中で使用する用途のため、用語集としてリスト化する際には使いずらいです。そのため、上記のように説明リストの<dl>タグを使用することをおすすめします。

ただし、定義タグの<dfn>については、説明する用語を記載する<dt>タグの箇所で併用することができます。

例えば、以下のような場合、<dt>タグのみの場合ですと、定義する用語にNASDAQなどの関係ない語句も含まれますが、<dfn>タグで囲むことにより、定義する用語を明確に示すことができます。

<dl>
<dt><dfn>Apple</dfn>（あっぷる）、AAPL (NASDAQ) </dt>
<dd>iPhoneやMacを作っている米国の大手IT企業。</dd>
</dl>

用語集の<dt>の項目に、読み方や品詞、関連記事へのリンクなども設定している場合、定義したい用語を<dfn>タグで囲んで明確にすることをおすすめします。

<dl>
  <dt><dfn>用語1</dfn>（読み方1）、名詞</dt>
    <dd>説明文</dd> 
  <dt><dfn>用語2</dfn>（読み方2）、形容詞</dt>
    <dd>説明文</dd>
  <dt><dfn>用語3</dfn>（読み方3）、動詞</dt>
    <dd>説明文</dd>
</dl>コピーボタンコピーチェックボタン

加えて、<dfn>タグにはid属性も指定しておくと、他から参照する際に便利です。

<h2>あ行</h2>
<dl>
  <dt><dfn id="amazon">Amazon</dfn>（あまぞん）</dt>
    <dd>米国のオンライン・ショッピングモール。</dd>
  <dt><dfn id="ameba">Ameba</dfn>（あめーば）</dt>
    <dd>日本の会社。</dd>
  <dt><dfn id="apple">Apple</dfn>（あっぷる）</dt>
    <dd>iPhoneやMacを作っている米国の大手IT企業。</dd>
</dl>コピーボタンコピーチェックボタン

例えば、「Apple」の項目にリンクする場合、<a href="#apple">Apple</a>のようにリンクを作成して参照することができます。

その他、「あ行」などについては、見出しタグで囲んでおくとよいでしょう。

略語を明示的に示す<abbr>タグの使い方

用語には、英字の略語や平仮名、カタカナ、漢字など様々な種類がありますが、世間一般で使われている用語を掲載することをおすすめします。

例えば、「CSS」と「スタイルシート」、「Cascading Style Sheets」、「しーえすえす」はほぼ同じ意味ですが、Google Trendで確認すると、一般的には「CSS」が使われることが多いです。

キーワード「CSS」の比較

このような場合、「CSS」で用語を定義することをおすすめします。

また、「CSS」に対して、「Cascading Style Sheets」は略語の正式名称となり、「スタイルシート」は日本語での翻訳、「しーえすえす」は読み方の関係になります。

この場合、それが略語であることを示す<abbr>タグがあるため、以下のようにtitleタグに正式名称を付けた上で記載しておくことをおすすめします。

<abbr title="Cascading Style Sheets">CSS</abbr>コピーボタンコピーチェックボタン

このように記載することで、その用語が略語であると明示することができます。また、サイト上で略語にマウスをポイントすると、titleタグに記載された正式名称が表示されます。

abbrタグのtitle部分の表示

ただし、略語でない場合は設定する必要はなく、むしろ、スクリーンリーダーでの読み上げなどを考えますと、全ての略語にtitleを設定するとわずらわしくなるので注意しましょう。

また、以下のようにしてしまうと、どういった形での略語なのかが不明です。

<abbr title="スタイルシート">CSS</abbr> → NG

titleタグには、英語なら英語、日本語なら日本語で、頭文字をとった略語が明確に分かる形で記載する必要があります。

この<abbr>タグは、略語を表示するためのタグのため、用語を定義する機能はありません。定義もする場合には、<dfn>タグも併用して以下のように使用します。

<dl>
<dt><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>（しーえすえす） </dt>
<dd>サイトのデザインなどを指定するファイルのこと。</dd>
</dl>コピーボタンコピーチェックボタン

ちなみに、この<dfn>は「definition」（定義） 、<abbr>は「abbreviation」（省略形）を表すHTMLタグとなっています。

用語集に50音順の索引リストを設定する方法

用語集の作成が完了しましたら、上部などの分かる箇所に索引項目を設定しておきましょう。

いくつかのパターンがありますが、一般的には、「50音順のみ」、もしくは「50音順＋英数字」の形が多いです。50音順の「あ～わ行」とアルファベット26文字の両方を並べているサイトもありますが、スペースをとりますので、どちらか一方にするか、ページを分けるなりして対応することをおすすめします。

当サイト内では、マウスでポイントしたらリストが表示されるようにしています。

マウスオーバーによるリストメニューの表示

この設定方法は以下のようになります。

■HTMLのサンプル

まずは、<ul><li>のなかに<ul><li>を入れます。

リンク先については、<h2 id="a">あ行</h2>などとid属性を指定して「#a」などでリンクします。

<ul id="sample">
  <li><a href="#a">あ</a>
    <ul>
      <li><a href="#i">い</a></li>
      <li><a href="#u">う</a></li>
      <li><a href="#e">え</a></li>
      <li><a href="#o">お</a></li>
    </ul>
  </li>
  <li><a href="#ka">か</a>
    <ul>
      <li><a href="#ki">き</a></li>
      <li><a href="#ku">く</a></li>
      <li><a href="#ke">け</a></li>
      <li><a href="#ko">こ</a></li>
    </ul>
  </li>
</ul>コピーボタンコピーチェックボタン

掲載している広告によっては、リスト表示で隠れてしまうと規約違反になってしまうこともあるため、よく確認しておくことをおすすめします。

■CSSのサンプル

こちらのCSSも<head>タグの最後あたりに入れておきます。

<style>
#sample {text-align: center;padding: 0;margin: 18px 0 18px 0;}
#sample li {display:inline-block;list-style: none;color:#000053;
background-color:#fff;margin: 0;position: relative;}
#sample li a {margin:0;border:1px solid #ccc;padding:2px 18px;
font-weight: normal;color: #12c;display: block;text-decoration: none;}
#sample li ul li a {margin:0;border-width:0 1px 1px 1px;}
#sample li a:hover {padding:2px 18px;display: block;
color: #fff;text-decoration: none;background-color: #039;}
#sample li{width:15%;}
#sample li ul{display: none;}
@media screen and (min-width: 768px) {
#sample li:hover > ul {display: block;}
#sample ul {display: none;position: absolute;top: 100%;
left: 0;z-index: 1;padding: 0;margin:0;}
#sample {text-align:left;}
#sample li{width:auto;margin: 0;}
</style>コピーボタンコピーチェックボタン

スマホではマウスを使用しないため、リスト表示は無効にしています。

あるいは、以下のようにJavaScriptを使用する際も、メディアクエリを使用すれば、スマホでは表示させず、PCのみで表示させることができます。

<script>
const mediaQuery = window.matchMedia("(min-width: 768px)");
if (mediaQuery.matches) {
const glossary = document.querySelectorAll('#sample li');
glossary.forEach(function (element) {
element.addEventListener('mouseover', function () {this.querySelector('ul').style.display = 'block';});
element.addEventListener('mouseout', function () {this.querySelector('ul').style.display = 'none';});
});
}
</script>コピーボタンコピーチェックボタン

大規模な用語集のサイトでしたら、用語ごとに個別ページを作成するのがよいと思いますが、通常のホームページの場合は、上記のような１ページのみの簡単なページだけでも作成しておくとよいでしょう。

トップページ　⁄　作り方　⁄　用語集ページの作り方
関連ページ