2021年01月14日(木)

CSS で作るおしゃれなボックス（枠線・囲み枠）のデザインサンプル 13 選

• 0
• 7
• 104
• 232

CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。

ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。

ボックスがあるだけで、おしゃれな雰囲気にもかっこいい雰囲気にも

コピペだけで使えるので、ぜひ試してみてください。

コピペで使える CSS ボックスサンプル

基本形は、class をつけた のみ。

div 要素に囲まれた部分がボックスになります

以下、コピペだけで使える CSS コードを 13 パターン紹介していきますので、ブログのデザインに合わせて調整していただければと思います。

class は sample-box-n の数字だけ変更した形になっています。

01. 背景色のみのシンプルなデザイン

まずは背景色がついただけのシンプルなボックス。余白が少ないと読みづらいため、padding を多めにするとよいですね（ 1 ～ 2 文字分ほど）。

.sample-box-...