blockquote 要素 (HTMLタグ)

引用文(ブロックレベル)

2018年03月12日

HTMLのblockquote要素の説明です。blockquote要素は、引用した文章を定義するブロックレベル要素です。


目次

  1. 要素の記述例
  2. 要素の説明
  3. 利用できる属性
  4. ブラウザデフォルトCSS設定

要素の記述例

blockquote要素の記述例
<blockquote cite="http://www.aozora.gr.jp/cards/000148/files/789_14547.html">
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
  <footer>(<cite>夏目漱石 - 吾輩は猫である</cite>)</footer>
</blockquote>

閲覧中ブラウザーでの表示結果

 

要素の説明

  • blockquote要素は、その内容が引用された文章であることを定義するブロックレベルの要素です。インラインレベル要素として扱いたい場合はq要素を使用します。
  • blockquote要素は、セクショニングルートです。
  • blockquote要素は、出典などの情報を含めることもできますが、その場合はcite要素の中に入れる必要があります。

 

利用できる属性

属性名 属性の説明
cite 引用元のコンテンツのあるURLを定義する属性です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

blockquote要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

blockquote要素のブラウザデフォルトCSS
blockquote {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

 

 

 

Programming Style