ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
q 要素とは
<q> は HTML のインライン引用 (inline quotation) を表す意味タグです。文章の途中で「誰かの発言や別の文献から短く引用する」場面に使います。ブラウザは中身を引用符で自動的に囲んで表示します。
基本構文
<p>アインシュタインは <q>God does not play dice.</q> と語ったとされる。</p>
表示はブラウザの言語設定に応じて、英語環境なら "God does not play dice."、日本語環境なら 「God does not play dice.」 のように引用符が自動付与されます。
cite 属性 — 出典 URL
cite 属性で引用元の URL を指定できます。画面には表示されませんが、検索エンジンや支援技術がメタデータとして読み取れます。
<p>仕様書では <q cite="https://html.spec.whatwg.org/">
The q element represents some phrasing content quoted from another source.
</q> と定義されている。</p>
blockquote との違い
引用を表す要素は <q> と <blockquote> の 2 つで、長さ・位置で使い分けます。
| 要素 | 長さ | カテゴリ | 引用符 | 典型用途 |
|---|---|---|---|---|
<q> | 短い(1 文程度) | インライン | ブラウザが自動付与 | 本文中に挟む発言・フレーズ |
<blockquote> | 長い(段落以上) | ブロック | 自動付与なし(CSS や手動で) | 段落丸ごとの引用、長い文章の抜粋 |
CSS で引用符をカスタマイズ
ブラウザのデフォルト引用符を変えたい場合は quotes プロパティでスタイル指定します。
q {
quotes: "\201C" "\201D" "\2018" "\2019"; /* “ ” ‘ ’ */
}
q::before { content: open-quote; }
q::after { content: close-quote; }
ネストした引用(引用の中の引用)も quotes プロパティの 2 組目以降で制御できます。
使うべきでないケース
- 強調したい単語を囲みたいだけ — 引用ではないので
<strong>や<em>を使う。 - 専門用語の初出 —
<dfn>が適切。 - UI のラベル風に括弧で囲みたい — 引用ではないので素直に「」を書く方が読みやすい。
よくある質問
Q: q を使うと自動で「」が付くのが二重になる
A: 「」を手書きせず、<q> の中身だけ書くのが正しい使い方です。引用符付与は <q> の役割なので二重になりません。
Q: cite 属性は SEO に効くの?
A: 直接的なランキング要素ではありませんが、Google などの検索エンジンが「この文章は他サイトからの正当な引用」と認識する手がかりになります。コピーコンテンツ判定を避ける意味で書いておくと安心。
Q: 日本語の引用に q は使える?
A: 使えます。ただし日本語の場合は本文中に直接「」を書く方が読みやすいケースも多いので、機械可読性が要らないなら無理に使う必要はありません。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- クラウドネットワークの記事一覧 2026-10-02 16:08:51
- ルーティングとスイッチング完全ガイド — 静的/動的ルーティング/RIP/OSPF/BGP/VLAN/STP 2026-10-02 16:08:51
- ネットワークのアドレッシング完全ガイド — IP/MAC/ポート/サブネット/CIDR/IPv6/NAT 2026-10-02 16:08:51
- 本番環境のdll内で参照しているdllファイルの置き場所 2026-10-02 16:08:50
- 【Visual Studio】 C#のForm自動生成時に「値が有効な範囲にありません」エラー 2026-10-02 16:08:50
- 【Laravelエラー】does not comply with psr-4 autoloading standard. Skipping. 2026-10-02 16:08:50
- 【Laravelエラー】could not find driver(Windows, MySQL編) 2026-10-02 16:08:49
- The following channel memory did not pass cpu memory test. 2026-10-02 16:08:49
- 【pycharm】connecting to console が終わらない 2026-10-02 16:08:49
- 【DB2】テーブル定義からDDL(CREATE TABLE)を生成する方法 2026-10-02 16:08:49
- 【DB2】特定スキーマの全テーブルの全カラム情報を取得する方法 2026-10-02 16:08:48
- 【Vue.jsエラー】Error in created hook: "ReferenceError: axios is 2026-10-02 16:08:48
- 【Spring】@Dataとは 2026-10-02 16:08:48
- 【Xcodeエラー 】...のiPhone is busy: Preparing debugger support 2026-10-02 16:08:47
- 【Xcode/iPhoneアプリ】テンプレートの種類一覧 2026-10-02 16:08:47
コメントを削除してもよろしいでしょうか?