【おしゃれ】ブログで使える、囲み枠(ボックス)のデザイン【CSS】

ボックスデザイン

こんにちは、ゆうがです!
よくブログで囲み枠の中に文字とか入ってるのを見たりしますよね。

こんな感じのボックス

これがあることで、見やすさや、わかりやすさは全然変わってきます。

なので今回は、ブログで使える、囲み枠(ボックス)のデザインを紹介していきます。

[code_balloon position=”left” name=”ゆうが” text=”コピペでできるので、是非実装してみてください!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

それではさっそくいきましょう!

スポンサーリンク

共通のHTMLコード

まずはじめに、共通で使えるHTMLコードを紹介します。

<div class="box"> 
<p>ここに文章</p>
 </div>

これをブログにはれば、あとはデザイン次第で囲み枠(ボックス)を使えるようになります。

では、続いてデザインを紹介していきます。
※順次追加していきます。m(_ _)m

スポンサーリンク

ブログで使える、囲み枠(ボックス)のデザイン

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

ここに文章
まじでシンプルです。
.box {
padding:1.4em;
border: solid 4px #000;
}

影付きデザイン

ここに文章
先程よりは、見やすいですし一見インパクトがあるので、おすすめです。
.box{
padding: 1.4em;
background: #63acb7;  
border-radius: 4px;
color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

付箋風ボックス

ここに文章
付箋で「ここテストでる」みたくメモ代わりにすると、役立ちそうです!
.box {
  padding: 1.4em;
  background: #f2f2f2;
  border-left: solid 15px #63acb7;
}

かわいい点線ボックス

ここに文章
manablogさんがよく使っているボックスデザインですね。
.box {
  padding: 1.4em;
  background: #f2f2f2;
  border: dashed 4px #5b8bd0;
}

それでは、今回は以上です!
記事が参考になれば幸いです。