【CSS】超簡単!コピペで作れるオシャレなボックスデザイン30選!

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

ブログでボックスデザインを作りたいんだけど、どうやってするの?


という方のために、今回は、完全コピペで作れるボックスデザイン30個紹介します。全てレスポンシブ対応で、HTMLとCSSのコピペだけで使うことができます!


使い方

CSSをコピペ

下で紹介するボックスデザインで好きなものがあればCSSをコピーします。これをブログやサイトのCSSファイルにコピペします。貼り付ける方法についてですが、ブログサービスによって違います。

※アップデートなどによりCSSの編集場所が変わっている場合もあります

CSSを貼り付ける場所

WordPress

[ダッシュボード] [外観] [テーマエディター] 右側のバーの[style.css]

はてなブログ

[デザイン] [] [デザインCSS]

アメブロ

[マイページ] [デザインの変更] [CSSの編集]

Livedoorブログ

[ブログ設定] [PC] [カスタマイズ] [CSS]

FC2ブログ

[カスタマイズ] [上級者向け] [CSSを追加]


挿入したい箇所にHTMLをコピペ

HTMLタグを、HTML編集モードなどにした上で、そのまま記事や固定ページ内にコピペしてください。指定のボックスデザインが表示されると思います。

シンプルなボックスデザイン

1. 線で囲んだだけ

少し太めの実線で囲んだだけのボックスデザインです。分かりやすさが強みです。ただ、派手な見た目にしたいときには少し物足りないかもしれません。

HTML CSS


2. 角が丸い

角が丸いボックスデザインです。柔らかい雰囲気ですね。必要に応じて、文字色やボーダー、角の丸み具合をカスタマイズしてみてください。

HTML CSS


3. 背景色だけ

ボーダーを使わずに背景を塗っただけのボックスデザインです。よくみる一般的なボックスですね。背景色は好みで変えてみてください。

HTML CSS


4. 上下に線

背景色に加えて、上下に太めの線を足したボックスデザインです。ポイントや見出しに使えます。線と背景の色の組み合わせが大切です。

HTML CSS


5. 二重線

二重線で囲んだボックスデザインです。borderプロパティーで[double]を指定することで簡単に作ることができます。

HTML CSS


6. 破線

ボーダーを破線にしたボックスデザインです。線の太さは、好みで変えてください。[border:dashed 2px]の値を変えるだけです。

HTML CSS


7. 左右二重線

左右に二重線をつけたボックスデザインです。サイトのデザインに合わせて色を変えることでいい感じになります。

HTML CSS


8. 左に太線

左に太線をつけた付箋っぽいボックスデザインです。汎用的で、ポイントや補足を強調するために使うと効果的です。

HTML CSS


9. 上に太線

こちらは上に線をつけてみたボックスデザインです。背景・線・文字の色を同系統色で統一するとがオシャレに見えます。

HTML CSS


10. 影アリ

影をつけて立体感を出したボックスデザインです。影はボタンとかにもよく使われますね。背景には、白やグレイあたりをつけるのがオススメです。

HTML CSS


11. 落ち着いた

影を使ってボックス領域を強調したボックスデザインです。上のボーラは左に配置してもいい感じになります(border-topをborder-leftに入れ替え)。

HTML CSS


12. ボード風

背景よりちょっと暗めの影をつけることで、立体感を出したボックスデザインです。あんまり影が強調されるとボタンっぽくなってしまうのがネックです。

HTML CSS


13. 影濃いめ

影を濃いめにつけて立体感をさらに強調したボックスデザインです。やや派手なので、多用するのはオススメしません。

HTML CSS


かわいいボックスデザイン

14. 布風

破線を使って布っぽさを表現したボックスデザインです。かわいい系がテーマのブログやWebサイトと相性がいいです。

HTML CSS


15. 角丸&ピンクver

角に丸みをつけて、背景と線の色をピンクにしたボックスデザインです。可愛さを強調したいときにオススメのデザインです。

HTML

CSS


16. ストライプ

背景を斜めのストライプで塗りつぶしたボックスデザインです。青っぽい文字色と組み合わせるといい感じにマッチします。

HTML CSS


おしゃれなボックスデザイン

17. 交差

縦と横のボーダーが交差するボックスデザインです。お好みで線の色をカラフルにしてもオシャレな感じになりますよ。

HTML CSS


18. 角に円

ボックスの角に円形をつけたボックスデザインです。カラフルな文字色と組み合わせると、オシャレな感じになっていいですよ。

HTML CSS


19. カギカッコ

カギカッコをつけたボックスデザインです。セリフや引用などを強調するのに最適です。お好みで線を他の色にするといいでしょう。

HTML CSS


20. 点線の大括弧

点線の大カッコをつけたボックスデザインです。使う場面を選びそうなデザインかもしれません。CSSの[background]の部分を消すと背景が透明になります。

HTML CSS


21. グラデーション

赤色のグラデーションで塗ったボックデザインです。派手なので要素を強調することができます。いろんな色でグラデーションを作ってみると楽しいですよ。

HTML CSS


22. 紙風

紙っぽい雰囲気のボックスデザインです。見出しに使ったり、ちょうどいい感じに要素を強調できます。落ち着いた色合いのブログやWebサイトと相性がいいです。

HTML CSS


23. 考えてる風

何か考えごとをしているような雰囲気のボックスデザインです。セリフを作ったりや内容を補足をするときに使うと効果的です。

HTML CSS


24. フキダシ

シンプルなフキダシ風のボックスデザインです。使いやすいのがポイントです。サイトの雰囲気に合わせて色を変えるといいかもしれません。

HTML CSS


25. テープ風

テープ風のボックスデザインです。補足事項を強調するのに使えます。落ち着いた雰囲気のブログやWebサイトと合いそうです。

HTML CSS


タイトルつきボックスデザイン

26. 枠上にタイトル

POINT

枠の左上にタイトルを入れることができるボックスデザインです。タイトル部分が改行されるとデザインが崩れてしまうので、短めにしましょう。

HTML CSS


27. 枠外にタイトル

POINT

タイトルがボックスからはみ出たデザインです。ポイントや補足などを強調したいときに使うのがおすすめです。

HTML CSS


28. 枠内にタイトル

POINT

タイトルをボックス内に入れたボックスデザインです。CSSの「left:~」を「right:~」に変えればタイトルを右上に配置することができます。

HTML CSS


29. タイトルが横いっぱいに広がった

POINT

タイトルの行をボックスの幅いっぱいに広げたボックスデザインです。ポイントや補足をより目立たせたいときにオススメです。

HTML CSS


30. さらに影をつけたver

POINT

29のデザインの色を変えて、影をつけたボックスデザインです。チェックマークはFontAwesomeを使った実装しました。

HTML CSS


最後に

今回は、HTMLとCSSのコピペだけで作れるボックスデザイン30ほど紹介しました。

ボックスを使うと記事がオシャレになったり、わかりやすくなるので、効果的に使っていきたいですね!

最後まで読んで頂きありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました