CSSを使用したカッコの作り方

更新2025/08/27

「」や（）といったカッコ記号をCSSで表示するためのコードメモです。背景としてカッコを使用したい、デザインを変化させて強調させたいときなどに使えます。

content プロパティを使用したカッコの作り方

スタイルにこだわらなければ、contentプロパティを使ってそのまま文字を表示させる方法が簡単です。
文字入力できるカッコなら利用できるので、CSSで形を作るのが難しい場合もこちらの方法が便利。

デメリットはフォントによって表示が異なること、カッコの大きさもフォントに依存するので細かい調整が難しいことがあげられます。

（）丸カッコや｛｝波カッコはCSSでの形作りが難しいので、テキストを利用してカッコを表示させます。デザインにこだわる場合はテキストではなく画像を使用しましょう。
もちろん他の記号でも使えるので、この書き方はさまざまな記号にも対応できます。

【サンプルコード】

HTML
<div class="inner">
  <p class="kakko01">（）カッコの文字を使って全体を囲みます。</p>
  <p class="kakko02">{}カッコの文字を使って全体を囲みます。</p>
</div>
CSS
.kakko01, .kakko02 {
  padding: 30px;
  position: relative;
  text-align: center;
}
.kakko01::before, .kakko01::after,
.kakko02::before, .kakko02::after {
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.kakko01::before {
  content: '（';
  left: 0;
}
.kakko01::after {
  content: '）';
  right: 0;
}
.kakko02::before {
  content: '{';
  left: 0;
}
.kakko02::after {
  content: '}';
  right: 0;
}

::before、::after といった疑似要素を使用してカッコを表示。
親となる要素にposition: relative; を設定し、疑似要素に position: absolute; をつけて位置調整できるようにしています。

border プロパティを使用したカッコの作り方

「」カギカッコや［］大カッコ（角カッコ）は border を使って表現することができます。

こちらも疑似要素を使用してカッコ要素を作り、position で位置調整できるようにしています。borderプロパティを使用する場合は、必要な分だけ border を設定し、大きさは width と height で調整します。

カギカッコ「」

【カギカッコのサンプルコード】（コード右上の実行ボタン（Execute Code）から実際の表示を確認できます）

<style>
 .inner {
  max-width: 600px;
  margin: 40px auto 0;
}
.kagikakko {
  padding: 30px;
  position: relative;
}
.kagikakko::before, .kagikakko::after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
}
.kagikakko::before {
  border-left: solid 3px #000;
  border-top: solid 3px #000;
  top: 0;
  left: 0;
}
.kagikakko::after {
  border-right: solid 3px #000;
  border-bottom: solid 3px #000;
  bottom: 0;
  right: 0;
}
</style>
<div class="inner">
  <p class="kagikakko">「」カッコをCSSで作って全体を囲みます。</p>
</div>

カギカッコの場合、位置が上下になるように左側は top に、右側は bottom に設定するのがポイントです。

大カッコ［］

【大カッコのサンプルコード】

<style>
 .inner {
  max-width: 600px;
  margin: 20px auto 0;
}
.daikakko {
  padding: 30px;
  position: relative;
  text-align: center;
}
.daikakko::before, .daikakko::after {
  content: '';
  width: 20px;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.daikakko::before {
  border-left: solid 3px #000;
  border-top: solid 3px #000;
  border-bottom: solid 3px #000;
  left: 0;
}
.daikakko::after {
  border-right: solid 3px #000;
  border-top: solid 3px #000;
  border-bottom: solid 3px #000;
  right: 0;
}
</style>
<div class="inner">
  <p class="daikakko">[]カッコをCSSで作って全体を囲みます。</p>
  <p class="daikakko">[]カッコをCSSで作って全体を囲みます。テキストが増えたらその分カッコも伸びます。<br>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

テキストの段落数によって大きさを変化させるために、height を「%」で指定しています。大きさを変化させたくない場合は px や rem、em などで設定してください。

background プロパティを使用したカッコの作り方

親子要素を作ってそれぞれに背景をつけることで【】のようなカッコを作ることもできます。

【サンプルコード】

<style>
 .inner {
  max-width: 600px;
  margin: 40px auto 0;
}
.daikakko {
  padding: 30px;
  position: relative;
  text-align: center;
}
.kakko_bg {
  background-color: green;
  box-sizing: border-box;
  padding: 0 10px;
  text-align:center;
}
.kakko_bg > span {
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  display: inline-block;
  padding: 20px;
  width: 100%;
}
</style>
<div class="inner">
  <p class="kakko_bg"><span>backgroundを使用してカッコを表現します。</span></p>
</div>

カテゴリー : HTML-CSS

HTML-CSS関連の記事

目次

→ index