CSSで大きな括弧を作る【HTML＆CSS】

サイトに表示する箇条書きを、パッと見て『ひとかたまり』と認識しやすいように、大きな括弧を付けたいな…と考えました。Cocoonの『白抜きボックス』のように全体を囲むのではなく、箇条書きの左端に置く「大括弧」です。

それも、画像を使わずにCSSだけで表現できれば最高…。

CSSの疑似要素（::before／::after）や positionプロパティの使い方を覚えると、こうした表現の仕組みも理解できるようになってきました。

そこで、試しにいくつか作ってみました。

【CSS】Positionプロパティを理解して要素を自在に配置！

Cocoonのブログカードに表示するラベルの位置を調整することを目標に、CSSのpositionプロパティを勉強してみましょう。

シンプルな角括弧
1. 両端（角）サイズ固定
2. 両端（角）サイズ変動
シンプルな丸括弧
片側のみ
1. 左側だけ括弧
2. 丸みのある括弧
最後に…

シンプルな角括弧

両端（角）サイズ固定

括弧の大きさは固定されています。

Sample

両端・角括弧です。
括弧のサイズは固定されています。

コードを見る

<div class="kakko-01"><p>ここにテキスト</p></div>

.kakko-01 {
	padding: 2rem 2.5rem;
	position: relative;
	text-align: center;
	box-sizing: border-box;
}
.kakko-01::before,
.kakko-01::after {
	display: block;
	font-size: 6rem;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
	'メイリオ', 'Meiryo',
	'游ゴシック', 'Yu Gothic',
	'ＭＳ Ｐゴシック', 'MS PGothic',
	sans-serif;
	position: absolute;
	top: 50%;  
	box-sizing: border-box;
	line-height: 0;
	color: #a9a9a9; /* 括弧の色 */
}
.kakko-01::before {
	content: '['; /* 開き括弧の種類 */
	left: 0;
}
.kakko-01::after {
	content: ']'; /* 閉じ括弧の種類 */
	right: 0;
}
.kakko-01 p{
	margin: 0;
}

括弧のサイズを変える場合はCSSコードの数値を変える必要があって一見不便ですが、、、

これの良さは、content内の記号を変えるだけで、簡単に括弧の種類を変えることができる点です。

contentの「’ ‘」内を「｛」や「【」などに変更すれば、括弧の種類を変更できます。

括弧の種類を変えられます。

両端（角）サイズ変動

borderプロパティを使うことで、行数に合わせて括弧の長さが変わるタイプです。

Sample

両端・角括弧です。
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

コードを見る

<div class="kakko-01auto"><p>ここにテキスト</p></div>

.kakko-01auto {
	padding: 1em 3em;
	position: relative;
	box-sizing: border-box;
}
.kakko-01auto::before,
.kakko-01auto::after {
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
	box-sizing: border-box;
	border-top: solid 2px #a9a9a9;
	border-bottom: solid 2px #a9a9a9;
	top: 0;  
}
.kakko-01auto::before {
	border-left: solid 2px #a9a9a9;
	left: 0;
}
.kakko-01auto::after {
	border-right: solid 2px #a9a9a9;
	right: 0;
}
.kakko-01auto p{
	margin: 0;
}

カッコ内のテキストを中央揃えにする場合は、.kakko01-autoのposition: relative;の下に次のコードを追加してください。

text-align:center;

コードを追加すると、次のようになります。

.kakko01 {
	padding: 20px;
	position: relative;
	text-align:center;
}

シンプルな丸括弧

上記でご紹介した『両端（角）サイズ固定』とソースコードの内容はほとんど同じですが、font-familyでフォントの種類をゴシック系と明朝体系に変えるだけで、括弧の雰囲気が変わるのが実感できるので載せてみました。

両端（丸）サイズ固定（ゴシック系）

Sample

両端・丸括弧（ゴシックタイプ）です。
括弧のサイズは固定されています。

コードを見る

<div class="kakko-02"><p>ここにテキスト</p></div>

