4-18-1a 短い引用

改行を必要としない程度の引用を設定する方法です。 <q> 要素を使用致します。(このタグはインライン要素です)。 このタグに対応しているブラウザでは自動的にダブルクォーテーション(")が付きます。

ちなみに<q> とは 『Quotation(引用)』 の略です。

4-18-1b 短い引用の見本

HTML

<body> ~ </body> 内に記述して下さい。

シェークスピアはハムレットで<q>生きるべきか、死ぬべきか、それが間題だ</q>と書いた。

表示結果

シェークスピアはハムレットで生きるべきか、死ぬべきか、それが間題だと書いた。

上記の文章をそれぞれIENN、OPERA、Firefox で見てみました。 (詳細はこちらからどうぞ[約4.16KBあります])。現在IE以外のブラウザではちゃんと(")マークが付きます(^^;

4-18-1c 長い引用 (blockquote)

長めの引用を設定する方法です。 <blockquote> 要素を使用致します。(このタグはブロックレベル要素です)。

このタグを使用すると一般的なブラウザでは上下に改行が追加され、本文は左右に字下げ(インデント)されます。 (古いブラウザの時代は字下げをする手段が無かった為にこのタグで代用されておりましたが、本来の役割はあくまで 『引用』 ですので、インデント目的の方は margin-leftやmargin-right 等をご利用下さい)

4-14-1d 具体例

blockquoteの見本をclass属性 を利用して表示してみました。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
.sample-1j {
padding: 5px;
background-color: #ccffff; /* 背景はブルー */
}
-->
</style>

HTML

<body> ~ </body> 内に記述して下さい。
<p>
<cite>夏目漱石 『吾輩は猫である』</cite> 1905年1月 <cite>「ホトトギス」</cite>に発表
</p>
<blockquote>
 吾輩は猫である。名前はまだ無い。
どこで生まれたのかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</blockquote>
<p>
上記は序文の一部を普通に引用した文章です。<br>
下記の物は<cite>宮沢賢治の 『銀河鉄道の夜』</cite> の一部を引用致しました。
</p>
<blockquote class="sample-1j">
「カムパネルラ、また僕たち二人きりになったねえ、どこまでもどこまでも一緒に行こう。僕はもうあのさそりのようにほんとうにみんなの幸(さいわい)のためならば僕のからだなんか百ぺん灼(や)いてもかまわない。」<br>
「うん。僕だってそうだ。」カムパネルラの眼にはきれいな涙がうかんでいました。<br>
「けれどもほんとうのさいわいは一体何だろう。」ジョバンニが云いました。<br>
「僕わからない。」カムパネルラがぼんやり云いました。<br>
</blockquote>
<p>
CSSを利用し、class属性を併用すれば色々な形に装飾する事が出来ます。
</p>

表示結果

夏目漱石 『吾輩は猫である』 1905年1月 「ホトトギス」に発表

 吾輩は猫である。名前はまだ無い。 どこで生まれたのかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

上記は序文の一部を普通に引用した文章です。
下記の物は宮沢賢治の 『銀河鉄道の夜』 の一部を引用致しました。

「カムパネルラ、また僕たち二人きりになったねえ、どこまでもどこまでも一緒に行こう。僕はもうあのさそりのようにほんとうにみんなの幸(さいわい)のためならば僕のからだなんか百ぺん灼(や)いてもかまわない。」
「うん。僕だってそうだ。」カムパネルラの眼にはきれいな涙がうかんでいました。
「けれどもほんとうのさいわいは一体何だろう。」ジョバンニが云いました。
「僕わからない。」カムパネルラがぼんやり云いました。

CSSを利用し、class属性を併用すれば色々な形に装飾する事が出来ます。

blockquoteを修飾する方法の見本はこちら 『4-9 見出しを修飾する』 をご覧下さいませ。 (見出しに利用する<h1>をCSSを利用して見た目を変更する方法を記載しております)。

4-18-1e 書名、作者名、参照先等を表示する (cite)

上記の見本で既に提示しておりますが、主に書名、作者名、規格名、参照先を引用する際は<cite>要素を利用致します。(このタグはインライン要素です)。このタグを利用すると一般的なブラウザではイタリック体で表示されます。

ちなみに<cite>とは、『citation(引用、引証)』 の略です。