今回はオウンドメディアサイトなどで活用できる、囲み枠（ボックスデザイン）をご紹介したいと思います。
HTML+CSSだけで構成していますので、コピペですぐに使えます！
背景色（background）、線（border）の太さや色、枠と本文の間隔（padding）を調整して、ご自身のサイトに合った雰囲気にカスタマイズすることも可能です。
※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。
シンプルな囲み枠
枠線だけのシンプルなボックス。線（border）の太さを変えれば、スタイリッシュにもカジュアルにもなります。
HTML
CSS
1 | <div class="box_01">ここに文章を入れる</div> |
CSS
1 2 3 4 | .box_01 { border: solid 2px #27acd9; padding: 1em; } |
点線のボックス。実線よりもカジュアルな印象になります。線（border）の太さを変えるだけでもまた違った雰囲気に。
HTML
CSS
1 | <div class="box_02">ここに文章を入れる</div> |
CSS
1 2 3 4 | .box_02 { border: dashed 3px #27acd9; padding: 1em; } |
二重線と角丸にしたボックス。角の丸み（border-radius）の数値を大きくするほど、より柔らかな印象になります。
HTML
CSS
1 | <div class="box_03">ここに文章を入れる</div> |
CSS
1 2 3 4 5 | .box_03 { border: double 4px #27acd9; border-radius: 10px; padding: 1em; } |
背景に色を入れたボックス。背景に濃い色を設定する場合は、文字色を白にすれば読みやすくより強調されます。
HTML
CSS
1 | <div class="box_04">ここに文章を入れる</div> |
CSS
1 2 3 4 | .box_04 { background: #eaf5f9; padding: 1em; } |
背景と枠線を組み合わせたボックス。これまでの枠線（border）のCSSを参考して、実線（solid）・二重線（double）などに変えて様々なスタイルにカスタマイズできます。
HTML
CSS
1 | <div class="box_05">ここに文章を入れる</div> |
CSS
1 2 3 4 5 | .box_05 { background: #eaf5f9; border: dotted 2px #27acd9; padding: 1em; } |
2種類の要素を組み合わせて作ったボックス。少しの工夫でデザイン性が格段にアップしますね。
HTML
CSS
1 2 3 | <div class="box_06"> <div class="box_06_txt">ここに文章を入れる</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 | .box_06 { border: solid 1px #27acd9; padding: 0; } .box_06_txt { border: solid 10px #eaf5f9; padding: 1em; margin: 0; } |
立体的な囲み枠
シンプルに影を付けた立体的なボックス。右下にふんわりシャドウを付けることで、少し浮いたように見せています。
HTML
CSS
1 | <div class="box_07">ここに文章を入れる</div> |
CSS
1 2 3 4 5 | .box_07 { border: solid 1px #27acd9; box-shadow: 2px 5px 5px #eeeeee; padding: 1em; } |
グラデーションを使ったボックス。背景をワントーンのグラデーションにすることで、立体感を出しました。下部を暗い色にすることがポイント！自然な立体感を表現することが可能です。
HTML
CSS
1 | <div class="box_08">ここに文章を入れる</div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .box_08 { background: linear-gradient( to top, #d8d8d8 0%, #eeeeee 30%, #f8f8f8 100% ); border-radius: 10px; padding: 1em; } |
下側に線を入れて立体感を出したボックス。分厚いボード風になりました。カジュアルなサイトでのご使用がおすすめです。
HTML
CSS
1 | <div class="box_09">ここに文章を入れる</div> |
CSS
1 2 3 4 5 6 7 | .box_09 { color: #fff; background: #27acd9; border-bottom: solid 8px #0f8fbb; border-radius: 10px; padding: 1em; } |
デザイン性のある囲み枠
吹き出しデザインの囲み枠。文章とは別にワンポイントのアドバイスなど、少しくだけたコメントを載せるのにもおすすめです。
HTML
CSS
1 | <div class="box_10">ここに文章を入れる</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .box_10 { position: relative; padding: 1em; color: #fff; background: #27acd9; } .box_10::after { position: absolute; content: ''; top: 100%; left: 50px; border: 15px solid transparent; border-top: 15px solid #27acd9; width: 0; height: 0; } |
角を折ったメモ風デザインの囲み枠。ベースの背景が薄い色でも、角の折れた部分を濃い色にすることでアクセントになり、目に留まりやすい項目となります。
HTML
CSS
1 | <div class="box_11">ここに文章を入れる</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .box_11 { position: relative; background: #eaf5f9; padding: 1.5em; border: solid 1px #27acd9; } .box_11::after { position: absolute; content: ''; left: -1px; top: -1px; border-style: solid; border-width: 0 0 20px 20px; border-color: #fff #fff #27acd9; } |
便箋風デザインの囲み枠。テキストに下線を付けて行間にゆとりを持たせることがポイントです。長い文章を掲載すると固い印象になりがちですが、こうして便箋デザインにすることで柔らかな印象になり、格段に読みやすくなります。
HTML
CSS
1 | <div class="box_12"><span>ここに文章を入れる</span></div> |
CSS
1 2 3 4 5 6 7 8 | .box_12 { background: #eaf5f9; padding: 2em 1.5em 1.5em; } .box_12 span { border-bottom: solid 1px #97C4D4; line-height: 2; } |
ルーズリーフ風デザインの囲み枠。先ほどの便箋スタイルにプラスして、サイドにパンチ穴の丸を並べることで、ルーズリーフに早変わり。よりカジュアルな印象になります。
HTML
CSS
1 | <div class="box_13"><span>ここに文章を入れる</span></div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .box_13 { background: #eaf5f9; border-left: 10px dotted rgba(0,0,0,.1); box-shadow: 0 0 0 15px #eaf5f9; padding: 1em 1em 1em 1.5em; } .box_13 span { border-bottom: solid 1px #97C4D4; line-height: 2; } |
ステッチの付いた布風デザインの囲み枠。点線で囲んで縫い目を表現しています。ソーイングやハンドメイド関連のサイトで活躍しそうですね。線（border）の太さを調整すればまた印象が変わって見えますので、お好みでお試しください。
HTML
CSS
1 | <div class="box_14">ここに文章を入れる</div> |
CSS
1 2 3 4 5 6 7 8 | .box_14 { background: #27acd9; color: #fff; border: 2px dashed #fff; box-shadow: 0 0 0 10px #27acd9; padding: 1em; border-radius: 2px; } |
タイトル付きの囲み枠
タイトル部分
シンプルなタイトルを付けた囲み枠。スタイリッシュな印象なのでビジネスライクなサイトで活躍するシンプルなスタイルです。
HTML
CSS
1 2 3 4 5 | <div class="box_15"> <div class="box_15_ttl">ここにタイトルを入れる</div> <div class="box_15_txt">ここに文章を入れる</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .box_15 { background: #eaf5f9; padding: 1.5em; } .box_15_ttl { border-left: solid 4px #27acd9; padding-left: 15px; color: #27acd9; font-weight: bold; font-size: 1.2em; margin-bottom: 10px; } .box_15_txt { margin-top: 10px; } |
タイトル部分
上部にタイトルを入れた囲み枠。太いタイトルの帯が目立ちますので、要点をまとめたい時などに活躍します。
HTML
CSS
1 2 3 4 5 | <div class="box_16"> <div class="box_16_ttl">ここにタイトルを入れる</div> <div class="box_16_txt">ここに文章を入れる</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .box_16 { border: 1px solid #27acd9; } .box_16_ttl { margin: 0; background: #27acd9; color: #fff; padding: 10px; text-align: center; font-weight: bold; } .box_16_txt { margin: 0; padding: 1em; } |
タイトル部分
リボン風のタイトルを付けた囲み枠。リボンの折り返し部分を付けただけで、シンプルながらおしゃれな印象になります。
HTML
CSS
1 2 3 4 5 | <div class="box_17"> <div class="box_17_ttl">ここにタイトルを入れる</div> <div class="box_17_txt">ここに文章を入れる</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .box_17 { position: relative; background: #eaf5f9; } .box_17_ttl { position: relative; display: inline-block; padding: 0.5em 2em; background: #27acd9; color: #fff; font-weight: bold; top: 20px; left: -10px; } .box_17_ttl::before { position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 10px transparent; border-right: solid 10px rgb(149, 158, 155); } .box_17_txt { margin: 0; padding: 1em 1.5em 1.5em; } |
タイトル部分
囲み枠の上部にタイトルを挟んだスタイル。シンプルなデザインなので目立ちすぎず、補足説明の要素として配置するのにおすすめです。枠線とタイトルの文字色を統一するのが見やすさのポイントです！
HTML
CSS
1 2 3 4 5 | <div class="box_18"> <div class="box_18_ttl">ここにタイトルを入れる</div> ここに文章を入れる </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box_18 { position: relative; padding: 1.5em; border: 2px solid #27acd9; } .box_18_ttl { position: absolute; padding: 0 0.5em; left: 30px; top: -10px; background: #fff; font-weight: bold; color: #27acd9; } |
タイトル部分
タイトルタブを上側に付けた囲み枠。これもシンプルですが、タブにポイントカラーを入れることで目立たせています。
HTML
CSS
1 2 3 4 5 | <div class="box_19_ttl">ここにタイトルを入れる</div> <div class="box_19"> ここに文章を入れる </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box_19_ttl { background: #27acd9; color: #fff; font-weight: bold; padding: 0.5em 1em 0.2em; display: inline-block; margin-bottom: 0; border-radius: 5px 5px 0 0; } .box_19 { border: 1px solid #27acd9; background: #eaf5f9; padding: 1em; } |
タイトル部分
いろいろな要素を組み合わせた囲み枠。一つのコンテンツとしてしっかり魅せらるデザイン性です。
HTML
CSS
1 2 3 4 5 | <div class="box_20"> <div class="box_20_ttl">ここにタイトルを入れる</div> <div class="box_20_txt">ここに文章を入れる</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .box_20 { border: 1px solid #27acd9; background: #eaf5f9; padding: 1.5em; } .box_20_ttl { border-left: solid 4px #27acd9; padding-left: 10px; color: 27acd9; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; } .box_20_txt { background: #fff; border-radius: 10px; padding: 1em; margin-top: 10px; box-shadow: 0 2px 3px #ccc; } |
まとめ
いかがでしたでしょうか？
今回はビジネスでも活用できそうなシンプルなボックスデザインでまとめています。
CSSを組み合わせればパターンは無限に増えていきます。お好みでカスタマイズしてご利用ください。
無料相談の流れ
1.お申込み
下記お申込フォームより、お気軽にご連絡ください。
2.日程調整
担当より日程のご連絡をいたします。
3.無料相談
30分程度の相談会を実施いたします。
4.商談
弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。
無料相談 ご利用後の流れ
しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。
▼お申し込みはこちらから
メールでのお問い合わせ
お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。
LINEでのお問い合わせ
お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。
