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

最終更新日:-0001年11月30日  (初回投稿日:2011年10月27日)

前回の q要素の続きで、今回は blockquoteです。
<blockquote>は、引用されたブロックであることを示す要素です。

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

「quote」は「引用文」という意味の名詞です。
前回の<q>は引用されたテキスト(フレーズ)を表しましたが、こっちはブロックごと引用していることを示すんです。

<blockquote>を使ってみましょう

<blockquote>はブラウザのデフォルトで、左右がインデントされたり、ボーダーで囲まれて表示されます。
<q>と同じく、引用が他のソースからもってきたのであれば、引用元のアドレスを「cite属性」で書いとくこともできます。

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

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

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

blockquote 要素は別のソースから引用されるセクションを表わす。
blockquote 要素の中のコンテンツは、別のソースからの引用でなければならない。その引用元のアドレスがあるのであれば、それを cite 属性の中で表示する事が出来る。

HTMLソースはこちらです

<p>W3Cでは&lt;blockquote&gt;についてこのように定義しています。</p>

<blockquote cite="http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-blockquote-element">
  <p>The blockquote element represents a section that is quoted from another source.</p>
  <p>Content inside a blockquote must be quoted from another source, whose address, 
  if it has one, may be cited in the  cite  attribute.</p>
</blockquote>
<q>
blockquote 要素は別のソースから引用されるセクションを表わす。<br />
blockquote 要素の中のコンテンツは、別のソースからの引用でなければならない。その引用元の
アドレスがあるのであれば、それを cite 属性の中で表示する事が出来る。
</q>

まず、引用したブロックを<blockquote></blockquote>で囲んでますね。
そして引用したブロックのあったURLを cite属性で表記しています。

上のサンプルでは、<blockquote>の中に<p>を使ってますが、<p>で段落を分ける必要がない場合なら、<p>無しでも(<blockquote>だけで囲んでも)OKです。

次回予告

いかがでしたか?
どこかからゴソッとブロックごとコピペして引用する場合、この<blockquote>で囲んでしまえ!
ってことですわ。ついでに cite属性で元のアドレスも書いておけば間違いない。

次回は、略語を示す<abbr>要素を使ってみましょう。
「SOHO」とか「フリマ」とかの略語をこれで囲み、title属性で元の言葉を書いておくと、カーソルのロールオーバーで略す前の言葉が表示できるので、ビジターに親切です。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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