【HTML】cite要素の使い方【作品や文献(サイト)のタイトルを示す】

Program

作品や文献(サイト)のタイトルは、cite要素でマークアップしましょう。

cite要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
    <p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、『名作吾輩は猫であるは、夏目漱石の代表作です。』と書かれた文章があります。

そして、「吾輩は猫である」と書かれたフレーズは、cite要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「吾輩は猫である」は、斜体文字として表示されています。

英語(英文)ではどうなる?

では、英語(英文)について、cite要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
    <p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
    <p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「I am a Cat」について、cite要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「I am a Cat」は、斜体文字として表示されています。

cite要素は、カタカナにマークアップできるか?

さらに、カタカナ(全角、半角)について、cite要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
    <p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
    <p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
    <p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
    <p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
</body>
</html>

先ほどのプログラムに、カタカナのテキストを含む文章を追加しました。

追加した文章では、「走れメロス」、「走れメロス」について、cite要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。

cite要素は、数字にもマークアップできるか?

数字についても、cite要素でマークアップしてみました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
    <p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
    <p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
    <p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
    <p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
    <p>映画<cite>2001年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したSF映画である。</p>
    <p>映画<cite>2001年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したSF映画である。</p>
</body>
</html>

先ほどのプログラムに、数字(全角数字、半角数字)のテキストを含む文を追加しました。

追加した文章では、「2001年宇宙の旅」、「2001年宇宙の旅」について、cite要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。

以上から、cite要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ(全角及び半角)」に対して、マークアップできることが確認できました。

各種ブラウザでの表示結果

また、cite要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
cite要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、cite要素の使い方について、ご参考になさってくださいねー。

タイトルとURLをコピーしました