当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】作品のタイトルや文章の引用であることを示すタグ

アイキャッチ画像
みきてぃ東西線
口コミ用キャラクターアイコン

小説の感想を書くために自分のWebサイトに載せたいけど、作品のタイトルをどのタグで囲んだらいいの?

口コミ用キャラクターアイコン

気になるニュースの内容を引用したいけど、どのタグを使ったらいいの?

このような場合は、それぞれ以下のタグを使います。

  • 作品のタイトルを示したい場合・・・citeタグ
  • 短い文章を引用したい場合・・・qタグ
  • 複雑な文章・長い文章を引用したい場合・・・blockquoteタグ

citeタグ

1<cite>ここに作品のタイトルが入ります。</cite>

citeタグとは、作品のタイトルを示したい時に使うタグのことを表します。

サンプルコード

1<p>
2<cite>吾輩は猫である</cite>』は、夏目漱石が執筆した長編小説である。
3</p>

▼ブラウザでは以下のように表示されます。

HTMLタグ citeタグの使い方

qタグ

1<q>ここに短い文章の引用が入ります。</q>

qタグとは、1行単位で、かつシンプルな短い文章を引用したい時に使われるタグです。qタグに囲まれた部分は、鍵括弧または引用符で囲まれます。

cite属性を使うことで、引用文にリンクを示すことができます。

なお、複雑な文章や長い文章を引用したい場合は、後述するblockquoteタグを使います。

サンプルコード

1<p>
2HTMLは、<q cite="https://mikit-tz.com/about-html/">ページの中にある文字や画像などの様々なコンテンツにタグをつけて囲む</q>ことで、<br>ブラウザ上で様々なコンテンツを表示することができる。
3</p>

▼ブラウザでは以下のように表示されます。

HTML qタグの使い方

blockquoteタグ

1<blockquote>ここに複雑な文章や長い文章の引用文が入ります。</blockquote>

blockquoteタグとは、複雑な文章や長い文章を引用したい時に使われるタグです。

cite属性を使うことで、引用文にリンクを示すことができます。

サンプルコード

※コード内のURLはダミーです。

1<blockquote cite="http://example.com/">
2ここに複雑な文章や長い文章の引用文が入ります。<br>
3短い文章を引用したい場合はqタグ、<br>
4複雑な文章や長い文章を引用したい場合は、blockquoteタグを使います。
5</blockquote>

▼ブラウザでは以下のように表示されます。

HTML blockquoteタグの使い方

まとめ

というわけで、今回は「作品のタイトルや文章の引用時に使われるタグ」のことについて解説しました。

最後に、citeタグ・qタグ・blockquoteタグの概要についてもう一度簡潔にまとめます。

htmlタグ概要
citeタグ作品のタイトルを示すタグ
qタグ短い文章を示すタグ
blockquoteタグ複雑な文章・長い文章を示すタグ

どのタグも引用を示すタグですが、ぞれぞれ違いがありますので、用途に応じて使い分けるようにしましょう。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました