HTML・文章にひと工夫

引用をあらわそう

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

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

まとまった引用はblockquote

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

<blockquote>
  <p>継続は力なり。小さな一歩を、毎日つづけよう。</p>
</blockquote>

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

文中のひとことはq

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

<p>先生はいつも <q>あわてず、ていねいに</q> と言っていた。</p>

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

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

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

<blockquote>
  <p>吾輩は猫である。名前はまだ無い。</p>
</blockquote>
<p>—— <cite>吾輩は猫である</cite></p>

このレッスンのまとめ

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

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

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

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

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

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

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

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