Blog

HOME > Web > css > 【CSS】CSSで括弧を表示する方法

【CSS】CSSで括弧を表示する方法

2016/03/29

css

備忘録です。

参考サイト
CSSで括弧を表現したサンプル

1. 丸括弧 （）

html

<div class="parenthesis">
  <p>CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。</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;
}

サンプル

CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。CSSで丸括弧を表示する方法。

2. 鉤括弧 「」

html

<div class="parenthesis">
  <p>CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。</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;
}

サンプル

CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。CSSで鉤括弧を表示する方法。

3. 角括弧 ［］

html

<div class="parenthesis">
  <p>CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。</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;
}

サンプル

CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。CSSで角括弧を表示する方法。

角丸にする

上で紹介した角括弧 ［］に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;
}

サンプル

CSSで角丸括弧を表示する方法。CSSで角丸括弧を表示する方法。CSSで角丸括弧を表示する方法。CSSで角丸括弧を表示する方法。CSSで角丸括弧を表示する方法。CSSで角丸括弧を表示する方法。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