<cite> タグを使った HTML の引用フォーマット

はじめに

この実験では、通常のテキストとは異なる形式で引用を表示するために使用される HTML の<cite>タグを紹介します。この実験では、HTML ドキュメントで引用の著者を引用するために<cite>タグと<blockquote>タグをどのように使用するかを学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

要素を含める

<cite>要素を使用するには、HTML ドキュメントに含める必要があります。そのための必要な構文を以下に示します。

<cite>... </cite>

要素の中にコンテンツを追加する

引用を表示するには、引用するコンテンツを<cite>タグの中に埋め込みます。

<cite>引用するテキスト</cite>

と要素を一緒に使う

引用の著者を引用するには、<blockquote> タグと <cite> タグを一緒に使用します。

<blockquote>
  "引用するテキスト。"
  <cite>著者名</cite>
</blockquote>

注：引用されたテキストは引用符で囲まれ、著者の名前は <cite> タグで囲まれています。

タグに CSS を適用する

デフォルトでは、<cite> タグ内のテキストは斜体になっています。引用の外見を変更するために、<cite> タグに追加の CSS スタイルを適用することもできます。以下は例です。

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "引用するテキスト。"
  <cite>著者名</cite>
</blockquote>

まとめ

この実験では、HTML の<cite>タグを使って通常のテキストとは異なる形式で引用を表示する方法を学びました。また、HTML ドキュメントで引用の著者を引用するために<cite>タグと<blockquote>タグを一緒に使う方法も学びました。最後に、引用の外見を変更するために<cite>タグに CSS スタイルを適用する方法について議論しました。