記事タイトル
本記事は HTML Living Standard を参考にした。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
| この記事の要点 |
|
要素は、創作物 (書籍、論文、映画、楽曲、絵画、Webサイト、ブログ記事等) のタイトルへの参照を示すインライン要素です。デフォルトのスタイルはイタリック (italic) です。
夏目漱石の代表作 こころ は、明治末期の精神を描いた小説である。
映画 君の名は。 は新海誠監督の作品で、興行収入 250 億円を記録した。
詳細は HTML Living Standard の section 4.5.6 を参照。
表示と既定スタイル
ブラウザの既定 CSS では はイタリックで表示されます。日本語フォントにはイタリック体が無いことも多く、その場合は斜体合成 (oblique) で代用されます。
/* ブラウザのデフォルト */
cite {
font-style: italic;
}
/* 日本語サイトでイタリックが気持ち悪いとき */
cite {
font-style: normal;
color: #4f46e5;
}
/* 書名を「」で囲む見た目に */
cite::before { content: "『"; }
cite::after { content: "』"; }
cite { font-style: normal; }HTML5 仕様: 著者名は対象外
HTML4 までは に著者名も含めて良いとされていましたが、HTML5 仕様では「作品のタイトル」のみと限定されました。著者名は対象外です。
夏目漱石 の作品である。
夏目漱石の作品 こころ は名作である。
著者:
作品: こころ
ただし、WHATWG の HTML Living Standard と W3C HTML5 で解釈に差がある時期もあり、現実のサイトでは著者名を で囲む例も残っています。仕様準拠を厳格にするなら作品名のみが正解です。
blockquote cite="..." 属性との違い
紛らわしいですが、 や の cite 属性は引用元の URLを指定するもので、要素としての とは別物です。
引用された文章...
HTML Living Standard によれば...
引用された文章...
— WHATWG HTML Standard
関連する引用系要素まとめ
| 要素 | 用途 | 表示 |
|---|---|---|
| 作品タイトル参照 | インライン / イタリック |
| 短い引用 (1 行以内) | インライン / 引用符が自動付与 |
| ブロックレベルの長い引用 | ブロック / インデント |
| 用語の定義箇所 | インライン / イタリック |
| 連絡先情報 | ブロック / イタリック |
彼は こんにちは
と言った。
長い引用文がここに入ります。複数段落にもできます。
引用元は cite 属性で URL を指定します。
HTML (HyperText Markup Language) は Web ページ記述言語である。
Contact: info@example.com
東京都千代田区...
SEO への影響
要素自体が直接 SEO ランキングに影響することはほぼ無いと考えられていますが、構造化データと組み合わせると効果的です。
typical な使い方パターン
参考文献
- 達人プログラマー 第 2 版 - オーム社, 2020
- リーダブルコード - O'Reilly Japan, 2012
- HTML Living Standard - WHATWG
Vincent van Gogh, The Starry Night, 1889
君の名は。 レビュー
新海誠監督の 君の名は。 は...
FAQ
Q: と 、どう使い分ける?
A: は作品タイトル、 は外来語・専門用語・思考など。両方ともデフォルトはイタリックですが意味が違います。
Q: イタリック表示が日本語サイトで違和感ある
A: CSS で cite { font-style: normal; } または cite::before/::after で『』記号を付けると日本語サイトに馴染みます。
Q: のネストは可能?
A: 仕様上は可能ですが、通常そうする意味はありません。フレージング・コンテンツなので 内に や 等は配置できます。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法｜window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧｜403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧｜500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは｜モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- UE5 で鏡を作る方法 (Planar Reflection / Scene Capture / SSR / マテリアル) 2026-06-11 04:04:53
- Oracle CKPT (Checkpoint Process) の役割とパラメータ (リカバリ時間短縮) 2026-06-11 04:04:53
- Java プログラムの全体構造 (package / import / class / main / module / Maven) 2026-06-11 04:04:53
- UE5 Data Asset と Data Table の違い (使い分け / Asset Manager / CSV 連携) 2026-06-11 04:04:53
- Java 比較演算子の使い方 (== / equals / compareTo / Objects.equals) 2026-06-11 04:04:53
- Linux への scikit-learn インストール (pip / venv / Conda / 依存パッケージ) 2026-06-11 04:04:53
- Scratch でスプライトを追加する 5 つの方法 (ライブラリ / 自分で描く / アップロード / カメラ / サプライズ) 2026-06-11 04:04:53
- JavaScript の "" と '' の違い (仕様上は等価 / テンプレートリテラル / JSON / Lint) 2026-06-11 04:04:53
- Laravel マイグレーションファイルの作成 (make:migration / Schema::create / down 実装) 2026-06-11 04:04:53
- Unity 「3 Skyboxes」アセットの使い方と Skybox の基礎 (Material / Lighting / HDR) 2026-06-11 04:04:53
- Linux で IP アドレスを確認するコマンド完全ガイド（ip / ifconfig / hostname） 2026-06-11 04:04:52
- Docker イメージ操作完全ガイド（search / pull / images / rmi / multi-arch） 2026-06-11 04:04:52
- SQL の組み込み関数まとめ（集計 / 文字列 / 日時 / 数値 / 条件 / ユーザー定義） 2026-06-11 04:04:52
- Laravel Query Builder の DELETE 完全ガイド（Eloquent / Soft Delete / 一括削除） 2026-06-11 04:04:52
- HTML <wbr> 要素の使い方と <code>word-break</code> / ­ との違い 2026-06-11 04:04:52
コメントを削除してもよろしいでしょうか？