<blockquote>

引用セクションを表す

HTML1.0 ~ 利用可能

最終更新日: 2021.01.22

どんなタグ?
引用セクションを表す時には、
このblockquoteタグを使う。

コードサンプル
<body>
  <h1>ハワイ州</h1>
  <blockquote cite="https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%AF%E3%82%A4%E5%B7%9E">
    <p>ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。</p>
  </blockquote>
</body>

blockquote タグは 、 <blockquote> ~ </blockquote>で挟まれた範囲が、引用した内容であることを表すタグです。
このタグに、引用している内容以外は、いれることができません。

どのカテゴリに属しているの?
blockquoteタグは フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
blockquote タグに梱包できるタグ(コンテンツ・モデル)は、フロー・コンテンツです。
つまり、フロー・コンテンツというカテゴリに属しているタグなら梱包可能です。

あいっこ文章を引用するときには、blockquoteを使おう!

どうやって使うの?
引用文を、
<blocknote> タグで挟む。

blockquote タグは引用した文を <blockquote></blockquote> で挟みます。WEBサイトからの引用の場合は、cite 属性に、参照したページのURLを指定します。(参照URLは画面上には表示されません。)

使い方
<blockquote cite="参照したページのURL">
ここに引用文がはいります
</blockquote>
コードサンプル
<body>
  <p>芥川龍之介の<cite>羅生門</cite>は、以下の文からはじまります。</p>
  <blockquote>
    <p>ある日の暮方の事である。一人の下人(げにん)が、羅生門(らしょうもん)の下で雨やみを待っていた。</p>
  </blockquote>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/blockquote/sample01/
どこでも使えるの?
blockquoteタグは フロー・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
blockquoteタグは、セクション全体が引用文のときに使用します。引用文が文章の一部の場合は、qタグを使います。

あいっこblockquoteタグを使うことで、検索エンジンなどの機械に「どこからどこまでが引用文なのか」を伝えることができます。

使える属性は?
グローバル属性はもちろん。
cite 属性もよく使う。

<blockquote> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。

cite ( サイト ) 属性

引用元のURLを指定します。

あいっこcite属性を使って、「どこから引用したのか」を示しておきましょう。

サンプルが見たい
<blockquote>タグを使ったサンプルを
いくつか紹介。

<blockquote> タグを使ったサンプルを紹介します。

基本的な<blockquote>タグのサンプル

コードサンプル
<body>
  <h1>トーマス・エジソンの名言</h1>
  <blockquote>
    <p>
      失敗したわけではない。<br>
      それを誤りだと言ってはいけない。<br>
      勉強したのだと言いたまえ。
    </p>
  </blockquote>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/blockquote/sample02/

cite 属性を使ったサンプル

コードサンプル
<body>
  <h1>Shibajukuって何?</h1>
  <p>Shibajukuのサイトに、以下のように説明されています。</p>
  <blockquote cite="https://shibajuku.net/about/">
    <p>
    スクールでもWeb制作会社でもない、<br>
    新たなWebクリエーター養成コミュニティ。
    </p>
    <p>
    Web制作スキルの習得はもちろん。<br>
    仲間を作ったり、プロジェクトに参加したり、<br>
    Webで生きていくためのノウハウを蓄積するオンラインサロン。
    </p>
  </blockquote>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/blockquote/sample03/

あいっこblockquoteタグを使わずに引用すると、コピーコンテンツだと勘違いされてしまうかもしれません。

デフォルトスタイルは?
デフォルトでは、
周りに余白がつきます。

一般的なブラウザで blockquote要素を表示した場合、前後左右に余白がはいっています。
具体的には、下記のCSSと同等のスタイルが適用されます。

blockquote要素のデフォルトスタイル
blockquote {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

あいっこ余白を空けるレイアウト目的で、blockquoteを使用するのはやめましょう。引用文ではないときは、CSSで調整しましょう。

対応ブラウザは?
すべての主要ブラウザで使用できます。

<blockquote>タグは HTML1以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり
Edge
Edge 12 ~
Google Chrome
Google Chrome あり
Firefox
Firefox 1 ~
Safari
Safari あり
Opera
Opera あり

あいっこモダンブラウザは問題ありません。

このリファレンスを書いた人

あいっこ

あいっこ

2020年8月から、Shibajukuに参加しています。 おえかきと、本と、おいしいものがすきです。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて