[26] 参照先のタイトルを表す cite要素を使おう

最終更新日:2017年11月04日  (初回投稿日:2011年09月26日)

<cite>要素は、クリエイティブな作品(a creative work)への参照を表す要素です。

クリエイティブな作品とは、以下のものだそうです。
書籍、新聞記事、エッセイ、詩、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、劇場作品、演劇、オペラ、ミュージカル、展覧会、法的事例報告、コンピュータプログラム、ウェブサイト、ウェブページ、ブログなどの投稿記事・コメント、ツイート、スピーチ(文書や口頭での)など。
著作権が発生しているものって考えるといいかも。

<q>要素<blockquote>要素などで、テキストを「引用」した時などに、そのタイトル的な使い方をします。

使用する要素 <cite> 〜 </cite>

この<cite>要素W3CWHATWG とで仕様が違います。

W3C の仕様だと 作品名・著者名・そのURL を入れることができます。

W3Cの仕様書から
It must include the title of the work or the name of the author (person, people or organization) or an URL reference.

WHATWGの仕様を見ると、使って良いのは「作品名」だけ。
<cite>要素は人名をマークアップするために使ってはならない となっています。

WHATWGの仕様書から
The cite element represents the title of a work.
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.

「cite」は「引用する、引き合いに出す」といった意味の動詞です。

ウェブサイトのサイトは「site」。site は「位置、所在地、現場」などを表す単語です。
なんだか ややこしいですね...。

ちなみに、「cite」属性というのが <ins> <del> のところで出てきましたが、あっちは属性で引用元のURLを書く。こちらは 要素で作品名(など)のテキストをマークアップします。

WHATWG の仕様で <cite>を使うと

WHATWG の仕様では、<cite>要素「作品のタイトル」を表し、人名には使えないことになっています。

サンプルを見てみましょう。
ブラウザのデフォルトスタイルでは、<cite>要素はイタリックで表示されます。

時々読み返すのはジェフリー・アーチャー。特に、大統領に知らせますか?(原題 : SHALL WE TELL THE PRESIDENT ? )は何度読んでもおもしろいから不思議です。

HTMLはこちら。作者名はそのままで、作品名だけに<cite>を使っています。

<p>
時々読み返すのはジェフリー・アーチャー。特に、<cite>大統領に知らせますか?(原題 : SHALL WE 
TELL THE PRESIDENT ?)</cite>は何度読んでもおもしろいから不思議です。</p>

イタリックになるだけでは目立たないので、CSSで文字の太さや色を変えたり、「」などを擬似要素 ::before と ::after で付けたほうがイイね。

時々読み返すのはジェフリー・アーチャー。特に、大統領に知らせますか?(原題 : SHALL WE TELL THE PRESIDENT ? )は何度読んでもおもしろいから不思議です。

CSSはこちら。イタリックをやめて、文字をブルーにし、「」を付けました。

cite {
	color:#36C;        /*文字色をブルーに*/
	font-style:normal  /*イタリックをノーマルに*/
    }
cite::before {
	content:"「"       /*先頭に "「 " を*/
    }
cite::after {
	content:"」"       /*末尾に " 」" を*/
    }

W3C の仕様で <cite>を使うと

W3C の仕様だと <cite>要素「作品名」「著者名」「そのURL」をマークアップできるようになっています。

下記は W3C の仕様書に載っていたサンプルです。
<cite>要素で ブログコメントの著者(人名)を特定し、その人のサイトへのハイパーリンクも含めています。

<article id="comment-1">
  Comment by <cite><a href="https://oli.jp">Oli Studholme</a></cite>
  <time datetime="2013-08-19T16:01">August 19th, 2013 at 4:01 pm</time>
  <p>Unfortunately I don’t think adding names back into the definition of <code>cite</code>
  solves the problem: of the 12 blockquote examples in
  <a href="https://oli.jp/example/blockquote-metadata/">Examples of block quote metadata</a>,
  there’s not even one that’s <em>just</em> a person’s name.</p>
  <p>A subset of the problem, maybe…</p>
</article>

下記も W3C の仕様書に載っていたサンプル。
<cite>要素で 検索結果のURLを特定しています。

<p><a href="https://www.w3.org/html/wg/">W3C <i>HTML Working Group</i></a></p>
<p><cite>www.w3.org/<b>html</b>/wg/</cite></p>
<p>15 Apr 2013 - The <i>HTML Working Group</i> is currently chartered to continue its
work through 31 December 2014. A Plan 2014 document published by the...</p>

次回予告

いかがでしたか?
W3C と WHATWG の仕様が違うので、どう使うか迷うところですね。
人名や URL を <cite>要素でマークアップしたからと言って、深刻なエラーになるわけでも無いので、あまり深く考えずに使って良いのかもしれません。

次回は <s>要素<u>要素 について。
HTML5 での s要素 u要素は、草案中は廃止と言われていましたが、以前とは別の役割を定義され、勧告時に復活しました。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.