.kakko-02 {
	padding: 2rem 2.5rem;
	position: relative;
	text-align: center;
	box-sizing: border-box;
}
.kakko-02::before,
.kakko-02::after {
	display: block;
	position: absolute;
	top: 50%;  
	box-sizing: border-box;
	line-height: 0;
	font-size:6rem;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
	'メイリオ', 'Meiryo',
	'游ゴシック', 'Yu Gothic',
	'ＭＳ Ｐゴシック', 'MS PGothic',
	sans-serif;
	color: #a9a9a9; /* 括弧の色 */
}
.kakko-02::before {
	content: '('; /* 開き括弧の種類*/
	left: 0;
}
.kakko-02::after {
	content: ')'; /* 閉じ括弧の種類*/
	right: 0;
}
.kakko-02 p{
	margin: 0;
}

両端（丸）サイズ固定（明朝体系）

Sample

両端・丸括弧（明朝タイプ）です。
括弧のサイズは固定されています。

コードを見る

<div class="kakko-03"><p>ここにテキスト</p></div>

.kakko-03 {
	padding: 2rem 2.5rem;
	position: relative;
	text-align: center;
	box-sizing: border-box;
}
.kakko-03::before,
.kakko-03::after {
	display: block;
	position: absolute;
	top: 50%;
	line-height: 0;
	box-sizing: border-box;
	font-size: 6rem;
	font-family: 游明朝, "Yu Mincho",YuMincho,
	"Hiragino Mincho ProN",	HGS明朝E,
	メイリオ, Meiryo,
	serif;
	color: #a9a9a9; /* 括弧の色 */
}
.kakko-03::before {
	content: '('; /* 開き括弧の種類*/
	left: 0;
}
.kakko-03::after {
	content: ')'; /* 閉じ括弧の種類*/
	right: 0;
}
.kakko-03 p{
	margin: 0;
}

両端（丸）サイズ変動

borderプロパティを使うことで、行数に合わせて括弧のサイズが変動するタイプです。

Sample

両端・丸括弧です。
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

コードを見る

<div class="kakko-02auto"><p>ここにテキスト</p></div>

.kakko-02auto {
	padding: 1.5rem 3rem;
	position: relative;
	box-sizing: border-box;
}
.kakko-02auto::before,
.kakko-02auto::after {
	content: '';
	width: 60px;
	height: 100%;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	border-radius: 50%;
}
.kakko-02auto::before {
	border-left: solid 6px #a9a9a9;
	left: 0;
}
.kakko-02auto::after {
	border-right: solid 6px #a9a9a9;
	right: 0;
}
.kakko-02auto p{
	margin: 0;
}

border-radiusを指定するときに、四隅の個別指定をして違った雰囲気に…。

Sample

コードを見る

<div class="kakko-03auto"><p>ここにテキスト</p></div>

.kakko-03auto {
	padding: 1.5rem 3rem;
	position: relative;
	box-sizing: border-box;
}
.kakko-03auto::before,
.kakko-03auto::after {
	content: '';
	width: 60px;
	height: 100%;
	position: absolute;
	top: 0;  
	width: 20px;
	height: 100%;
	box-sizing: border-box;
	border-top: 4px solid #a9a9a9;
	border-bottom: 4px solid #a9a9a9;
}
.kakko-03auto::before {
	border-left: solid 4px #a9a9a9;
	left: 0;
	border-radius: 8px 0 0 8px; /* 左上 | 右上 | 右下 | 左下 */
}
.kakko-03auto::after {
	border-right: solid 4px #a9a9a9;
	right: 0;
	border-radius: 0 8px 8px 0; /* 左上 | 右上 | 右下 | 左下 */
}
.kakko-03auto p{
	margin: 0;
}

＼ Amazon Kindle Unlimited 初回30日間無料体験できます／

Amazon Kindleストアで「CSS」関連の本を見る ≫

片側のみ

最初に「出来たらいいな！」と思ったスタイルがこちの【箇条書きをまとめる大括弧】スタイルです。括弧とリスト部分の表示位置を調整しています。

スタイル設定のコードの中に、ulとolを入れて、番号なし、番号あり、の両方に対応できるようにしています。

左側だけ括弧

Sample

リスト1
リスト2
リスト3

番号付きリスト1
番号付きリスト2
番号付きリスト3

コードを見る

<!-- 番号なし箇条書き -->
<div class="kakko-left-1">
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>      
  </ul>  
