コピペで使える!ビジネスブログ向けの囲み枠デザイン20選

今回はオウンドメディアサイトなどで活用できる、囲み枠(ボックスデザイン)をご紹介したいと思います。
HTML+CSSだけで構成していますので、コピペですぐに使えます!
背景色(background)、線(border)の太さや色、枠と本文の間隔(padding)を調整して、ご自身のサイトに合った雰囲気にカスタマイズすることも可能です。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

シンプルな囲み枠

枠線だけのシンプルなボックス。線(border)の太さを変えれば、スタイリッシュにもカジュアルにもなります。

HTML

CSS
点線のボックス。実線よりもカジュアルな印象になります。線(border)の太さを変えるだけでもまた違った雰囲気に。

HTML

CSS
二重線と角丸にしたボックス。角の丸み(border-radius)の数値を大きくするほど、より柔らかな印象になります。

HTML

CSS
背景に色を入れたボックス。背景に濃い色を設定する場合は、文字色を白にすれば読みやすくより強調されます。

HTML

CSS
背景と枠線を組み合わせたボックス。これまでの枠線(border)のCSSを参考して、実線(solid)・二重線(double)などに変えて様々なスタイルにカスタマイズできます。

HTML

CSS
2種類の要素を組み合わせて作ったボックス。少しの工夫でデザイン性が格段にアップしますね。

HTML

CSS

立体的な囲み枠

シンプルに影を付けた立体的なボックス。右下にふんわりシャドウを付けることで、少し浮いたように見せています。

HTML

CSS
グラデーションを使ったボックス。背景をワントーンのグラデーションにすることで、立体感を出しました。下部を暗い色にすることがポイント!自然な立体感を表現することが可能です。

HTML

CSS
下側に線を入れて立体感を出したボックス。分厚いボード風になりました。カジュアルなサイトでのご使用がおすすめです。

HTML

CSS

デザイン性のある囲み枠

吹き出しデザインの囲み枠。文章とは別にワンポイントのアドバイスなど、少しくだけたコメントを載せるのにもおすすめです。

HTML

CSS
角を折ったメモ風デザインの囲み枠。ベースの背景が薄い色でも、角の折れた部分を濃い色にすることでアクセントになり、目に留まりやすい項目となります。

HTML

CSS
便箋風デザインの囲み枠。テキストに下線を付けて行間にゆとりを持たせることがポイントです。長い文章を掲載すると固い印象になりがちですが、こうして便箋デザインにすることで柔らかな印象になり、格段に読みやすくなります。

HTML

CSS
ルーズリーフ風デザインの囲み枠。先ほどの便箋スタイルにプラスして、サイドにパンチ穴の丸を並べることで、ルーズリーフに早変わり。よりカジュアルな印象になります。

HTML

CSS
ステッチの付いた布風デザインの囲み枠。点線で囲んで縫い目を表現しています。ソーイングやハンドメイド関連のサイトで活躍しそうですね。線(border)の太さを調整すればまた印象が変わって見えますので、お好みでお試しください。

HTML

CSS

タイトル付きの囲み枠

タイトル部分
シンプルなタイトルを付けた囲み枠。スタイリッシュな印象なのでビジネスライクなサイトで活躍するシンプルなスタイルです。

HTML

CSS
タイトル部分
上部にタイトルを入れた囲み枠。太いタイトルの帯が目立ちますので、要点をまとめたい時などに活躍します。

HTML

CSS
タイトル部分
リボン風のタイトルを付けた囲み枠。リボンの折り返し部分を付けただけで、シンプルながらおしゃれな印象になります。

HTML

CSS
タイトル部分
囲み枠の上部にタイトルを挟んだスタイル。シンプルなデザインなので目立ちすぎず、補足説明の要素として配置するのにおすすめです。枠線とタイトルの文字色を統一するのが見やすさのポイントです!

HTML

CSS
タイトル部分
タイトルタブを上側に付けた囲み枠。これもシンプルですが、タブにポイントカラーを入れることで目立たせています。

HTML

CSS
タイトル部分
いろいろな要素を組み合わせた囲み枠。一つのコンテンツとしてしっかり魅せらるデザイン性です。

HTML

CSS

まとめ

いかがでしたでしょうか?
今回はビジネスでも活用できそうなシンプルなボックスデザインでまとめています。
CSSを組み合わせればパターンは無限に増えていきます。お好みでカスタマイズしてご利用ください。

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談 ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

Web集客の無料相談

▼お申し込みはこちらから
Web集客の無料相談

Web集客の無料相談こちらをクリック

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

インスタ集客とブログ集客で反応率を3倍に引き上げるホームページ制作会社 株式会社エクセレント

下川宜子

下川宜子

デザイン業務を担当しています。10年以上の実務経験の中で様々なジャンルのサイト制作に携わりました。ユーザー目線を大切にしたランディングページ制作を得意としています。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. Instagram(インスタグラム)の魅力的なプロフィールの書き方を解説します

  2. Instagram(インスタグラム)まとめ記事 プロフィールについて

  3. Instagram(インスタグラム)とは?いまさら聞けないInstagramの基礎知識

  4. あなたのビジネスをインスタ集客×ブログ接客で売上を3倍にする方法

  5. インスタグラム(Instagram) まとめ記事 業種別 インスタグラム運用の参考になるアカウントを紹介します

  6. Instagramのショッピング機能(Shop Now)の審査が通らない原因や再審査方法を紹介します。

  7. Instagram(インスタグラム)インスタショップ-Shop Now-の設定方法 【2022年最新版】

  8. インスタグラム(Instagram) まとめ記事 ストーリーズ投稿動画とは? ストーリーズ投稿についての基礎知識を解説します

  9. インスタグラム(Instagram) まとめ記事 リール動画とは? リール動画についての基礎知識を解説します

  10. インスタグラムマーケティングとは?Instagram運用に向いている企業と向いていない企業

  1. Instagram(インスタ)のリールの音源を保存して活用する方法

  2. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

  3. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

  4. 初心者が知っておくべき基本的なSEO対策とは?上位表示に必要なやり方・方法について解説します。

  5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

  6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

  7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

  8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP