引用記号として使える引用符や括弧をHTMLに書く方法

一般的にキーボードから直接入力できる引用符は、アポストロフィの「 ' 」と、クォーテーションマークの「 " 」です。しかし、英語・フランス語・ドイツ語など様々な言語の文章中で引用符として使われる記号には他にも種類があり、‘曲線’の引用符や ‟二重線„ の引用符のほか〝斜線〞の引用符などがあります。引用符の表示位置は文字の上側だけでなく下側の場合もあり、開始引用符は “上付き” でも終了引用符は “下付き„ になるような引用符もあります。
 
HTMLに書いてウェブ上の文章中でも使える様々な引用符

HTMLに書いてウェブ上の文章中でも使える様々な引用符


また、文章中に引用を書く際には引用符だけでなく括弧(かっこ)が使われることもあります。日本語の文章では「鉤括弧(カギカッコ)」や『二重鉤括弧』がよく使われますが、欧文では«ギュメ»と呼ばれる山括弧のような括弧記号が引用に使われることもあります。
 
山括弧のような「ギュメ」も引用記号として使われる

山括弧のような「ギュメ」も引用記号として使われる


引用符や括弧には専用の書き方がある
これらの様々な引用符は、PCのキーボードから直接入力することはできなくても、簡単にウェブ上に表示できます。もし、HTMLの文字コードが「UTF-8」などのUnicodeなら、本記事に掲載している記号をコピー&ペーストしてHTMLソース中に転記すればそのまま様々な引用符を書くことができます。SHIFT-JISなど(Unicode以外の)文字コードを使っている場合でも、文字実体参照という特殊な書き方を使えば、様々な引用符をHTMLソース内に記述できます。

本記事では、PCのキーボードから直接入力できる一般的な引用符(アポストロフィやクォーテーションマーク)以外の引用符も含めて、様々な引用符や括弧記号をウェブページ上に表示するためのHTMLの書き方をご紹介いたします。

【目次】
 

引用符の見え方は、フォントによっても異なる

文字は表示に使われるフォントによって見え方が異なりますが、引用符もフォントによって見え方が異なります。例えば、ゴシック系(sans-serif系)フォントだと区別が付きにくい引用符でも、明朝系(serif系)フォントで表示すると明確に区別できる場合もあります。
 
引用符はフォントによって見え方が異なる。特に図の左側のようなserif系フォントで表示すると違いがよく分かる

引用符はフォントによって見え方が異なる。特に図の左側のようなserif系フォントで表示すると違いがよく分かる


上図は、左側がserif系フォントで表示した引用符で、右側がsans-serif系フォントで表示した引用符です。右側の表示例だと斜めの引用符の向きは区別しにくいですが、左側の表示例だと曲線と丸で構成された引用符になっているので向きが明確に分かります。左側のように曲線で描かれる方が、引用符らしい引用符だと感じられるかもしれません。
 
serif系フォント(左側)だと、引用符の向きの違いが明確

serif系フォント(左側)だと、引用符の向きの違いが明確


上図では、紫色の丸で囲んだ左側のフォントの方が、水色の丸で囲んだ右側のフォントよりも、引用符の向きの違いが分かりやすいでしょう。

CSSでのフォントの指定方法
文字の表示にserif系フォントを指定したい場合は、例えば以下のようにCSSを記述します。
span.abc {
   font-family: serif;
}
sans-serif系フォントを指定したい場合は、例えば以下のようにCSSを記述します。
span.xyz {
   font-family: sans-serif;
}
上記のCSSがある状態でHTMLを以下のように書くと、serif系フォントやsans-serif系フォントで表示されます。
<span class="abc">ここはserif系フォントで表示</span>
<span class="xyz">ここはsans-serif系フォントで表示</span>

 

キー入力できる引用符2つの表示例と書き方

様々な引用符の表示例や記述方法をご紹介する前に、まずはPCのキーボードでも直接入力できる標準的な引用符「 ' 」と「 " 」の見え方を掲載しておきます。これ以降にご紹介する各種引用符と比較してみて下さい。

なお、下図も含めて本記事に掲載している引用符の表示例画像では、フォントによる見え方の違いを示すために、左側には明朝系(serif系)のフォントで表示した引用符を掲載し、右側にはゴシック系(sans-serif系)のフォントで表示した引用符を掲載しています。さらに、参考としてUnicodeに定義されている記号の名称も左端に併記しています。
 
