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

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

1 cite要素の基本的な使い方
2 英語（英文）ではどうなる？
3 cite要素は、カタカナにマークアップできるか？
4 cite要素は、数字にもマークアップできるか？
5 各種ブラウザでの表示結果

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>２００１年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したＳＦ映画である。</p>
    <p>映画<cite>2001年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したＳＦ映画である。</p>
</body>
</html>