どんなタグ？
作品のタイトルを表す時には、
この<cite>タグを使う。
<p>
私は、ベートーヴェンの楽曲の中で<cite>運命</cite>が好きだ。
</p>cite 要素は<cite> ~ </cite>で挟まれた範囲が、作品のタイトルである事を表す要素です。作品のタイトルの例として、書籍、紙、エッセイ、詩、楽譜、歌、台本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇制作を、劇、オペラ、ミュージカル、展覧会などがあります。
cite 要素は、人の名前＝作品であっても、人の名前には使えません。
- どのカテゴリに属しているの？
- cite要素は フロー・コンテンツ, フレージング・コンテンツというコンテンツ・カテゴリに属している要素です。
- 梱包できるタグは？
- cite 要素に梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
コンピュータやブラウザに作品のタイトルを伝えるためのタグです。
どうやって使うの？
作品のタイトルを表す記述を、
<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では作品のタイトルを表すのみの要素となり、使用範囲が狭くなったので気をつけましょう。
作品のタイトルを表すためのタグです。文字を斜体にしたい場合はCSSで行いましょう。
使える属性は？
グローバル属性のみが使えます。
<cite> タグには、どの要素にでも使えるグローバル属性のみが使えます。
class属性や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/
<cite>タグは様々な作品のタイトルを表すのに使います。
デフォルトスタイルは？
デフォルトでは、
文字が斜体になる。
一般的なブラウザで cite要素を表示した場合、cite要素は文字が斜体になります。 具体的には、下記のCSSと同等のスタイルが適用されます。
p {
font-style: oblique;
}文字を斜体にしたい場合はCSSのfont-styleプロパティを使いましょう。また、デフォルトで斜体のため、通常書体に戻す場合もfont-styleプロパティを使いましょう。
対応ブラウザは？
基本的にどのブラウザでも使えます。
<cite>要素は HTML1以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり ~
- Edge
- Edge あり
- Google Chrome
- Google Chrome あり
- Firefox
- Firefox あり
- Safari
- Safari あり
- Opera
- Opera あり
モダンブラウザは問題ありません。
