HTML・CSSを使って、ボックス（囲み枠）デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。
ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。
その他の記事まとめは、こちらからどうぞ。
デザイン例が充実！おしゃれなデザインの囲み枠
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30／サルワカ
囲み枠のサンプル画像をずらっと並べるだけで、すごい数！シンプル系から、おしゃれなものまで、囲み枠のデザインが揃っています。ひとつひとつデザインの解説と、HTML＆CSSのコードが紹介されていて、とてもわかりやすいです。勉強にもなる！
女性向けサイトにぴったりな囲み枠デザイン
コピペで可愛く装飾！ CSSのみでデザインする囲み枠【div, p】／第0版
パッと目をひく、コピペで可愛く装飾できる囲み枠デザインが揃っています。水玉やチェックのデザインもCSSでできちゃうんですね。可愛い〜。
アクセントに使える囲み枠デザイン
囲み枠・デザインボックスCSSでブログ記事にアクセントを／Minimal Green
「タイトル付き囲み枠」が、シンプルで使い勝手がよさそうです。
お知らせにも使えるさまざまな囲みデザインを網羅
【CSS】シンプルな囲み枠（ボックス）コピペで楽チン変更も簡単♪ | Purple Life
少しずつデザインを変えた囲みデザインを紹介していて、デザインに対しての細やかなアドバイスも豊富なので、初心者でも使い勝手がよいサイト。
レスポンシブデザインもしっかり配慮されているので、安心して使用できます。
なかでも黒板の囲みデザインが豊富で、色だけでなく材質を変えたパターンや、ホワイトボード風まであります。
マスキングテープ風の囲み枠デザイン
マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに／Minimal Green
ドット柄、チェック柄といった背景に加えて、さまざまなマスキングテープ風のデザイン。ガーリーな雰囲気のサイトにぴったりなデザインです。
黒板風の囲み枠デザイン
黒板風囲み枠CSSでブログの解説記事をまとめよう／Minimal Green
黒板風の囲み枠は、ナレッジ系のサイトに合いそうです！アイディア次第でいろいろできるんだなと勉強になります。
メモ風の囲み枠デザイン
はてなブログでふい字が使えたのでメモ風cssを作ってみた／FOXISM
メモ風の囲み枠。こういったデザインで囲んであると、柔らかい雰囲気になりますね！
汎用性のある囲み枠デザイン
CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン／Naifix
シンプルな囲み枠のデザインのCSSが揃っています。手書き風デザインの囲み枠が、珍しいデザインになっています。
Web制作会社のボックスデザイン
ボックス | Maromaroスタイルレシピ | Maromaro Blog
Web制作会社ならではの、プロスタイルのカードスタイル型ボックスデザイン。どんなサイトにも合いそうな洗練されたボックスデザインが揃っています。随時、追加されていくみたいなので、見るたびに新しい発見がありそう。
カードスタイルのデザイン
カードデザインのポイントと実装方法 | Webクリエイターボックス
画像やテキスト、リンク先など、さまざまな情報をすっきりとまとめられる、カードスタイルのデザイン。シンプルなデザインなので、Webサイトにあわせやすいです。
画像＋説明文のよくある並び
写真＋説明文は企業サイトや、グルメサイトなどによく使う並び。シンプルに情報を並べたいときにおすすめ。
ノンデザイナーにおすすめ情報
ネットでググる情報だけでは物足りなくなった人におすすめです。
ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。
コメント