HTMLで引用ブロックを記述する方法を紹介します。
HTMLで引用のブロックを表現するにはblockquoteタグを利用します。なお、blockquoteタグはブロック要素として表現されます。
また、短い引用の場合は q タグを利用することもあります。
blockquoteの開始タグから終了タグの間に引用するテキストを記述します。
引用元がある場合には、cite属性に引用元のURLを記述します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>blockquote のデモ</h1>
<p>下記は引用ブロックです。</p>
<blockquote>
本物のプログラマは30や40時間、50時間でも、連続して強い緊張のもとで働くだけの能力を持っている。実際、そうすることを望んでいる。
本物のプログラマにとっては、トロい反応速度もたいした問題ではない ‐ それは彼に仮眠をとるチャンスを与えてくれるのだ。
スケジュールの密度が充分でない場合、 本物のプログラマは細々としてはいるが面白いと思う部分を最初の 9週間をかけてやってしまい、
それから最終週に50時間マラソンを 2、3発こなして残りの全部を仕上げる。
</blockquote>
<p>引用終わり</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
<blockquote>タグで囲まれた引用ブロックはインデントされて表示されていることが確認できます。
以下のHTMLファイル、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="quote-block-style.css" />
</head>
<body>
<h1>blockquote のデモ</h1>
<p>下記は引用ブロックです。</p>
<blockquote>
古き良き時代にたちかえってみよう ‐ コンピュータの「黄金時代」‐ 男たちと少年たちを区別するのは簡単であった
(文学的には "本物の男たち" と "Quiche Eaters [訳注 1]" とよばれることもあった)。
この時代、本物の男たちはコンピュータプログラミングを理解していたし、
Quiche Eaters はそうじゃなかった。
</blockquote>
<p>引用終わり</p>
</body>
</html>
blockquote {
padding:0.5rem 0.5rem 0.5rem 0.5rem;
font-style:italic;
font-family:'Yu Mincho';
border:1px solid #304757;
background-color:#c7d6e1;
}
blockquoteのスタイルをスタイルシートで設定しています。今回は背景色とフォント、枠線を設定しています。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
<blockquote>タグで囲まれた引用ブロックのスタイルが設定できています。