キー入力できる引用符2種類の表示例(左側はserif系フォント、右側はsans-serif系フォントでの表示例) 開始記号と終了記号の区別はない

キー入力できる引用符2種類の表示例(左側はserif系フォント、右側はsans-serif系フォントでの表示例) 開始記号と終了記号の区別はない


文字サイズが小さいと引用符の細かな差が見えにくくなりますから、本記事に掲載している引用符の表示例画像では、文字サイズを2倍~2.5倍に拡大しています。

アポストロフィ「 ' 」 &apos;
日本語キーボードでは、たいてい[Shift]+[7]キーで入力できます。記号をそのままHTMLソース内に書くこともできますが、HTMLタグの属性値を囲む引用符として「 ' 」を使うこともあるため、HTMLソース内では文字実体参照で「&apos;」と書いておく方法も使われます。

クォーテーションマーク「 " 」 &quot;
日本語キーボードでは、たいてい[Shift]+[2]キーで入力できます。記号をそのままHTMLソース内に書くこともできますが、HTMLタグの属性値を囲む引用符として一般的に「 " 」が使われるため、HTMLソース内では文字実体参照で「&quot;」と書いておく方法がよく使われます。

開始記号と終了記号が同じ
上記の引用符「 ' 」と「 " 」には、開始記号と終了記号の区別がありません。そのため、引用の開始時と終了時とで同じ記号を2回使います。しかし、以下にご紹介する各種引用符では、開始記号と終了記号が別々に存在します。また、終了記号には上付きの記号と下付きの記号の2種類がある場合もあります。

 

曲線型引用符 ‛シングルクォーテーションマーク‚ の表示方法

シングルクォーテーションマークには、引用符の向きが異なる下記の4種類があります。serif系フォントでは丸と曲線で構成される引用符として表示され、sans-serif系フォントでは斜め向きの引用符として表示されます。
 
シングルクォーテーションマーク4種類の表示例

シングルクォーテーションマーク4種類の表示例


LEFT SINGLE QUOTATION MARK(左シングルクォーテーション)「 ‘ 」 &lsquo;
主に引用の左側で、引用の開始記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けますが、文字実体参照で「&lsquo;」と書くことでも表示できます。(Unicode:U+2018)

RIGHT SINGLE QUOTATION MARK(右シングルクォーテーション)「 ’ 」 &rsquo;
主に引用の右側で、引用の終了記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けますが、文字実体参照で「&rsquo;」と書くことでも表示できます。(Unicode:U+2019)

SINGLE HIGH-REVERSED-9 QUOTATION MARK「 ‛ 」
文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。(Unicode:U+201B)

SINGLE LOW-9 QUOTATION MARK「 ‚ 」 &sbquo;
文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&sbquo;」と書くことで表示できます。(Unicode:U+201A)

 

曲線型二重引用符 ‟ダブルクォーテーションマーク„ の表示方法

ダブルクォーテーションマークにも、引用符の向きが異なる下記の4種類があります。serif系フォントでは丸と曲線で構成される引用符として表示され、sans-serif系フォントでは斜め向きの引用符として表示されます。
 
ダブルクォーテーションマーク4種類の表示例

ダブルクォーテーションマーク4種類の表示例


LEFT DOUBLE QUOTATION MARK(左ダブルクォーテーション)「 “ 」 &ldquo;
主に引用の左側で、引用の開始記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けますが、文字実体参照で「&ldquo;」と書くことでも表示できます。(Unicode:U+201C)

RIGHT DOUBLE QUOTATION MARK(右ダブルクォーテーション)「 ” 」 &rdquo;
主に引用の右側で、引用の終了記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けますが、文字実体参照で「&rdquo;」と書くことでも表示できます。(Unicode:U+201D)

DOUBLE HIGH-REVERSED-9 QUOTATION MARK「 ‟ 」
文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。(Unicode:U+201F)

DOUBLE LOW-9 QUOTATION MARK「 „ 」 &bdquo;
文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&bdquo;」と書くことで表示できます。(Unicode:U+201E)

 

斜線型二重引用符〝ダブルミニュート記号〟の表示方法

ダブルクォーテーションマークと似ていますが、ダブルミニュートと呼ばれる引用記号が3種類あります。serif系フォントでも曲線ではなく直線(斜線)で表示されます。開始記号として使われる引用符は1種類だけなので、合計は4種類ではなく3種類です。
 
