【コピペで1分】CSSで作る括弧のデザイン5選

この記事を読むのに必要な時間は約 15 分です。

CSSで作る括弧（カッコ）のサンプルコード集です。
コピペして使うと実装に1分かかりません。

この記事の目次

括弧デザインその①

括弧デザインその①です。
ソースをコピペすると実装に1分かかりません。

HTML

<p class="kakko01">括弧デザインその①です。</p>

CSS

.kakko01 {
	padding: 25px;
	position: relative;
        text-align: center;
}
.kakko01::before, .kakko01::after {
	content: '';
	width: 25px;
	height: 25px;
	position: absolute;
}
.kakko01::before {
	border-left: solid 2px #000000;
	border-top: solid 2px #000000;
	top: 0;
	left: 0;
}
.kakko01::after {
	border-right: solid 2px #000000;
	border-bottom: solid 2px #000000;
	bottom: 0;
	right: 0;
}

括弧デザインその②

括弧デザインその②です。
ソースをコピペすると実装に1分かかりません。

HTML

<p class="kakko02">括弧デザインその②です。</p>

CSS

.kakko02 {
	padding: 20px;
	position: relative;
        text-align:center;
}
.kakko02::before, .kakko02::after {
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
}
.kakko02::before {
	border-left: solid 2px #888;
	border-top: solid 2px #888;
	border-bottom: solid 2px #888;
	top: 0;
	left: 0;
}
.kakko02::after {
	border-right: solid 2px #888;
	border-top: solid 2px #888;
	border-bottom: solid 2px #888;
	top: 0;
	right: 0;
}

括弧デザインその③

括弧デザインその③です。
ソースをコピペすると実装に1分かかりません。

HTML

<p class="kakko03">括弧デザインその②です。</p>

CSS

.kakko03 {
	padding: 30px;
	position: relative;
        text-align: center;
        color: #888;
}
.kakko03::before, .kakko03::after {
	display: block;
	font: normal normal 6rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	position: absolute;
	line-height: 0;
}
.kakko03::before {
	content: '(';
	top: 50%;
	left: 0;
}
.kakko03::after {
	content: ')';
	top: 50%;
	right: 0;
        color: #888;
}

括弧デザインその④

括弧デザインその④です。
ソースをコピペすると実装に1分かかりません。

HTML

<div class="kakko04">
  <p>括弧デザインその④です。 </p>
</div>

CSS

.kakko04 {
  text-align:center;
  padding: 0 8px;
  background-color: #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.kakko04>p {
  padding: 25px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom:0;
}

括弧デザインその⑤

括弧デザインその⑤です。
ソースをコピペすると実装に1分かかりません。

HTML

<div class="kakko05">
  <p>括弧デザインその⑤です。</p>
</div>

CSS

.kakko05 {
  position: relative;
  padding: 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align:center;
}
.kakko05>p{
  margin-bottom: 0;
}
.kakko05::before,
.kakko05::after,
.kakko05 > p::before,
.kakko05 > p::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 50%;
  background-color: #888;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.kakko05::before {
  top: 0;
  left: 15px;
  margin-top: 4px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.kakko05::after {
  bottom: 0;
  left: 15px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.kakko05 > p::before {
  top: 0;
  right: 25px;
  margin-top: 4px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.kakko05 > p::after {
  bottom: 0;
  right: 25px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。