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

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

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);
}

HTMLとCSSを効率的に学ぶには

独学にオススメの書籍

HTMLとCSSを効率的に学習して自在にデザイン・レイアウトができるようになるとWEB制作の幅が一気に広がります。
下記は独学で学習するのにうってつけの良書なので要チェックです！

１冊ですべて身につくHTML　＆　CSSとWebデザイン入門講座/Mana

posted with カエレバ

bookfan PayPayモール店

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

CSS設計完全ガイド詳細解説+実践的モジュール集 / 半田惇志

posted with カエレバ

bookfanプレミアム

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

集中的に学習して本業としてのWEBデザイナーを視野に入れるなら

さらにWEBについて学習したい方、転職を目指されている方はWebデザインスクールで集中的に学ぶ事を視野に入れてみるのは如何でしょうか？現役プロのWEBデザイナーにより手厚いサポートがあるので、安心して最新のWeb開発について学ぶことができます。
まずは説明会や無料カウンセリングで情報を集めて検討してみるのも一つの手です。