Southpole Men's White-3351, White/New, 32<blockquote>
タグは、内容が引用した文章GOAL(ゴール) 面付け箱錠V-MXK 握り玉型 V18ディンプルキー仕様 防犯<blockquote>
内のコンテンツは、他の場所から引用したものでなければなりません。
<p>ガンジーはこう言いました。</p>
A&D S字タイプ汎用型ロードセル LC1205-T005 ( LC1205T005 ) (株)エー・アンド・デイblockquote>
<p>明日死ぬかのように生きよ。
永遠に生きるかのように学べ。</p>
</blockquote>
👆基本的に<blockquote>
の中に、段落(<p>
タグ)を含める形で使います。
blockquoteタグを使うべき理由
次の理由から、引用文には<blockquote>
を使うべきです。
SEO対策のため
他のWebページでも同じ文章が掲載・引用されているかもしれません。その場合、検索エンジンがコピーしたコンテンツとみなしてしまう可能性があります。
<blockquote>
を使えば「どこからどこまでが引用文なのか」検索エンジンに伝えることができ、これらのリスクを避けることができます。
😾「blockquoteタグを使えば引用として認められる」わけではありません。必ず著作権で認められる範囲で引用を行うようにしましょう。
参考:BTS goes on JAPAN SPECIAL EDITION
マナーのため
引用文に<blockquote>
を使うのは、Webの世界のマナーです。他のブログ記事などのWebページから引用するのであれば、できればそのページへのリンクを貼るようにしましょう(後ほど具体的な例を紹介します)。
blockquoteタグの使い方
必須ではありませんが、<blockquote>
を使うときにはできる限り「どこから引用したのか」も示しておくべきです。
誠実 ジルサンダー☆カシミヤセーター PB ニット・セーター 色・サイズを選択:ブラック
Webページの文章を引用するときには、そのページのURLを<blockquote>
のcite
属性に載せます。
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html"タニタ(TANITA) 活動量計 カロリズム AM-120-SK さくら
<p>If the cite attribute is present, it must be a valid URL potentially surrounded by spaces.</【VD-15ZPC12-BL】 三菱電機 ダクト用換気扇 天井埋込形 BL認定品 яэ∀>
</blockquote>
👆この例のように<blockquote cite="引用元のURL">
となります。cite属性のURLは検索エンジンなどのプログラムのためのもので、ページには表示されません。言い換えると、読者の目には入りません。
😺引用文から引用するのではなく、原文が載っているWebページのURLを指定するようにしましょう。
citeタグで引用元の「名前」を示す
分かりづらいのですが<cite>
タグは、さきほどのcite属性とは別物です。<cite>
タグは「作品のタイトル」を表すために使います(この「作品」は、本、論文、音楽、ブログの投稿…等あらゆる制作物を指します)。
<blockquote cite="引用元のURL">
<p>The content of a blockquote may be abbreviated or may have context added in the conventional manner for the text's language.</p>
</blockquote>
<!-- 👇引用元の名前を書く -->
<cite>HTML Living Standard</cite>
👆<cite>
内のHTML Living Standard
が引用元の名前だと分かります。
歌詞の引用であれば<cite>曲名</cite>
、Webページであれば<cite>サイト名や記事タイトル</cite>
のようになるでしょう。
cite属性とは異なり、<cite>
タグ内のテキストは直接ページに表示されます。
️️✍️<cite>
タグは、引用文自体ではないため、<blockquote>
の外側に配置するようにします。
より引用元の名前を明確にする書き方
さきほどの書き方は間違いではないのですが、<blockquote>
の外側に<cite>
があるため「どの引用文に対する<cite>
なのか」分かりづらかったりします。<blockquote>
を複数並ぶと、混乱してしまいますね。
🤔どっちに対するciteタグ?
<blockquote cite="引用元のURL">
<p>引用文</p>
</blockquote>
<Herschel Outfitter, Brushstroke Camo, 50.0L 並行輸入品>引用元の名前</cite>
<blockquote Wildkin Kids Rolling Luggage for Boys and Girls, Carry on Luggage Size is P並行輸入品="引用元のURL">
<p>引用文</p>
</blockquote>
<citeNotch Pro Folding ラインキューブ アーボリスト ツリークライミング引用元の名前</cite>
この問題は👇以下のように<figure>
を使って1つのまとまりを作ることで解決できます。
誠実 ジルサンダー☆カシミヤセーター PB ニット・セーター 色・サイズを選択:ブラック
<figure>
<blockquote cite="引用元のURL">
<p>引用文</p>
</blockquote>
<figcaption>MARVEL マーベル スパイダーマン : ファー・フロム・ホームウェブギア スパイダーマン 13インチフィギュア - サウンドエフェクト他 アクセサ<cite>笛-402 〔1ダース単位〕〔代引不可〕[21]</cite>
</figcaption>
</figure>
👆<figure>
で1つのまとまりを作って、その引用文に対する情報は全部その中に含めるようにします。この書き方はグエンさま専用!ルイヴィトン タイガ カードケース イニシャルありにも載っています。
✍️<figcaption>
は親要素の<figure>
に対するキャプション(説明文)を表すタグです。<figcaption>
の中に<cite>
を含めることで「このまとまりに対するテキスト(cite)だよ」と示せるわけです。
誠実 ジルサンダー☆カシミヤセーター PB ニット・セーター 色・サイズを選択:ブラック
<figure>
<blockquote>
<p>..."HTML5" is widely used as a buzzword
to refer to modern Web technologies...</p>
バービー バービー人形 バービーコレクター J0878 Barbie Collector I Love Lucy, Lucy Gets In Pアルインコ DJ-PX5 ラペルトーク 超小型 特定小電力トランシーバー ALINCO | 無線機 免許不要>
<figcaption>
<!-- 👇cite内のテキストをリンクに -->
<cite><a href="https://html.spec.whatwg.org">HTML Living Standard</a></cite>
</figcaption>
</figure>
👆他のWebページから引用するのであれば、読者が引用元へアクセスできるようにリンク(<a>
)を<cite>
タグ内に含めると親切です。
CSSでblockquoteのデザインを変える
また<figure>
タグと合わせて使う場合には、<figure>
もデフォルトで隙間が開くようになっていることに注意する必要があります。
サンプルCSS
これらのブラウザによるデフォルトのスタイルを解除しつつ、引用文らしく見えるサンプルコードを紹介します。
figure, blockquote {
XS511146 オーデリック照明器具 スポットライト LED: 0; /* ブラウザデフォルトの隙間をリセット */
}
.figure-quote {
padding: 0 0 0 0.5em; /* 左側に余白 */
border-left: solid 3px black; /* 左側に線 */
font-style: italic; /* 引用文を斜体に */
}
.figure-quote p {
margin: 0.5em 0;
}
.figure-quote figcaption {
text-align: right; /* 出典は右寄せに */
}
👆HTML<figure>
にclass="figure-quote"
を指定し、CSSでその中に含まれるblockquote
などのスタイルを整えています。
短い引用文にはqタグを使う
段落の中で部分的に引用が入るときには<blockquote>
ではなく<q>
タグを使います。
1つ〜複数の段落がまるっと引用文になるなら<blockquote>
を使い、文章の一部が引用文なら<q>
を使うと覚えておくと良いでしょう。ぷちサンプル Bread & Butter
<p>エジソンは<q>私は毎日、18時間働くことにしている</q>と言っていたそうです。</p>
👆ブラウザのデフォルトスタイルでは、<q>
の前後に引用マークがつくようになっています。この引用マークはCSSの疑似要素(:before
と:after
)により表示されています。
誠実 ジルサンダー☆カシミヤセーター PB ニット・セーター 色・サイズを選択:ブラック
<p>エジソンは<q cite="https://○○">私は毎日、18時間働くことにしている</q>と言っていたそうです。</p>
👆<q>
も<blockquote>
と同様にcite
属性で引用元のURLを指定できます。
<blockquote>
はいわゆる「ブロックレベル」の要素にあたり、<q>
はインライン要素にあたります。 SHIMANO RC9 Y サイズ25.5 wide
特別価格YUPVM 5PCS/Lot ISO30 Tool Holder Clamp Iron+ABS Flame Proof Rubber Claw好評販売中あすつく対応 「直送」 三菱マテリアル 工具 三菱 MVS0330X08S060 新WSTARドリル【内部給油】 666-5691【キャンセル不可】国内発送(消費税・関税込)VOILE BLANCHE(ブラック)ディズニー オーナメント くじ 2016 2017 A賞 他 バラ売り可能バイク用ウィンカーキット★パリ発 Harpo アルポ★ フェーザー 羽 Navajo ピアス シルバーBAREFOOT DREAMS ベアフット ブランケット カーディガン sbd071株 共和 オーバンド シリコーンバンド クレアス #16 300g袋 クリア GGS-300-CL 期間限定 ポイント10倍Studiologic Numa Compact 2 【台数限定!専用ケース+ダンパーペダルセット】【代引不可】【沖縄・離島送料別途見積】
こちらは主要ブラウザのデフォルトスタイル(特にCSSを指定しなかった場合の表示)です。
<blockquote>
にはあらかじめ隙間(margin
)が設定されており、<cite>
は斜体文字で表示されます。