どんなタグ？
引用・転載文を表す時には、
このqタグを使う。
<body>
<p>その小説は<q>吾輩は猫である。名前はまだない。</q>という文からはじまる</p>
</body>
q タグは quotation の略で、
<q> ~ </q>で挟まれた範囲が、引用・転載文であることを表すタグです。
- どのカテゴリに属しているの？
- qタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
q タグに梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
引用フレーズは、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タグを使用します。
qタグとblockquoteタグの使い分けに気を付けよう！
使える属性は？
グローバル属性はもちろん。
cite 属性を使うことができる。
<q> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。
cite 属性
引用元のURLを指定する属性です。
- 属性値
- 引用元のURL
cite属性は任意で設定します。
サンプルが見たい
<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/
cite属性で指定したURLは、とくにブラウザ側には表示されません。
デフォルトスタイルは？
要素の前後に引用符が付けられます。
一般的なブラウザで q要素を表示した場合、前後に引用符がつきます。
具体的には、下記のCSSと同等のスタイルが適用されます。
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
q {
display: inline;
}「」や、””（ダブルクォーテーション）で囲まれます。
対応ブラウザは？
すべての主要ブラウザで使用できます。
<q>タグは HTML3.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome あり
- Firefox
- Firefox 1 ~
- Safari
- Safari あり
- Opera
- Opera あり
モダンブラウザは問題ありません。
