アメブロの記事で使える複数行をカッコでまとめる大きな括弧のような囲み枠(飾り枠)

アメブロの記事で使える大きな括弧のような囲み枠

アメブロの記事で使える「大きな括弧のような囲み枠」です。

一見、囲み枠というよりも、領域全体の左右を大きな括弧で括ったように見えます。

色のバリエーションもいくつか作ってみましたので、もしも、気に入ったのがありましたら使ってみて下さい。

何れも、表示例とコードをセットで書いてありますので、コードの方をコピペでどうぞ。

コピペのあとで、「■」の部分を囲み枠の中に表示したい内容に書き換えてください。

大きな括弧のような囲み枠(黒)

■大きな括弧のような囲み枠(黒)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#333333">■</div>

大きな括弧のような囲み枠(赤)

■大きな括弧のような囲み枠(赤)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#ff0000">■</div>

大きな括弧のような囲み枠(緑)

■大きな括弧のような囲み枠(緑)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#00cc00">■</div>

大きな括弧のような囲み枠(青)

■大きな括弧のような囲み枠(青)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#0000ff">■</div>

大きな括弧のような囲み枠(ピンク)

■大きな括弧のような囲み枠(ピンク)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#ff66cc">■</div>

大きな括弧のような囲み枠(オレンジ)

■大きな括弧のような囲み枠(オレンジ)
 
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#ffcc66">■</div>

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。