HTMLの特殊文字で表示できる括弧を現役エンジニアが紹介【初心者向け】

HTMLの特殊文字で表示できる括弧について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

HTMLの特殊文字で表示できる括弧を表示してみよう！

今回は、HTMLの特殊文字で表示できる括弧を表示する方法について解説していきます。

特殊文字とは

特殊文字とは、文字コードにおける漢字・英語、数字やカナ・かな文字以外の文字のことを指します。

機種依存文字なとも特殊文字として扱われ、場合によっては意図したものと全く違う記号が表示されることあるため、注意が必要です。

 

括弧の出し方

ほとんどの括弧記号に関しては、「かっこ」と入力し、文字変換で簡単に使用することが可能です。

中にはコードで入力した方がよいのものあるものの、実際サイト制作で必要になることはないと考えてよいでしょう。

 

一般的によく使われるであろう括弧

どんな括弧があるか、一覧と一般的な呼び方をみてみましょう。

（ ）／丸括弧（全角）
( )／丸括弧（半角）
「 」／カギ括弧（全角）
『 』／二重鉤括弧（全角）
【 】／すみつき括弧（全角）
［ ］／大括弧（全角）
[ ]／大括弧（半角）
{ }／中括弧（全角）
{ }／中括弧（半角）
〈 〉／山括弧（全角）
‹ ›／山括弧（半角）
《 》／二重山括弧（全角）
«»／二重山括弧（半角）、ギュメ
〔 〕／甲括弧（全角）
“”／ダブル引用符（全角）
‘’／シングル引用符（全角）

 

機種依存文字なので、文字コード必須となる括弧

文字コードでの表示は下に表示しております。

〖 〗／白抜き隅付き括弧
｟ ｠／二重ふた括弧
〘 〙／二重亀甲括弧
‹ ›／山括弧（半角）
« »／二重山括弧(半角)
﹁ ﹂／縦組みの場合のカギ括弧
﹃ ﹄／縦組みの場合の二重カギ括弧
︵ ︶／縦組みの場合の丸括弧
︹ ︺／縦組みの場合の亀甲括弧
︿ ﹀／縦組みの場合の山括弧
︽ ︾／縦組みの場合の二重山括弧
︷ ︸／縦組みの場合の山括弧

---

〖  〗／白抜き隅付き括弧
｟  ｠／二重ふた括弧
〘  〙／二重亀甲括弧
‹  ›／山括弧（半角）
«  »／二重山括弧(半角)
﹁  ﹂／縦組みの場合のカギ括弧
﹃  ﹄／縦組みの場合の二重カギ括弧
︵  ︶／縦組みの場合の丸括弧
︹  ︺／縦組みの場合の亀甲括弧
︿  ﹀／縦組みの場合の山括弧
︽  ︾／縦組みの場合の二重山括弧
︷  ︸／縦組みの場合の山括弧

 

注意：一部の括弧表示は文字コードを使うこと！

基本的な全角の括弧については、そのまま入力でよいでしょう。

一部の括弧については、機種依存文字となるので、HTML上では文字コードでの入力がベターです。

クライアントさんからいただいた原稿からコピー＆ペーストする際にはこれらの括弧は大丈夫かを確認すること（別途文字校正担当さんがいても軽くは見ておきましょう）、特殊文字記号を使った場合は、制作物の納品前にそういった記号が正しく表示されているか？を端末毎にチェックしておきましょう。

[PR] Webデザインで副業する学習方法を動画で公開中

注意：サイト全体での括弧の統一

補足的な注意となりますが、サイト全体での括弧の統一も重要です。半角と全角が交じるような括弧がでてくるサイトは読みにくく、文字校正上でも適切ではありません。一般的な用例、用法に沿った使い方をすること、統一をするように心がけることも必要です。

今回は、HTMLの特殊文字で表示できる括弧表示、表示方法について紹介しました。

 

執筆してくれたメンター

ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。