【cssの囲み枠】括弧デザインの作り方 サンプルコード
- 公開日：2018/12/29
- 更新日：2018/12/29
- 投稿者：n bit
コピーアンドペーストで利用出来るcssのデザインサンプルコード。今回は括弧デザインを作るサンプルコードを複数用意しました。ボーダを利用する方法とcontentを利用する方法で主に2種類用意しています。カギ括弧、角括弧、丸括弧、波括弧と自由自在です。
この記事は約 分で読めます。（文字）
cssで括弧デザインを作る方法
CSSで括弧デザインを作る方法は大きく分けて2種類あります。1つはボーダーで記述した線で括弧のように表現する方法。もう一つはcontentに表示したい括弧を直接記述する方法です。
それぞれの方法にメリット、デメリットがありますので最終的に表現したいデザインに沿って利用するCSSコードを選択すると良いでしょう。
ボーダーで記述した線で括弧のように表現する方法のメリット・デメリット
ボーダーで括弧のように表現する場合のメリットは線の太さをコントロールしやすいこと。線の種別を変更できることです。
デメリットは括弧のデザインに制限があること。カギ括弧、角括弧、丸括弧を作ることはできますが、波括弧のような複雑な括弧をデザインすることはできません。
contentに表示したい括弧を直接記述する方法のメリット・デメリット
contentに直接表示させたい括弧を入力する方法のメリットはキーボードで入力することができる括弧を全て利用することができるので、カギ括弧、角括弧、丸括弧、波括弧と複雑な括弧でも自由自在に表現できます。
デメリットはフォントサイズで括弧の大きさをコントロールするため太さがフォントの種類によって自動的に決定されること。また線は実線しか利用することができません。
- ※：利用するフォントが実線ではない括弧デザインになっている場合は表現できます。
では実際にCSSで括弧デザインを表現するコードを見ていきましょう。
CSSでカギ括弧のデザインを表現する
CSSでカギ括弧デザインを表現するためのコードです。
デザインサンプル
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
カギ括弧までの余白はパディングで調整、カギ括弧自体の大きさはwidthとheightで調整しましょう。
html
<p class="frame-box-001">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
CSS
.frame-box-001 {
padding: 30px;
position: relative;
}
.frame-box-001::before, .frame-box-001::after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.frame-box-001::before {
border-left: solid 2px #000000;
border-top: solid 2px #000000;
top: 0;
left: 0;
}
.frame-box-001::after {
border-right: solid 2px #000000;
border-bottom: solid 2px #000000;
bottom: 0;
right: 0;
}
SCSS
SCSSで記述する場合はこちらのコードをご利用ください。
$bar-style: solid;
$bar-size: 2px;
$bar-color: #000000;
.frame-box-001 {
padding: 30px;
position: relative;
&::before, &::after {
content:'';
width: 30px;
height: 30px;
position: absolute;
}
&::before {
border-left: $bar-style $bar-size $bar-color;
border-top: $bar-style $bar-size $bar-color;
top: 0;
left: 0;
}
&::after {
border-right: $bar-style $bar-size $bar-color;
border-bottom: $bar-style $bar-size $bar-color;
bottom: 0;
right: 0;
}
}
CSSで角括弧のデザインを表現する
CSSで角括弧デザインを表現するためのコードです。線の種別を実線から点線に変更してみました。
デザインサンプル
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
角括弧までの余白はパディングで調整、角括弧自体の大きさはwidthとheightで調整しましょう。
html
<p class="frame-box-002">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
CSS
.frame-box-002 {
padding: 30px;
position: relative;
}
.frame-box-002::before, .frame-box-002::after {
content: '';
width: 15px;
height: 100%;
position: absolute;
}
.frame-box-002::before {
border-left: dotted 1px #000000;
border-top: dotted 1px #000000;
border-bottom: dotted 1px #000000;
top: 0;
left: 0;
}
.frame-box-002::after {
border-right: dotted 1px #000000;
border-top: dotted 1px #000000;
border-bottom: dotted 1px #000000;
top: 0;
right: 0;
}
SCSS
SCSSで記述する場合はこちらのコードをご利用ください。
$bar-style: dotted;
$bar-size: 1px;
$bar-color: #000000;
.frame-box-002 {
padding: 30px;
position: relative;
&::before, &::after {
content:'';
width: 15px;
height: 100%;
position: absolute;
}
&::before {
border-left: $bar-style $bar-size $bar-color;
border-top: $bar-style $bar-size $bar-color;
border-bottom: $bar-style $bar-size $bar-color;
top: 0;
left: 0;
}
&::after {
border-right: $bar-style $bar-size $bar-color;
border-top: $bar-style $bar-size $bar-color;
border-bottom: $bar-style $bar-size $bar-color;
top: 0;
right: 0;
}
}
CSSで丸括弧のデザインを表現する
CSSで丸括弧デザインを表現するためのコードです。線の種別を二重線にすることで少しデザイン的に変更しています。
デザインサンプル
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
丸括弧までの余白はパディングで調整、カギ括弧自体の大きさはwidthとheightで調整しましょう。
html
<p class="frame-box-003">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
CSS
.frame-box-003 {
padding: 30px;
position: relative;
}
.frame-box-003::before, .frame-box-003::after {
content: '';
width: 60px;
height: 100%;
position: absolute;
border-radius: 50%;
}
.frame-box-003::before {
border-left: double 5px #000000;
border-top: none;
border-bottom: none;
border-right: none;
top: 0;
left: 0;
}
.frame-box-003::after {
border-right: double 5px #000000;
top: 0;
right: 0;
}
SCSS
SCSSで記述する場合はこちらのコードをご利用ください。
$bar-style: double;
$bar-size: 5px;
$bar-color: #000000;
.frame-box-003 {
padding: 30px;
position: relative;
&::before, &::after {
content:'';
width: 60px;
height: 100%;
position: absolute;
border-radius: 50%;
}
&::before {
border-left: $bar-style $bar-size $bar-color;
border-top: none;
border-bottom: none;
border-right: none;
top: 0;
left: 0;
}
&::after {
border-right: $bar-style $bar-size $bar-color;
top: 0;
right: 0;
}
}
CSSでcontentを使ったカギ括弧デザインの表現
CSSでカギ括弧デザインを表現するのにcontentを利用した場合のコードです。
デザインサンプル
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
カギ括弧までの余白はパディングで調整、カギ括弧自体の大きさはfont-sizeで調整しましょう。
html
<p class="frame-box-004">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
CSS
.frame-box-004 {
padding: 50px;
position: relative;
}
.frame-box-004::before, .frame-box-004::after {
display: block;
font: normal normal 7rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
position: absolute;
line-height: 0;
}
.frame-box-004::before {
content: '(';
top: 50%;
left: 0;
}
.frame-box-004::after {
content: ')';
top: 50%;
right: 0;
}
SCSS
SCSSで記述する場合はこちらのコードをご利用ください。
.frame-box-004 {
padding: 50px;
position: relative;
&::before, &::after {
display: block;
font: normal normal 7rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
position: absolute;
line-height: 0;
}
&::before {
content:'(';
top: 50%;
left: 0;
}
&::after {
content:')';
top: 50%;
right: 0;
}
}
CSSでcontentを使った波括弧デザインの表現
CSSで波括弧デザインを表現するためのコードです。同じコードでbefore、afterのコンテンツ内の記述や、フォントスタイルを変更することで様々な括弧を表現することができます。
content:'(';
content:')';
font: normal normal 7rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
デザインサンプル
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
波括弧までの余白はパディングで調整、波括弧自体の大きさはfont-sizeで調整しましょう。
html
<p class="frame-box-005">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
CSS
.frame-box-005 {
padding: 50px;
position: relative;
&::before, &::after {
display: block;
font: normal normal 7rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
position: absolute;
line-height: 0;
}
&::before {
content:'{';
top: 50%;
left: 0;
}
&::after {
content:'}';
top: 50%;
right: 0;
}
}
SCSS
SCSSで記述する場合はこちらのコードをご利用ください。
.frame-box-005 {
padding: 50px;
position: relative;
&::before, &::after {
display: block;
font: normal normal 7rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
position: absolute;
line-height: 0;
}
&::before {
content:'{';
top: 50%;
left: 0;
}
&::after {
content:'}';
top: 50%;
right: 0;
}
}
今日のdot
htmlの装飾に関しては、後々のメンテナンスや、マーケティング戦略に付随するウェブサイトの変更、SEOやモバイルサイトの対応面を考えても出来る限りCSSで表現できるものはCSSで記述する方が好ましいので今回のような括弧デザインが必要になった時は積極的に利用しましょう。
