[30] 定義語を示す dfn を、abbr や dt と一緒に使おう

最終更新日:-0001年11月30日  (初回投稿日:2012年01月12日)

<dfn>は、定義語を示す要素です。
定義語とは、ある用語を「xxxとはzzzzです」って説明する文章の中で、その「用語」(今の例ではxxx)のことを「定義語」といいます。<dfn>はそれをマークアップしてあげる要素です。

定義語が略語の場合は、前回の<abbr>(略語を示す要素)を<dfn>の中に仕込みます。
また、ずいぶん前に出てきた<dt>(記述リストのタイトルの要素)が定義語である場合は、<dt>の中に今回の<dfn>を仕込んで使います。(詳しくはこのあと説明します。)

使用する要素 <dfn> 〜 </dfn>

「dfn」は「definition」の略。definitionは「定義語」という意味の名詞です。

<dfn>を使ってみましょう

<dfn>はブラウザのデフォルトで、イタリックで表示されます。

まずはサンプルを見てみましょう。

HTMLは、HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。

イタリックの部分をロールオーバーで、正式名称(略する前のコトバ)が表示されるのも略語野要素<abbr>と同じですね。

ソースはこちらです。

<p>
<dfn title="HyperText Markup Language">HTML</dfn>は、HyperText Markup Languageの頭文字で、Webページを記述するため
のマークアップ言語。文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。
</p>

定義語(このサンプルでは「HTML」って語)を<dfn></dfn>で囲んでます。
そして title属性で用語の正式名称を書いてます。<dfn>要素に使うtitle属性は、このように定義語の正式名称を書く事になってるそうです。

<dfn>を使うときのお約束事が2つあります。
・その定義語の定義(説明文)が必ず必要です(当たり前ですがね)。
・また、その定義は<dfn>がある親要素(たぶんpとかdlとかsectionとか<dfn>が入ってる要素)の中に入ってなくちゃいけません。(遠くにあったら意味わからんから、一緒にしとけ…ってことでしょうね。)

<dfn>の中に<abbr>を入れてみよう

前回やった<abbr>は、略語を表す要素でしたね。
定義語が略語だったら、<abbr>を仕込んで略語である事を示します。

ソースはこんなふうに、<dfn>の内側に<abbr>を仕込みますよ。

<p>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>は、HyperText Markup Languageの頭文字で、
Webページを記述するためのマークアップ言語。文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。
</p>

このソースでは<abbr>title属性を使っていますね。
このように<dfn>の中に<abbr>だけが子要素として入ってる場合、<abbr>の title属性の値をこの用語の正式名称にします。(<dfn>でなく<abbr>にtitle属性をつけるってこと。)

上のソースをプレビューするとこんなかんじ。

HTMLは、HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。

定義語の「HTML」に注目。「イタリック」に「下線」もついていますね。「下線」は略語であることを示す<abbr>要素によって付くものでしたので、「定義語かつ略語」って表示です。ロールオーバーすると正式名称も出ますね。

<dfn>を<dl>(用語解説のリスト)の中で使ってみよう

dl要素(用語の記述リスト)は、全体を<dl>要素で囲み、用語を<dt>に、その説明を<dd>に書くというものでしたね。
この<dl>、HTML4までは「definition list (定義リスト) 」とされてたんですが、HTML5から「description list(記述リスト)」という役割になったのだそうです。

そんなわけで、HTML5では<dt>要素は「定義語」を示さないので、<dt>の語句が定義語で、<dd>でその説明をするなら、<dt>の中に<dfn> を仕込んで定義語である事を示すことが必要なんですって。

さらに、定義語が略語だったら<abbr>も入れ子にして仕込みます。

なんやらややこしいですが、要素の役割を整理したので、こうなちゃったのでしょうね。
<dl>要素をメニューなどに使う事が多くなっている現状で「定義リスト」にしておくわけにはいかなくなり、自由度を与えた。で、定義語に使うなら<dfn>を併用してね、ってなったんでしょう。

サンプルを見てみましょう。

HTML
HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。

ソースはこちらです。<dt>内に<dfn>と<abbr>も入れ子にした例です。

<dl>
    <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
    <dd>
    HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。
    文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。
    </dd>
</dl>

用語(定義語)を説明するには、このように<dl>を使うことが多いかと思います。
だから<dt>の中に<dfn>を使う(略語なら<abbr>も)って覚えておくとイイみたい。

次回予告

いかがでしたか?
とにかく、<dt><dfn><abbr></abbr></dfn></dt>のカタチを覚えておくといいかもです。

次回は、コンピュータのソースコードを示す<code>要素と、整形済みテキスト(改行やスペースをそのまま表示する)を示す<pre>を使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

初めまして!!

いつも、こちらでHTML/CSSを勉強させて頂いている、超初心者のJONIOです。

このページや他のページでもたまに気になることがあり投稿しました。

HTMLソースの所に、下記(【30】定義語を示すdfnを....のページです。)のようにborder:solidというCSSソースを見かけることが有るのですが、HTMLとCSSのどちらに記載しても良いのでしょうか??

もしくはHTMLには記載せず、CSSに記載でも変わらないのでしょうか??

<dl style="border:solid 1px #EEE; padding:10px; margin-left:0px;">
<dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
<dd>
HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。
文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。
</dd>
</dl>

宜しくお願い致します。

Re: 初めまして!!

あっ、ほんとだ。
JONIOさん、混乱させてしまってゴメンナサイ。

このソースのように「style属性」でHTML要素にジカに書く方法もあるんだけど、
HTML文書が長くなってしまうので、本当は推奨されないんだそうです。
HTMLには記載せず、外部CSSに書くのが本来の書き方です。

この記事を書いている時、<dl>にCSSで囲み罫をつけたかったんだけど、
ブログなので、この記事だけのために外部CSSをイジルのが面倒くさかったので、HTMLにジカに書いてます。
そして、そのままソースをコピペして掲載していました。
CSSの部分を消すのを、忘れてしまったようです。

ほかのページでもありましたか? そうですか。。。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.