どんなタグ？
引用セクションを表す時には、
この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 {
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 あり
モダンブラウザは問題ありません。
