CSSで括弧を表現したサンプル

  • Posted on
  • In: Tips
CSSで括弧を表現したサンプル

正直微妙なので恐らく使うことないだろうっていうのもあるんですが、ちょっと使う機会があって実装できるのか試してみたので備忘録として残しておこうと思います。「」（鉤括弧）や［］（角括弧）など、括弧をCSSで表現してみたサンプルで、普通に使うのであればただのテキストを使えば良いですが、複数行をひとつの括弧で括るようなデザインにしたい時に使えます。

実際の見栄えは下記で確認できます。

DEMO

※以下で紹介する方法はブラウザによっては表示確認ができない場合や綺麗に表示されない場合があります。

※冒頭にも書きましたが中には微妙なのもあるので、もっと綺麗な見た目にする方法や汎用性高い方法、スマートな記述方法とかあれば教えてください。

CSSで括弧を表現したサンプル 目次

  1. 丸括弧 （）
  2. 鉤括弧 「」
  3. 角括弧 ［］
  4. 隅付き括弧 【】
  5. 山括弧 〈〉

1. 丸括弧 （）

丸括弧 （）

頭から微妙な感じのですが、丸括弧 （）を表現してみたものです。
HTMLとCSSはそれぞれ以下のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。

HTML

<div class="parenthesis">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

CSS

.parenthesis {
	position: relative;
	width: 500px;
	padding: 15px 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
	position: absolute;
	top: 0;
	content: '';
	width: 50px;
	height: 100%;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before {
	left: 0;
	border-left: 3px solid #555;
}
.parenthesis::after {
	right: 0;
	border-right: 3px solid #555;
}

目次へ

2. 鉤括弧 「」

鉤括弧 「」

鉤括弧 「」を表現してみたもので、こちらは見た目も綺麗だし使いやすいと思います。
HTMLとCSSはそれぞれ以下のようになっており、括弧の太さやカラーはそれぞれborderの値をいじれば簡単に変更できます。

HTML

<div class="parenthesis">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

CSS

.parenthesis {
	position: relative;
	width: 500px;
	padding: 15px 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
	position: absolute;
	content: '';
	width: 20px;
	height: 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before {
	top: 0;
	left: 0;
	border-top: 1px solid #555;
	border-left: 1px solid #555;
}
.parenthesis::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
}

目次へ

3. 角括弧 ［］

角括弧 ［］#1

角括弧 ［］を表現してみたもので、こちらも見た目も綺麗だし使いやすいと思います。
HTMLとCSSはそれぞれ以下のようになっており、鉤括弧と同様に括弧の太さやカラーはそれぞれborderの値をいじれば簡単に変更できます。

HTML

<div class="parenthesis">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

CSS

.parenthesis {
	position: relative;
	width: 500px;
	padding: 15px 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
	position: absolute;
	top: 0;
	content: '';
	width: 20px;
	height: 100%;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before {
	left: 0;
	border-left: 1px solid #555;
}
.parenthesis::after {
	right: 0;
	border-right: 1px solid #555;
}

角丸にする

角括弧 ［］#2

上で紹介した角括弧 ［］にCSSのプロパティをひとつ追加するだけで、見た目を少し変えることができます。
HTML・CSSともに先ほどのものを利用しつつ、::beforeと::afterにborder-radiusのプロパティを追記します。

CSS

.parenthesis::before {
	left: 0;
	border-left: 2px solid #555;
	border-radius: 8px 0 0 8px;
}
.parenthesis::after {
	right: 0;
	border-right: 2px solid #555;
	border-radius: 0 8px 8px 0;
}

目次へ

4. 隅付き括弧 【】

隅付き括弧 【】

こちらは無理矢理な感じで見た目も微妙ですが隅付き括弧 【】を表現してみたもので、HTMLとCSSはそれぞれ以下のようになっています。

HTML

<div class="parenthesis">
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
	</div>
</div>

CSS

.parenthesis {
	width: 500px;
	padding: 0 10px;
	background-color: #555;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis>div {
	padding: 10px 15px;
	background-color: #fff;
	border-radius: 15px;
}

外枠にあるdiv要素にpaddingとbackground-colorを指定して括弧となる部分を表現し、内側のdiv要素にbackground-colorとborder-radiusを使って外枠の背景色を見えないようにしつつ括弧の丸みの部分を表現しています。
ただ、注意としては外枠のdiv要素に指定した背景色を内側のdiv要素で見えなくする必要があるので、周りの背景によって（背景が単色ではない）は使えません…。

目次へ

5. 山括弧 〈〉

山括弧 〈〉

山括弧 〈〉を表現してみたもので、HTMLとCSSはそれぞれ以下のようになっています。
（もっとスマートに且つ汎用的な実装方法がある気もするんですが、思いつきませんでした…）

HTML

<div class="parenthesis">
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
	</div>
</div>

CSS

.parenthesis06 {
	position: relative;
	width: 500px;
	padding: 15px 40px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis06::before,
.parenthesis06::after,
.parenthesis06>div::before,
.parenthesis06>div::after {
	position: absolute;
	content: '';
	width: 1px;
	height: 50%;
	background-color: #555;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis06::before {
	top: 0;
	left: 15px;
	margin-top: 4px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}
.parenthesis06::after {
	bottom: 0;
	left: 15px;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.parenthesis06>div::before {
	top: 0;
	right: 15px;
	margin-top: 4px;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.parenthesis06>div::after {
	bottom: 0;
	right: 15px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}

内外それぞれのdiv要素を使った擬似要素をtransform: rotateで傾け、position: absoluteで位置を決めています。
パッと見は出来てそうでもよく見ると重なり部分が綺麗でなかったり、中身によって都度調整が必要なので汎用性は低いですね…。

目次へ

以上、CSSで括弧を表現したサンプルでした。
鉤括弧と角括弧はまだ使う機会ありそうですが、その他のについてはもっと良い実装方法を探したり、そもそも無理にCSSでやろうとせずに普通に画像を使った方が無難そうです。

Back to top