宮崎暮らしの視点から、徒然なるままに。

Miyazaki Life

デザイン

【HTML・CSS】コピペで簡単!ボックス(囲み枠)デザイン記事まとめ

更新日:

HTML・CSSを使って、ボックス(囲み枠)デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ?”という備忘録代わりに、精査しながらまとめています。

ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。

その他の記事まとめは、こちらからどうぞ。
【HTML・CSS】コピペで簡単!記事まとめ

スポンサーリンク

デザイン例が充実!おしゃれなデザインの囲み枠

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30/サルワカ
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30/サルワカ

囲み枠のサンプル画像をずらっと並べるだけで、すごい数!シンプル系から、おしゃれなものまで、囲み枠のデザインが揃っています。ひとつひとつデザインの解説と、HTML&CSSのコードが紹介されていて、とてもわかりやすいです。勉強にもなる!

女性向けサイトにぴったりな囲み枠デザイン

コピペで可愛く装飾! CSSのみでデザインする囲み枠【div, p】/第0版
コピペで可愛く装飾! CSSのみでデザインする囲み枠【div, p】/第0版

パッと目をひく、コピペで可愛く装飾できる囲み枠デザインが揃っています。水玉やチェックのデザインもCSSでできちゃうんですね。可愛い〜。

アクセントに使える囲み枠デザイン


囲み枠・デザインボックスCSSでブログ記事にアクセントを/Minimal Green

「タイトル付き囲み枠」が、シンプルで使い勝手がよさそうです。

マスキングテープ風の囲み枠デザイン


マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに/Minimal Green

ドット柄、チェック柄といった背景に加えて、さまざまなマスキングテープ風のデザイン。ガーリーな雰囲気のサイトにぴったりなデザインです。

黒板風の囲み枠デザイン


黒板風囲み枠CSSでブログの解説記事をまとめよう/Minimal Green

黒板風の囲み枠は、ナレッジ系のサイトに合いそうです!アイディア次第でいろいろできるんだなと勉強になります。

メモ風の囲み枠デザイン


はてなブログでふい字が使えたのでメモ風cssを作ってみた/FOXISM

メモ風の囲み枠。こういったデザインで囲んであると、柔らかい雰囲気になりますね!

汎用性のある囲み枠デザイン

CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン/Naifix
CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン/Naifix

シンプルな囲み枠のデザインのCSSが揃っています。手書き風デザインの囲み枠が、珍しいデザインになっています。

Web制作会社のボックスデザイン


ボックス | Maromaroスタイルレシピ | Maromaro Blog

Web制作会社ならではの、プロスタイルのカードスタイル型ボックスデザイン。どんなサイトにも合いそうな洗練されたボックスデザインが揃っています。随時、追加されていくみたいなので、見るたびに新しい発見がありそう。

カードスタイルのデザイン


カードデザインのポイントと実装方法 | Webクリエイターボックス

画像やテキスト、リンク先など、さまざまな情報をすっきりとまとめられる、カードスタイルのデザイン。シンプルなデザインなので、Webサイトにあわせやすいです。

さかぽん
”どのサイトにどんなデザインの囲み枠があったっけ?”というのを自分用にわかりやすくまとめたメモ記事です。実際にコピペで実装しながら、紹介するサイトは変わっていくと思います!

ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。

-デザイン

Copyright© Miyazaki Life , 2018 All Rights Reserved.