【HTML Living Standard】cite要素の使い方
cite要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
citeオブジェクトは、書籍、論文、映画、歌、演劇、絵画、彫刻、ウェブサイト、雑誌、新聞など、あらゆる種類の創造的な作品のタイトルを表すオブジェクトです。この要素は、文書内で引用元となる作品名を明示的に示すために使用され、そのテキストが単なる文字列ではなく、特定の作品のタイトルであることをセマンティックに（意味的に）定義します。
システムエンジニアを目指す初心者の方にとって、HTML要素の「意味付け」は非常に重要です。cite要素は、単にテキストを斜体にするだけでなく、その内容が作品のタイトルであるという情報をブラウザや検索エンジン、支援技術に正確に伝えます。これにより、コンテンツの構造がより明確になり、情報へのアクセス性や理解度が向上します。例えば、「夏目漱石の<cite>吾輩は猫である</cite>は、日本の文学作品です。」のように、作品名にcite要素を適用することで、読者だけでなく機械もそれが作品名であることを認識できます。
注意点として、cite要素は引用文そのものをマークアップするものではありません。長い引用文全体をマークアップするには<blockquote>要素やインラインの引用には<q>要素を使用し、cite要素はその引用元の作品タイトルを示すために特化して使われます。これにより、引用元と引用文が明確に区別され、文書の正確性が保たれます。通常、ブラウザではcite要素の内容は斜体で表示されますが、これはスタイルであり、その主要な目的は情報に意味を与えることです。
構文(syntax)
1<cite>作品のタイトル</cite>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLページ内移動とcite要素の活用
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTMLページ内移動とcite要素のサンプル</title> 7 <style> 8 /* 見やすくするための基本的なスタイル */ 9 body { font-family: sans-serif; margin: 20px; line-height: 1.6; } 10 section { margin-bottom: 50px; padding: 20px; border: 1px solid #ddd; border-radius: 5px; } 11 h1, h2 { color: #333; } 12 nav ul { list-style: none; padding: 0; } 13 nav li { margin-bottom: 10px; } 14 blockquote { border-left: 5px solid #ccc; padding-left: 15px; margin-left: 0; color: #555; } 15 /* cite要素は通常斜体で表示されます */ 16 cite { font-style: italic; } 17 </style> 18</head> 19<body> 20 21 <h1>ページ内移動と引用の例</h1> 22 23 <!-- 目次を作成し、各セクションへのリンクを配置 --> 24 <nav> 25 <h2>目次</h2> 26 <ul> 27 <li><a href="#section-top">ページの先頭へ</a></li> 28 <li><a href="#section-introduction">はじめに</a></li> 29 <li><a href="#section-quote">引用文のセクション</a></li> 30 <li><a href="#section-conclusion">まとめ</a></li> 31 </ul> 32 </nav> 33 34 <!-- id属性を付与することで、リンクのターゲットとして指定可能 --> 35 <section id="section-top"> 36 <h2>ページの先頭</h2> 37 <p>このページは、HTMLにおけるページ内移動と<code><cite></code>要素の使用方法を示すサンプルです。</p> 38 </section> 39 40 <section id="section-introduction"> 41 <h2>はじめに</h2> 42 <p> 43 HTMLでは、アンカーリンク（<code><a></code>要素）と<code>id</code>属性を組み合わせることで、 44 ページ内の特定の場所へスムーズに移動できます。 45 目次から各セクションへのリンクをクリックして、動作を確認してください。 46 </p> 47 </section> 48 49 <section id="section-quote"> 50 <h2>引用文のセクション</h2> 51 <p>このセクションでは、<code><cite></code>要素を使って引用元をマークアップしています。</p> 52 <!-- blockquote要素を使ってブロックレベルの引用を示し、cite属性で引用元URLを示す --> 53 <blockquote cite="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%B3%E3%83%BB%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA"> 54 <p>ステイ・ハングリー、ステイ・フーリッシュ。</p> 55 <footer> 56 — <cite>スティーブ・ジョブズ</cite> 57 </footer> 58 </blockquote> 59 <p> 60 上記の言葉は、<cite>スティーブ・ジョブズ</cite>がスタンフォード大学の卒業式で行ったスピーチの結びの言葉です。 61 <code><cite></code>要素は、作品のタイトル、著者、引用元など、創造的な作品の出典をマークアップするために使用されます。 62 </p> 63 </section> 64 65 <section id="section-conclusion"> 66 <h2>まとめ</h2> 67 <p> 68 このサンプルでは、ページ内リンクによる「指定した位置に移動」の機能と、 69 <code><cite></code>要素による引用元のマークアップの両方を確認できました。 70 これらの技術は、ウェブページのユーザビリティとセマンティックな構造を向上させるために役立ちます。 71 </p> 72 <p><a href="#section-top">ページの先頭へ戻る</a></p> 73 </section> 74 75</body> 76</html>
このサンプルコードは、HTMLにおける「ページ内移動」の機能と「<cite>要素」の利用方法を初心者向けに説明しています。
まず「ページ内移動」については、<a>タグ（アンカーリンク）のhref属性に"#セクションID"を指定し、移動したい先の要素にそのIDを付与することで実現します。これにより、目次などからクリックするだけで、ページの特定の位置へスムーズに移動できる仕組みです。
次に<cite>要素についてですが、これは創造的な作品（書籍、論文、映画、楽曲など）のタイトル、著者名、または引用元をマークアップするために使用されるHTML要素です。この要素自体には、引数や戻り値といった特別な機能はありません。ブラウザでは一般的に、<cite>要素で囲まれたテキストは斜体で表示されることが多いです。
サンプルコードでは、「ステイ・ハングリー、ステイ・フーリッシュ。」という引用文の出典を<cite>スティーブ・ジョブズ</cite>として明確に示しています。このように<cite>要素を使用することで、コンテンツの意味構造を正しく伝え、引用元の情報をユーザーや検索エンジンに対して明確にすることができます。これらの技術は、ウェブページのユーザビリティと情報の正確性を高める上で非常に役立ちます。
このサンプルコードでは、ページ内移動のために<a>タグのhref属性に#とid名を指定しています。移動先の要素には必ずid属性を設定し、そのid名はページ内で重複しないように注意してください。id名は一意である必要があります。
また、<cite>要素は書籍や論文などの作品のタイトルやその出典を示すために使用されます。引用内容自体には<q>（短い引用）や<blockquote>（ブロック引用）を使用し、<cite>はその引用元の名前やタイトルを明示するものです。<blockquote>のcite属性は引用元のURLを示すメタデータであり、表示される<cite>要素とは役割が異なりますので混同しないようにしてください。正しく使い分けることで、ページの構造がより明確になります。
HTML 指定の場所にジャンプする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML 指定の場所にジャンプするサンプル</title> 7 <style> 8 body { 9 font-family: sans-serif; 10 margin: 20px; 11 line-height: 1.6; 12 } 13 /* 各セクションの高さを調整し、ジャンプを視覚的に確認しやすくします */ 14 section { 15 height: 500px; 16 border: 1px solid #e0e0e0; 17 margin-bottom: 25px; 18 padding: 20px; 19 background-color: #f9f9f9; 20 scroll-margin-top: 20px; /* 固定ヘッダーなどがある場合にジャンプ位置を調整 */ 21 } 22 h1, h2 { 23 color: #333; 24 } 25 nav ul { 26 list-style: none; 27 padding: 0; 28 display: flex; /* ナビゲーションリンクを横並びに */ 29 gap: 20px; /* リンク間のスペース */ 30 margin-bottom: 30px; 31 background-color: #f0f0f0; 32 padding: 10px 20px; 33 border-radius: 5px; 34 } 35 nav a { 36 text-decoration: none; /* 下線を非表示に */ 37 color: #007bff; /* リンクの色 */ 38 font-weight: bold; 39 } 40 nav a:hover { 41 text-decoration: underline; /* ホバー時に下線を表示 */ 42 } 43 cite { 44 font-style: italic; /* cite要素の一般的なスタイル */ 45 color: #555; 46 } 47 </style> 48</head> 49<body> 50 51 <h1>HTML ページ内の指定の場所にジャンプするサンプル</h1> 52 53 <!-- ナビゲーションリンク: クリックするとページ内の指定の場所にスムーズに移動します --> 54 <nav> 55 <ul> 56 <li><a href="#section1">セクション1へ移動</a></li> 57 <li><a href="#section2">セクション2へ移動（cite要素の例）</a></li> 58 <li><a href="#section3">セクション3へ移動</a></li> 59 </ul> 60 </nav> 61 62 <!-- ジャンプ先のセクション1: id属性でユニークな識別子をつけます --> 63 <section id="section1"> 64 <h2>セクション1: はじめに</h2> 65 <p>このセクションは、ページ内の最初のコンテンツです。上のナビゲーションリンクから直接ここへジャンプできます。</p> 66 <p>長い文章を仮定して、スクロールが必要になるようにします。この機能を「ページ内リンク」または「アンカーリンク」と呼びます。</p> 67 <p>HTMLの<code><a></code>タグの<code>href</code>属性に<code>#</code>と<code>id</code>名を指定し、ジャンプ先の要素にも同じ<code>id</code>名を指定することで機能します。</p> 68 <p>システムエンジニアとして、ユーザーフレンドリーなWebページを作成するために、この基本的なナビゲーション機能を理解することは非常に重要です。</p> 69 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Proin id est non purus varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in odio vel turpis ultrices tempor a eu ipsum. Praesent quis tellus sit amet quam feugiat consectetur. Sed non erat vitae neque fermentum varius. Suspendisse potenti.</p> 70 <p>Donec feugiat, justo vel semper ultrices, libero eros efficitur lorem, in tristique ipsum lectus vel nunc. Sed in justo ac sem congue volutpat. Nunc non dolor eu orci pulvinar aliquet. Aliquam erat volutpat. Mauris ac elit eu nisi malesuada auctor.</p> 71 </section> 72 73 <!-- ジャンプ先のセクション2: cite要素の使用例を含みます --> 74 <section id="section2"> 75 <h2>セクション2: `cite`要素の利用例</h2> 76 <p>このセクションでは、<code><cite></code>要素の使用例を示します。</p> 77 <p><code><cite></code>要素は、作品のタイトル（本、論文、歌、映画、テレビ番組、絵画、彫刻など）を参照するために使用されます。</p> 78 <p>例: <cite>HTML Living Standard</cite> は、Webのコア技術であるHTMLの最新仕様を定義しています。</p> 79 <p>別の例: スティーブ・ジョブズの有名なスピーチは <cite>スタンフォード大学卒業式辞</cite> で行われました。</p> 80 <p><code><cite></code>要素自体には「指定の場所にジャンプ」する機能はありませんが、ページ内のコンテンツの一部として情報を整理するために使われます。</p> 81 <p>これにより、検索エンジンやスクリーンリーダーなどの補助技術がコンテンツの意味をより正確に理解できるようになります。</p> 82 <p>Donec feugiat, justo vel semper ultrices, libero eros efficitur lorem, in tristique ipsum lectus vel nunc. Sed in justo ac sem congue volutpat. Nunc non dolor eu orci pulvinar aliquet. Aliquam erat volutpat. Mauris ac elit eu nisi malesuada auctor.</p> 83 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Proin id est non purus varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in odio vel turpis ultrices tempor a eu ipsum. Praesent quis tellus sit amet quam feugiat consectetur. Sed non erat vitae neque fermentum varius. Suspendisse potenti.</p> 84 </section> 85 86 <!-- ジャンプ先のセクション3: まとめ --> 87 <section id="section3"> 88 <h2>セクション3: まとめ</h2> 89 <p>このセクションは、ページ内の最後のコンテンツです。ここへも直接ジャンプできます。</p> 90 <p><code><a href="#id名"></code> と <code><要素 id="id名"></code> を組み合わせることで、ページ内の特定の場所にスムーズに移動できます。</p> 91 <p>この機能は、長文のドキュメントやFAQページなどで、ユーザーが目的の情報を素早く見つけられるようにするために非常に役立ちます。</p> 92 <p>HTMLの基本的な要素と属性を理解し、適切に利用することが、効果的なWebページ開発の第一歩です。</p> 93 <p>Donec feugiat, justo vel semper ultrices, libero eros efficitur lorem, in tristique ipsum lectus vel nunc. Sed in justo ac sem congue volutpat. Nunc non dolor eu orci pulvinar aliquet. Aliquam erat volutpat. Mauris ac elit eu nisi malesuada auctor.</p> 94 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Proin id est non purus varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in odio vel turpis ultrices tempor a eu ipsum. Praesent quis tellus sit amet quam feugiat consectetur. Sed non erat vitae neque fermentum varius. Suspendisse potenti.</p> 95 <p>Donec feugiat, justo vel semper ultrices, libero eros efficitur lorem, in tristique ipsum lectus vel nunc. Sed in justo ac sem congue volutpat. Nunc non dolor eu orci pulvinar aliquet. Aliquam erat volutpat. Mauris ac elit eu nisi malesuada auctor.</p> 96 </section> 97 98</body> 99</html>
このサンプルコードは、HTMLでWebページ内の特定の場所にジャンプする機能と、cite要素の利用方法をシステムエンジニアを目指す初心者にも分かりやすく示しています。
Webページ内で特定の場所へ移動する機能は「ページ内リンク」または「アンカーリンク」と呼ばれます。これは、<a>（アンカー）タグのhref属性に#記号とジャンプ先の要素のid名を組み合わせて指定することで実現します。例えば、<a href="#section2">のように記述し、ジャンプ先の要素には<section id="section2">のように、リンクと同じid名を指定します。ユーザーがこのリンクをクリックすると、ブラウザは自動的に指定されたidを持つ場所までスムーズにスクロールし、ページ内の長いコンテンツを効率的に閲覧できるようになります。この機能はHTMLの標準的な動作であり、特定の引数や戻り値は存在しません。
一方、cite要素は、作品のタイトル（例えば、本、論文、歌、映画など）を参照するために使用されるHTML要素です。サンプルコードでは、「HTML Living Standard」や「スタンフォード大学卒業式辞」といった作品名に<cite>タグが適用されています。これにより、テキストの意味が明確になり、検索エンジンやスクリーンリーダーなどの補助技術がコンテンツをより正確に理解するのに役立ちます。cite要素自体にはページ内ジャンプ機能はなく、単独で引数や戻り値を持つものではありません。これはコンテンツの意味的な構造を強化するために利用される要素です。これらの機能を適切に活用することで、ユーザーにとってナビゲーションしやすく、意味の分かりやすいWebページを作成できます。
このサンプルコードは、HTMLでページ内の特定の場所へジャンプする「アンカーリンク」の仕組みを示しています。リンク元である<a>タグのhref属性に#とid名を指定し、ジャンプ先の要素に同じid属性を設定することで機能します。このid名はページ内で必ず一意（ユニーク）である必要があり、重複すると正しく動作しないため注意が必要です。
また、cite要素は作品のタイトル（本、論文など）を示すためのものであり、ジャンプ機能とは直接関係ありません。これはテキストを単に斜体にする目的ではなく、その情報の意味を正しく示すために使われます。コード内のscroll-margin-topは、固定されたヘッダーなどがある場合に、ジャンプ先のコンテンツが隠れないよう位置を調整するCSSプロパティで、ユーザーがスムーズに閲覧できるよう配慮するための補足情報です。