HTML・文章にひと工夫

引用をあらわそう

誰かの言葉や本の一節を「これは引用です」と示すタグ。blockquoteとqで、自分の言葉と借りた言葉をきちんと分けよう。

本の一節や、誰かが言ったことをページに載せたい——そんなとき、「ここは自分の言葉じゃなくて、借りてきた言葉ですよ」ときちんと示すのが引用のタグです。自分の文章と混ざらないので、読む人にも親切です。

まとまった引用はblockquote

<blockquote> は、ひとかたまりの文章をまるごと引用するときに使います。多くのブラウザでは、左右が少し内側に下がって表示され、「ここは引用だな」と見た目でも伝わります。

<blockquote>
  <p>継続は力なり。小さな一歩を、毎日つづけよう。</p>
</blockquote>
左右が少し内側に下がって、「ここは引用だな」と見た目で伝わります。

<blockquote> の中には、<p> などをふつうに入れられます。「引用という箱の中に、いつもの段落を入れる」というイメージです。

文中のひとことはq

文章の途中に、短い引用をはさむなら <q> を使います。qはquote(引用)の略。多くのブラウザでは、自動で引用符(「」や ” “)をつけてくれます。

<p>先生はいつも <q>あわてず、ていねいに</q> と言っていた。</p>
自分で打っていないのに、<q> の前後に引用符(”…” や「…」)が自動でついています。

自分でカギカッコを打たなくても、<q> が「ここは引用」と示しつつ、記号もつけてくれます。

どこから借りたかを示すcite

引用元(本のタイトルなど)を書き添えたいときは、<cite> を使います。多くのブラウザで斜体になり、「これは作品名だよ」と示せます。

<blockquote>
  <p>吾輩は猫である。名前はまだ無い。</p>
</blockquote>
<p>—— <cite>吾輩は猫である</cite></p>
<cite> で囲んだ作品名だけ斜体になり、「これは作品名だよ」と示せます。

出典のURLをこっそり添える(cite属性)

<cite> タグとは別に、<blockquote><q> には cite という属性も用意されています。ややこしいのですが、タグの<cite>画面に表示される出典名、属性のcite画面には出ない出典のURLです。

<blockquote cite="https://example.com/meiji-bungaku">
  <p>吾輩は猫である。名前はまだ無い。</p>
</blockquote>
書くもの見えるか役目
<cite>作品名</cite>見える読む人に伝える出典名
cite="URL"(属性)見えないブラウザや検索エンジン向けの出典住所

初心者のうちは無理に使わなくて大丈夫です。「見える出典は<cite>タグ、見えない出典はcite属性」と、名前が同じで役目が違うものがある——それだけ知っておけば、あとで見かけたときに迷いません。

このレッスンのまとめ

  1. まとまった引用は <blockquote>(中に <p> を入れる)
  2. 文中の短い引用は <q>(引用符が自動でつく)
  3. 引用元は <cite> で示せる

やってみよう:すきなことば

しまちゃんのじこしょうかいに、すきなことば(座右の銘)を <blockquote> でそえましょう。

<h2>じこしょうかい</h2>
<p>こんにちは! しまちゃんといいます。おえかきするのがだいすきで、しゅうまつはよくラーメンをたべにいきます。</p>

<blockquote>
  <p>まいにちちょっとずつ。</p>
</blockquote>
<p>—— <cite>しまちゃんのすきなことば</cite></p>

<h2> とさいしょの <p> は前のぶん。今回足すのは <blockquote><cite> のところ。引用は左右が少し内側に下がって表示され、「借りてきた言葉」だとひと目でわかります。

ブラウザ表示。じこしょうかいの下に「まいにちちょっとずつ。」という引用が左右を下げて表示され、その下に出どころが添えられている
引用のところだけ、少し内側にさがって見えます。

できたら、自分のすきなことばに書きかえてみましょう。本のセリフでも、ことわざでもOK。じつは /goal のAboutにある引用は、これです。

よくある質問

blockquoteとpの違いは何ですか?
pはふつうの自分の文章、blockquoteは他人の文章や本の一節を「これは借りてきた言葉です」と示す引用専用の箱です。中身がまるごと他人の言葉かどうかで選びます。
citeタグは必ず書かないといけませんか?
必須ではありません。出典を示すと読む人が原文にあたりやすくなり親切なので、書けるときは書く、くらいの気持ちで大丈夫です。
qタグの中に、さらにqタグを入れられますか?
入れられます。多くのブラウザは入れ子になったqを自動で見分け、外側と内側で引用符の種類を変えて表示してくれます。