ダブルミニュート記号3種類(図の赤色で表示した開始記号は上下どちらも同じ引用符)

ダブルミニュート記号3種類(図の赤色で表示した開始記号は上下どちらも同じ引用符)


REVERSED DOUBLE PRIME QUOTATION MARK(始めダブルミニュート記号)「〝」
主に引用の左側で、引用の開始記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+301D)

DOUBLE PRIME QUOTATION MARK「〞」
主に引用の右側で、引用の終了記号として使われる引用符です。文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。(Unicode:U+301E)

LOW DOUBLE PRIME QUOTATION MARK(終わりダブルミニュート記号)「〟」
主に引用の右側で、引用の終了記号として使われる引用符です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+301F)

 

引用に使われる括弧 ‹ギュメ›の表示方法

ギュメと呼ばれる引用記号は、日本語環境でも使われる山括弧と似ていますが異なる記号です。下図の表示例のように、一本線のギュメと二重線のギュメの2種類があります。
 
不等号や山括弧にも似た引用記号として使われる括弧「ギュメ」の表示例

不等号や山括弧にも似た引用記号として使われる括弧「ギュメ」の表示例


SINGLE LEFT-POINTING ANGLE QUOTATION MARK「 ‹ 」 &lsaquo;
主に引用の左側で、開き括弧として使われる記号です。文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&lsaquo;」と書くことでも表示できます。(Unicode:U+2039)

SINGLE RIGHT-POINTING ANGLE QUOTATION MARK「 › 」 &rsaquo;
主に引用の右側で、閉じ括弧として使われる記号です。文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&rsaquo;」と書くことでも表示できます。(Unicode:U+203A)

LEFT-POINTING DOUBLE ANGLE QUOTATION MARK「 « 」 &laquo;
主に引用の左側で、開き括弧として使われる記号です。文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&laquo;」と書くことでも表示できます。(Unicode:U+00AB)

RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK「 » 」 &raquo;
主に引用の右側で、閉じ括弧として使われる記号です。文字コードにUTF-8などのUnicodeを使っていれば、HTMLソースにそのままコピー&ペーストして書ける引用符です。そうでない場合は、文字実体参照で「&raquo;」と書くことでも表示できます。(Unicode:U+00BB)

 

引用括弧 «ギュメ» に似た <不等号> や〈山括弧〉や《二重山括弧》記号

ギュメに似た記号として、 <不等号> や〈山括弧〉や《二重山括弧》記号がありますので参考までにご紹介しておきます。

LESS-THAN SIGN(小なり記号)「 < 」 &lt;
PCからキー入力もできる記号で、HTMLではタグの開始記号としても使われます。そのため、HTMLソース内に記述する際には常に文字実体参照を使って「&lt;」と書く必要があります。(Unicode:U+003C)

GREATER-THAN SIGN(大なり記号)「 > 」 &gt;
PCからキー入力もできる記号で、HTMLではタグの終了記号としても使われます。そのため、HTMLソース内に記述する際には常に文字実体参照を使って「&gt;」と書く必要があります。(Unicode:U+003E)

LEFT ANGLE BRACKET(始め山括弧)「〈」
日本語環境で全角記号として表示される括弧の一種です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+3008)

RIGHT ANGLE BRACKET(終わり山括弧)「〉」
日本語環境で全角記号として表示される括弧の一種です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+3009)

LEFT DOUBLE ANGLE BRACKET(始め二重山括弧)「《」
日本語環境で全角記号として表示される括弧の一種です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+300A)

RIGHT DOUBLE ANGLE BRACKET(終わり二重山括弧)「》」
日本語環境で全角記号として表示される括弧の一種です。UnicodeだけでなくJISコードでも定義されているのでそのままHTMLソースに書けます。(Unicode:U+300B)

 

引用記号として使える引用符や括弧をHTMLに書く方法

本記事では、引用の開始記号や終了記号として使える引用符や括弧をHTMLソース内に書く方法をご紹介いたしました。HTMLソースの文字コードにUTF-8を採用して作成している場合には、ほぼ何も気にせずにそのままHTMLソース内に直接記号を書けるため楽です。もし、SHIFT-JISなどの文字コードを使っている場合は、文字実体参照の書き方を使って下さい。

特殊な記号の書き方については、以下の関連記事もぜひご参照下さい。

【関連記事】

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。