SYNCERのロゴ
アイキャッチ画像

q要素 - インラインレベルの引用

q要素は、内容が、外部から引用したものであることを表す要素です。この要素はインライン要素です。ブロックレベルでマークアップするには、blockquote要素を利用しましょう。

概要

名前
q (Quote)
カテゴリ
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Phrasing content。
タグの省略
開始タグも終了タグも省略できません。
コンテンツ属性
cite - 引用元のURL。
DOM Interface
HTMLQuoteElement
デフォルトのスタイル

Chrome / Firefox / Safari

q {
    display: inline;
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}
q {
    display: inline;
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}
仕様書
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element

属性

cite属性

引用元のURL。この属性は表示に反映されない。人間ではなく、専らユーザーエージェント向けの属性。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

チュートリアル

引用したテキストをq要素で囲むことで、それが引用したコンテンツであることを表します。

<p>クラークの名言に、<q>少年よ、大志を抱け</q>という言葉があります。</p>

引用元がウェブサイトの場合、cite属性でURLを指定できます。これはブラウザには表示されない、ユーザーエージェント向けです。検索エンジンなどはこの属性のURLを辿ることで、よりあなたのコンテンツの理解を進めるかもしれません。

<p>あのウェブサイトには、<q cite="https://syncer.jp/">SEOとかウダウダ言ってる暇があったら手を動かせ</q>という言葉が書いてあった。</p>

q要素とblockquote要素の役割は同じです。違いは、前者がインライン要素で、後者がブロック要素であることです。例えば、テキストの中の一部を引用コンテンツとしてマークアップするにはq要素の方が適しているでしょう。

<!-- 間違った例 -->
<div>私は彼が言った、<blockquote>山田君、座布団1ま〜い</blockquote>という言葉が好きだ。</div>

<!-- 正しい例 -->
<p>私は彼が言った、<q>山田君、座布団1ま〜い</q>という言葉が好きだ。</p>

デモ

q要素のデモです。

<!-- このコードは編集できます。 -->

<p>クラークの名言に、<q>少年よ、大志を抱け</q>という言葉があります。</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
q要素
cite属性
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月9日 (木)
コンテンツを公開しました。