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

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

クリエイターへの就職・転職成功率が高いエージェント5選

クリエイターへの就職・転職を目指すにはリクナビやen転職など、大手だけでは役不足です。
コチラの記事で私が転職の際に活用し、複数内定を獲得したクリエイティブ系に強い転職エージェントを徹底解説！
フリーランス志望の方、収入を増やしたい方に必須のエージェントはコチラの記事で解説しています。

括弧デザインその②

括弧デザインその②です。
ソースをコピペすると実装に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テンプレート

商用利用可能で超高品質なHTMLテンプレートを活用してWeb制作を加速させてみませんか？

上記テンプレートを活用すればテキストと画像を差し替えるだけで高品質なサイトや管理画面が作れます。
各種パーツは全て準備されているのでデザインとコーディングの手間を劇的に軽減可能！

テンプレートの品質、作業効率、制作の時短を優先されている方に間違いなくおすすめできますよ。

テンプレートをダウンロード

おわりに

以上、CSSで作る括弧（カッコ）のサンプルとソースコードでした。

ではまた！

貴方に最適な
就職・転職エージェントを診断

所要時間10秒！
数クリックで貴方に必要なエージェントを診断します！
リクナビやen転職等には無い業界特化型エージェントを厳選！
併用する事で収入UP、好条件の可能性が格段に高まります。

目指している業種・雇用形態はどれですか？

クリエイティブ系で正社員
エンジニア系で正社員
クリエイティブ系orエンジニア系でフリーランス
今の仕事＋副業として

目指す業界は何ですか？

Web業界・グラフィックデザイナー
ゲームクリエイター

クリエイティブ系特化、マーケティングも含む総合型、どちらが希望ですか？

Web業界・デザイン業界のクリエイティブ特化型
クリエイティブ以外にも豊富なマーケティング職

貴方にオススメのエージェントはWebist（ウェビスト）です。

Webist（ウェビスト）は完全無料で使えるWeb業界に特化した転職エージェントです。Web関連の取り扱い求人数はトップクラス！
ちなみに私はWebistを前職で利用し、年収が80万円程アップしました。条件交渉に長けたエージェントが調整してくれるので高確率で年収アップが可能！

括弧デザイン その①

HTML

CSS

括弧デザイン その②

HTML

CSS

括弧デザイン その③

HTML

CSS

括弧デザイン その④

HTML

CSS

括弧デザイン その⑤

HTML

CSS

超高品質なHTMLテンプレート

おわりに

括弧デザインその①

括弧デザインその②

括弧デザインその③

括弧デザインその④

括弧デザインその⑤