</div>

<!-- 番号あり箇条書き -->
<div class="kakko-left-1">
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>     
  </ol>  
</div>

.kakko-left-1 {
  position: relative;
  margin-left: 2rem;
  box-sizing: border-box;
  line-height: 2;
}
.kakko-left-1::before{
  position: absolute;
  top: 0;
  left: -0.5em;
  content: "";
  box-sizing: border-box;
  border-left: 3px solid #666; /* 太さ | 種類 | 色 */ 
  border-top: 3px solid #666; /* 太さ | 種類 | 色 */ 
  border-bottom: 3px solid #666; /* 太さ | 種類 | 色 */ 
  width: 20px;
  height: 100%;
  padding: 15px 0 5px 5px;
}
.kakko-left-1 ul,
.kakko-left-1 ol {
  padding: 0.8em 2em;
}

丸みのある括弧

Sample

リスト1
リスト2
リスト3

番号付きリスト1
番号付きリスト2
番号付きリスト3

コードを見る

<!-- 番号なし箇条書き -->
<div class="kakko-left-2">
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>      
  </ul>  
</div>

<!-- 番号あり箇条書き -->
<div class="kakko-left-2">
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>     
  </ol>  
</div>

.kakko-left-2 {
  position: relative;
  margin-left: 2rem;
  box-sizing: border-box;
  line-height: 2;
}
.kakko-left-2::before{
  position: absolute;
  top: 0;
  left: -0.5em;
  content: "";
  box-sizing: border-box;
  border-top: 3px solid #666; /* 太さ | 種類 | 色 */ 
  border-bottom: 3px solid #666; /* 太さ | 種類 | 色 */ 
  border-left: 3px solid #666; /* 太さ | 種類 | 色 */ 
  width: 20px;
  height: 100%;
  padding: 15px 0 5px 5px;
  border-radius: 8px 0 0 8px; /* 左上 | 右上 | 右下 | 左下 */
}
.kakko-left-2 ul,
.kakko-left-2 ol {
  padding: 0.8em 2em;
}

クラス名の追加だけで線のスタイルを変えられるようにする

任意で括弧を点線に変更できるようにするには、次のコードを追加しておきます。

このコードを記述する時は、ベースとなるコードよりも下の行に記述します。
（※ CSSの適用優先順位に対応）

.kakko-dotted::before{
  border: none;
  border-left: 1px dotted #666; /* 太さ | 種類 | 色 */ 
  border-top: 1px dotted #666; /* 太さ | 種類 | 色 */ 
  border-bottom: 1px dotted #666; /* 太さ | 種類 | 色 */ 
}

border: none;で、一旦ベースの括弧を消し、新たに点線を指定しています。

こちらのコードはオプションスタイルになるので
単体では使えません！

上のコードを追加しておけば、「ここは点線にしたい」という時だけクラス名を追加する、という使い方ができます。

<!-- 番号あり箇条書き -->
<div class="kakko-left-1 kakko-dotted">
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>      
  </ol>  
</div>

クラス名を複数指定するときは、半角スペースで区切ります

Sample

番号付きリスト1
番号付きリスト2
番号付きリスト3

最後に…

WordPressもどんどん進化していて、Ver.6.1以降はブロックスタイルに関する機能が増えています。中でも、枠線を表示する機能を利用すると、CSSの知識がなくても簡単に大括弧を表示できます。

興味のある方は、こちらの記事をご覧ください。

WrodPress|CSSを使わずにボックスをデザインできる！

WordPress6.1になってブロックエディタ周りの機能が充実しました。特にグループブロックは、CSSの知識がなくても簡単にボックスのデザインができるようになっています。

シンプルな角括弧

両端（角） サイズ固定

両端（角） サイズ変動

シンプルな丸括弧

両端（丸） サイズ固定（ゴシック系）

両端（丸） サイズ固定（明朝体系）

両端（丸）サイズ変動

片側のみ

左側だけ括弧

丸みのある括弧

クラス名の追加だけで線のスタイルを変えられるようにする

最後に…

両端（角）サイズ固定

両端（角）サイズ変動

両端（丸）サイズ固定（ゴシック系）

両端（丸）サイズ固定（明朝体系）