<cite>

作品のタイトルを表す

HTML1 ~ 利用可能

最終更新日: 2020.05.21

どんなタグ?
作品のタイトルを表す時には、
この<cite>タグを使う。

コードサンプル
<p>
  私は、ベートーヴェンの楽曲の中で<cite>運命</cite>が好きだ。
</p>

citeサイト 要素は<cite> ~ </cite>で挟まれた範囲が、作品のタイトルである事を表す要素です。作品のタイトルの例として、書籍、紙、エッセイ、詩、楽譜、歌、台本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇制作を、劇、オペラ、ミュージカル、展覧会などがあります。
citeサイト 要素は、人の名前=作品であっても、人の名前には使えません。

どのカテゴリに属しているの?
cite要素は フロー・コンテンツ, フレージング・コンテンツというコンテンツ・カテゴリに属している要素です。
梱包できるタグは?
cite 要素に梱包できるタグコンテンツ・モデルは、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

takuコンピュータやブラウザに作品のタイトルを伝えるためのタグです。

どうやって使うの?
作品のタイトルを表す記述を、
<cite> タグで挟んで使います。

citeサイト 要素は書籍の作家や、作曲家、映画監督、漫画家など製作者の作った作品のタイトルを <cite></cite> で挟んで使います。

使い方
<cite>作品のタイトルを表す記述</cite>
コードサンプル
<section>
 <h2>好きなクラッシック楽曲一覧</h2>
  <ul>
   <li>楽曲:<cite>運命</cite> 作曲者:ヴェートーヴェン</li>
   <li>楽曲:<cite>子犬のワルツ</cite> 作曲者:ショパン</li>
   <li>楽曲:<cite>トルコ行進曲</cite> 作曲者:モーツァルト</li>
  </ul>
</section>
ブラウザでの表示例
https://codehero.shibajuku.net/html/cite/sample01/
どこでも使えるの?
citeサイトタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
citeサイト タグで挟んだ箇所 <cite> ~ </cite> は、斜体で表示されます。文字を斜体にする目的で利用するのはやめましょう。 また、HTML5より前のHTMLでは出典先、参照先を表すという要素で、作品名だけではなく作者名や著者名などにも使うことができました。しかし、 HTML5では作品のタイトルを表すのみの要素となり、使用範囲が狭くなったので気をつけましょう。

taku作品のタイトルを表すためのタグです。文字を斜体にしたい場合はCSSで行いましょう。

使える属性は?
グローバル属性のみが使えます。

<cite> タグには、どの要素にでも使えるグローバル属性のみが使えます。

takuclass属性やid属性などのグローバル属性が使えます。

サンプルが見たい
<cite>タグを使ったサンプルを
いくつか紹介

<cite> タグを使ったサンプルを紹介します。

基本的な<cite>タグのサンプル

コードサンプル
<body>
  <p>私は<cite>CodeHero</cite>というタグ辞典サイトを使って勉強しています。
  </p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/cite/sample02/
コードサンプル
<body>
  <p>最近夏目漱石の<cite>吾輩は猫である</cite>を読んでいます。猫が吾輩だなんで興味をそそられました。
  </p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/cite/sample03/

taku<cite>タグは様々な作品のタイトルを表すのに使います。

デフォルトスタイルは?
デフォルトでは、
文字が斜体になる。

一般的なブラウザで cite要素を表示した場合、cite要素は文字が斜体になります。 具体的には、下記のCSSと同等のスタイルが適用されます。

sample要素のデフォルトスタイル
p {
  font-style: oblique;
}

taku文字を斜体にしたい場合はCSSのfont-styleプロパティを使いましょう。また、デフォルトで斜体のため、通常書体に戻す場合もfont-styleプロパティを使いましょう。

対応ブラウザは?
基本的にどのブラウザでも使えます。

<cite>要素は HTML1以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり ~
Edge
Edge あり
Google Chrome
Google Chrome あり
Firefox
Firefox あり
Safari
Safari あり
Opera
Opera あり

takuモダンブラウザは問題ありません。

このリファレンスを書いた人

taku

taku

ふとしたきっかけで、Web制作について触れ「楽しいな!」と思った事からHTML、CSSのコーディング、Webデザインを勉強中しています。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて