【HTML】q要素の使い方【短い引用文を示します】

Program

q要素を使うことで、短い引用文を示すことができます。

q要素の基本的な使い方

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>q要素</title>
</head>
<body>
    <p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
</body>
</html>

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

p要素の中には、『夏目漱石の小説「吾輩は猫である」の冒頭は、吾輩は猫である。名前はまだ無い。で始まります。』と書かれた文章があります。

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

このため、ブラウザ(Google Chrome)での表示結果の通り、「吾輩は猫である。名前はまだ無い。」は、””で挟まれ、引用文であることが示されています。

なお、ブラウザによっては、””ではなく、「」で囲まれて表示されることもあります。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>q要素</title>
</head>
<body>
    <p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
    <p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
</body>
</html>

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

追加した英文では、「I am a cat. I don’t have a name yet.」について、q要素でマークアップしてあります。

そして、ブラウザ(Google Chrome)での表示結果の通り、「I am a cat. I don’t have a name yet.」は、””で挟まれ、引用文であることが示されています。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>q要素</title>
</head>
<body>
    <p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
    <p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
    <p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
    <p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
</body>
</html>

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

追加した文章では、「トンネル」、「トンネル」もフレーズに含まれた状態で、q要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、””で挟まれたフレーズに含まれた状態で、表示できました。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>q要素</title>
</head>
<body>
    <p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
    <p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
    <p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
    <p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
    <p><q>僕は三十七歳で、そのときボーイング747のシートに座っていた。</q>とは、村上春樹の小説「ノルウェイの森」の冒頭の文章である。</p>
    <p><q>僕は三十七歳で、そのときボーイング747のシートに座っていた。</q>とは、村上春樹の小説「ノルウェイの森」の冒頭の文章である。</p>
</body>
</html>

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

追加した文章では、「僕は三十七歳で、そのときボーイング747(747)のシートに座っていた。」について、q要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、数字(全角および半角)についても、””で挟まれたフレーズに含まれた状態で、表示することができました。

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

cite属性の使い方

q要素にcite属性を使った例を見てみましょう。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>q要素</title>
</head>
<body>
    <p>ニュースによると、<q cite="http://example.com/news/weather/">台風10号は本日未明に温帯低気圧に変わりました</q>とのことです。</p>
</body>
</html>

p要素の中には、『ニュースによると、台風10号は本日未明に温帯低気圧に変わりましたとのことです。』と書かれた文章があります。

そして、「台風10号は本日未明に温帯低気圧に変わりました」と書かれたフレーズは、q要素でマークアップされています。

さらに、q要素の中には、cite属性により引用元のURLが記載されています。

ブラウザ(Google Chrome)における表示結果では、「台風10号は本日未明に温帯低気圧に変わりました」が””で挟まれて、引用文であることが示されています。

なお、cite属性により指定された引用元「cite=”http://example.com/news/weather/”」は、ブラウザ上における表示として、特別に示されることはありません。

しかし、ウェブ上の文章や画像を定期的に収集するクローラーは、「q要素の中のcite属性の値」として収集することになります。

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

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

【HTML】q要素Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
全角文字
半角文字
表示記号:「」
表示記号:””
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、q要素の使い方について、ご参考になさってください!

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