[28] blockquote要素で「引用されたブロック」を示そう

最終更新日:2017年11月04日  (初回投稿日:2011年10月27日)

<blockquote>要素は、引用されたブロックであることを示す要素です。

前回の <q>要素は引用されたテキスト(フレーズ)を表す インラインレベルの要素でしたが、こっちはグルーピングのための要素。ブロックレベルです。

使用する要素 <blockquote> 〜 </blockquote>

「quote(クォート)」は「引用文」という意味の単語です。

<blockquote>を使ってみよう

<blockquote>要素はブラウザのデフォルトスタイルで、左右がインデントされたり、ボーダーで囲まれて表示されます。
グルーピングのための要素なので、中に <p>要素 や <div>要素 なども入れられます。

<q>要素と同じく「cite属性」で引用元のURLを書いておけます。

サンプルを見てみましょう。

W3Cでは <blockquote>要素についてこのように定義しています。

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

HTMLはこちら。

<p>W3Cでは <blockquote>要素についてこのように定義しています。</p>

<blockquote cite="https://www.w3.org/TR/html51/grouping-content.html#the-blockquote-element">
  <p>The blockquote element represents content that is quoted from another source, 
optionally with a citation which must be within a footer or cite element, 
and optionally with in-line changes such as annotations and abbreviations.</p>
  <p>Content inside a blockquote other than citations and in-line changes 
must be quoted from another source, whose address, 
if it has one, may be cited in the cite attribute.</p>
<footer>— <cite><a href="https://www.w3.org/TR/html51/grouping-content.html#the-blockquote-element" target="_blank">HTML 5.1 - 2nd Edition | W3C Recommendation</a></cite></footer>
</blockquote>

引用したブロックを <blockquote> 〜 </blockquote> で囲んで、引用したブロックのあったURLを cite属性で書いています(3行目)

任意で<blockquote>要素の中に「出典」の情報を入れることもできますが、<footer>要素<cite>要素でマークアップする必要があります(10行目)

<blockquote>要素の中身は、「省略したり、文脈を加えたり、注釈を加えたり」することができますが、それらの追加・変更は、テキストで明示する必要があります。
(注:強調は筆者による)とか(注:原文まま)などと入れるんですね。

次回予告

いかがでしたか?
ブロックごとゴソッと引用する場合、この <blockquote>要素で囲んで、cite属性で元のアドレスも書いておけば間違いない。ということです。

次回は、略語を示す <abbr>要素を使ってみましょう。
「W3C」などの「略語」をこれで囲み、title属性で元の言葉を書いておくと、マウスオーバーで略す前の言葉が表示できます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.