最終更新HTMLの<blockquote>ブロッククォートタグは、内容が引用した文章であることを表します。<blockquote>内のコンテンツは、他の場所から引用したものでなければなりません。<>HTML<p>ガンジーはこう言いました。<p>明日死ぬかのように生きよ。永遠に生きるかのように学べ。👆基本的に<blockquote>の中に、段落(<p>タグ)を含める形で使います。次の理由から、引用文には<blockquote>を使うべきです。SEO対策のため他のWebページでも同じ文章が掲載・引用されているかもしれません。その場合、検索エンジンがコピーしたコンテンツとみなしてしまう可能性があります。<blockquote>を使えば「どこからどこまでが引用文なのか」検索エンジンに伝えることができ、これらのリスクを避けることができます。😾「blockquoteタグを使えば引用として認められる」わけではありません。著作権で認められる範囲で引用を行うようにしましょう。センターマナーのため引用文に<blockquote>を使うのは、Webの世界のマナーです。他のブログ記事などのWebページから引用するのであれば、できればそのページへのリンクを貼るようにしましょう(後ほど具体的な例を紹介します)。必須ではありませんが、<blockquote>を使うときにはできる限り「どこから引用したのか」も示しておくべきです。cite属性で引用元の「URL」を示すWebページの文章を引用するときには、そのページのURLを<blockquote>のcite属性に載せます。cite="引用元のURL">となります。cite属性のURLは検索エンジンなどのプログラムのためのもので、ページには表示されません。言い換えると、読者の目には入りません。😺引用文から引用するのではなく、原文が載っているWebページのURLを指定するようにしましょう。citeタグで引用元の「名前」を示す分かりづらいのですが<cite>タグは、さきほどのcite属性とは別物です。ブログの投稿...等あらゆる制作物を指します)。Standardが引用元の名前だと分かります。歌詞の引用であれば<cite>曲名</cite>、Webページであれば<cite>サイト名や記事タイトル</cite>のようになるでしょう。cite属性とは異なり、<cite>タグ内のテキストは直接ページに表示されます。️️✍️<cite>タグは、引用文自体ではないため、<blockquote>の外側に配置するようにします。引用元の名前を明確にする書き方さきほどの書き方は間違いではないのですが、<blockquote>の外側に<cite>があるため「どの引用文に対する<cite>なのか」分かりづらかったりします。<blockquote>を複数並ぶと、混乱してしまいますね。<p>引用文</p></blockquote><cite>引用元の名前</cite>この問題は👇以下のように<figure>を使って1つのまとまりを作ることで解決できます。</figcaption></figure>👆<figure>で1つのまとまりを作って、その引用文に対する情報は全部その中に含めるようにします。この書き方はHTMLの仕様書にも載っています。✍️<figcaption>は親要素の<figure>に対するキャプション(説明文)を表すタグです。<figcaption>の中に<cite>を含めることで「このまとまりに対するテキスト(cite)だよ」と示せるわけです。</figcaption></figure>👆他のWebページから引用するのであれば、読者が引用元へアクセスできるようにリンク(<a>)を<cite>タグ内に含めると親切です。CSSでblockquoteのデザインを変えるこちらは主要ブラウザのデフォルトスタイル(特にCSSを指定しなかった場合の表示)です。<blockquote>にはあらかじめ隙間(margin)が設定されており、<cite>は斜体文字で表示されます。<figure>タグと合わせて使う場合には、<figure>もデフォルトで隙間が開くようになっていることに注意する必要があります。サンプルCSSこれらのブラウザによるデフォルトのスタイルを解除しつつ、引用文らしく見えるサンプルコードを紹介します。<p>成功する人は「思い通りに行かない事が起きるのはあたりまえ」という前提で挑戦している。👆HTML<figure>にclass="figure-quote"を指定し、CSSでその中に含まれるblockquoteなどのスタイルを整えています。短い引用文にはqタグを使う段落の中で部分的に引用が入るときには<blockquote>ではなく<q>タグを使います。1つ〜複数の段落がまるっと引用文になるなら<blockquote>を使い、文章の一部が引用文なら<q>を使うと覚えておくと良いでしょう。HTML<>HTML<p>エジソンは<q>私は毎日、18時間働くことにしている</q>と言っていたそうです。👆ブラウザのデフォルトスタイルでは、<q>の前後に引用マークがつくようになっています。この引用マークはCSSの疑似要素(:beforeと:after)により表示されています。cite="https://○○">私は毎日、18時間働くことにしている</q>と言っていたそうです。👆<q>も<blockquote>と同様にcite属性で引用元のURLを指定できます。<blockquote>はいわゆる「ブロックレベル」の要素にあたり、<q>はインライン要素にあたります。