<q>

引用フレーズであることを表す

HTML3.0 ~ 利用可能

最終更新日: 2020.10.28

どんなタグ?
引用・転載文を表す時には、
このqタグを使う。

コードサンプル
<body>
<p>その小説は<q>吾輩は猫である。名前はまだない。</q>という文からはじまる</p>
</body>

q タグは quotation (クォーテーション)の略で、 <q> ~ </q>で挟まれた範囲が、引用・転載文であることを表すタグです。

どのカテゴリに属しているの?
qタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
q タグに梱包できるタグ(コンテンツ・モデル)は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

ai引用フレーズは、qタグで囲もう!

どうやって使うの?
引用フレーズを、
<q> タグで挟む。

q タグは引用フレーズを <q></q> で挟みます。必要に応じてcite 属性に引用元のURLを指定します。

使い方
<q cite="引用元のURL">引用フレーズ</q>
コードサンプル
<body>
<p>Wikipediaによると、旭川の人口は、<q>札幌市に次ぐ北海道第2位の人口(約33万人)</q>である</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/q/sample01/
どこでも使えるの?
qタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
qタグは、改行がない比較的短いテキストを引用する際に使用されます。長いテキストを段落ごと引用・転載する場合はblockquoteタグを使用します。

aiqタグとblockquoteタグの使い分けに気を付けよう!

使える属性は?
グローバル属性はもちろん。
cite 属性を使うことができる。

<q> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。

cite (サイト) 属性

引用元のURLを指定する属性です。

属性値
引用元のURL

aicite属性は任意で設定します。

サンプルが見たい
<q>タグを使ったサンプルを
いくつか紹介。

<q> タグを使ったサンプルを紹介します。

基本的な<q>タグのサンプル

コードサンプル
<body>
<p>エジソンは、<q>天才とは、1%のひらめきと99%の努力である</q>と言いました。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/q/sample02/

cite 属性を使ったサンプル

コードサンプル
<body>
<p>Shibajukuとは、<q cite="https://shibajuku.net/about/">スクールでもWeb制作会社でもない、新たなWebクリエーター養成コミュニティ。</q>である。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/q/sample03/

aicite属性で指定したURLは、とくにブラウザ側には表示されません。

デフォルトスタイルは?
要素の前後に引用符が付けられます。

一般的なブラウザで q要素を表示した場合、前後に引用符がつきます。
具体的には、下記のCSSと同等のスタイルが適用されます。

q要素のデフォルトスタイル
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
q {
  display: inline;
}

ai「」や、””(ダブルクォーテーション)で囲まれます。

対応ブラウザは?
すべての主要ブラウザで使用できます。

<q>タグは HTML3.0以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり
Edge
Edge 12 ~
Google Chrome
Google Chrome あり
Firefox
Firefox 1 ~
Safari
Safari あり
Opera
Opera あり

aiモダンブラウザは問題ありません。

このリファレンスを書いた人

ai

ai

2020年8月から、Shibajukuに参加しています。 おえかきと、本と、おいしいものがすきです。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて