【PR】当サイトでは広告を含みますが、感じたままを正直にお伝えしていますHTML・CSSを使って、ボックス（囲み枠）デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。
デザイン例が充実！おしゃれなデザインの囲み枠
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30／サルワカ
囲み枠のサンプル画像をずらっと並べるだけで、すごい数！シンプル系から、おしゃれなものまで、囲み枠のデザインが揃っています。ひとつひとつデザインの解説と、HTML＆CSSのコードが紹介されていて、とてもわかりやすいです。勉強にもなる！
女性向けサイトにぴったりな囲み枠デザイン
コピペで可愛く装飾！ CSSのみでデザインする囲み枠【div, p】／第0版
パッと目をひく、コピペで可愛く装飾できる囲み枠デザインが揃っています。水玉やチェックのデザインもCSSでできちゃうんですね。可愛い〜。
お知らせにも使えるさまざまな囲みデザインを網羅
【CSS】シンプルな囲み枠（ボックス）コピペで楽チン変更も簡単♪ | Purple Life
少しずつデザインを変えた囲みデザインを紹介していて、デザインに対しての細やかなアドバイスも豊富なので、初心者でも使い勝手がよいサイト。
レスポンシブデザインもしっかり配慮されているので、安心して使用できます。
なかでも黒板の囲みデザインが豊富で、色だけでなく材質を変えたパターンや、ホワイトボード風まであります。
汎用性のある囲み枠デザイン
CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン／Naifix
シンプルな囲み枠のデザインのCSSが揃っています。手書き風デザインの囲み枠が、珍しいデザインになっています。
Web制作会社のボックスデザイン
ボックス | Maromaroスタイルレシピ | Maromaro Blog
Web制作会社ならではの、プロスタイルのカードスタイル型ボックスデザイン。どんなサイトにも合いそうな洗練されたボックスデザインが揃っています。随時、追加されていくみたいなので、見るたびに新しい発見がありそう。
カードスタイルのデザイン
カードデザインのポイントと実装方法 | Webクリエイターボックス
画像やテキスト、リンク先など、さまざまな情報をすっきりとまとめられる、カードスタイルのデザイン。シンプルなデザインなので、Webサイトにあわせやすいです。
画像＋説明文のよくある並び
写真＋説明文は企業サイトや、グルメサイトなどによく使う並び。シンプルに情報を並べたいときにおすすめ。
ノンデザイナーにおすすめ情報
ネットでググる情報だけでは物足りなくなった人におすすめです。
ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。
ノンデザイナーから楽しく学ぶ「デイトラ」
デイトラは私が2コース受けたぐらい、楽しく学べる業界最安級のWebスキル特化型オンラインスクール。
さかぽん1年間質問し放題で好きなタイミングで学べて、ずっと閲覧可能で、過去受講した内容も最新に更新されていくのが良いんですよね〜
Web制作コース
ではコーディング力が身につくので、コピペしてもうまくいかない！という悩みからおさらばできるはず！
コメント