どんなタグ?
引用・転載文を表す時には、
この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 あり
モダンブラウザは問題ありません。