この記事を読むのに必要な時間は約 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開発について学ぶことができます。
下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。
以上、CSSで作る括弧(カッコ)のサンプルとソースコードでした。
ではまた!
コピペで1分シリーズ