fbpx

【CSS】おしゃれで可愛い囲み枠(ボックス)デザイン13パターン

ウェブサイト制作

タイトルや見出しにぴったりなおしゃれで可愛い囲み枠(ボックス)のデザインを作ってみたのでぜひ、コピペで簡単にお使いくださいね♪

簡単!CSSデザインを実装するやり方・使い方

HTML・CSSのある場所は?

ワードプレスの場合

HTML:
記事投稿の「テキスト」タブCSS:
①ダッシュボードの外観 → テーマの編集 → 「style.css」
②ダッシュボードの外観 → カスタマイズ → 「追加CSS」

CSSは2通りの方法がありますので、ご自分が使いやすい方で良いです。
CSSは下から優先されるので、一番下から記述していきましょう。

HTMLの記述方法

テキストを<div class=”fancybox●”>〜</div>で囲みます。●には紹介するデザインの数字が入ります。

<div class=”fancybox●”>テキスト</div>

色の指定について

色は、下記のような記述をしていきます。

#224355

#の後に、6桁の数字やアルファベットで記述します。

下記サイトから色のコードが見れますので参考にしてみてください。

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...

おしゃれで可愛い囲み枠(ボックス)デザイン13パターン

1 シンプルな基本の枠

シンプル枠のサンプルです
<div class=”fancybox1”>テキスト</div>
.fancybox1 {
border: 2px solid #f5d5da;
background: #ffffff;
padding: 10px;
width: 500px;
margin: auto;
}

2 シンプルな二重枠

シンプルな二重枠のサンプルです
<div class=”fancybox2”>テキスト</div>
.fancybox2 {
border: 6px double #f5d5da;
background: #fff;
padding: 10px;
max-width: 500px;
margin: auto;
display: block;
}

3 ふわっとぼかし枠

ふわっとぼかし枠のサンプルです
<div class=”fancybox3”>テキスト</div>
.fancybox3 {
margin: auto;
padding: 20px;
max-width: 500px;
background-color: #ffcccc;
box-shadow: 0 0 10px 10px #ffcccc;
}

4 ゆめかわグラデーション枠

ゆめかわグラデーション枠のサンプルです
<div class=”fancybox4”>テキスト</div>
.fancybox4 {
margin: auto;
padding: 20px;
max-width: 500px;
box-shadow: 0 0 5px 5px #ffcccc, 0 0 5px 3px #ffcf78 inset;
}

5 ドット背景の枠

ドット背景の枠のサンプルです
<div class=”fancybox5”>テキスト</div>
.fancybox5 {
background: #f5d5da;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
padding: 20px;
color: #6f6f6f;
max-width: 500px;
margin: auto;
}

6 布風の枠

布風の枠のサンプルです
可愛いですね
<div class=”fancybox6”>テキスト</div>
.fancybox6 {
padding: 0.2em 0.5em;
background: #f5d5da;
box-shadow: 0px 0px 0px 10px #f5d5da;
border: dashed 2px white;
max-width: 500px;
margin: auto;
}

7 吹き出しの枠

吹き出しの枠のサンプルです
<div class=”fancybox7”>テキスト</div>
.fancybox7 {
position: relative;
padding: 20px;
background: #f5aeb9;
color: #ffffff;
font-weight: bold;
border-radius: 20px;
max-width: 500px;
margin: auto;
}
.fancybox7:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 14px solid transparent;
border-top: 14px solid #f5aeb9;
width: 0;
height: 0;
}

8 ストライプ背景の枠

ストライプ背景の枠のサンプルです
<div class=”fancybox8”>テキスト</div>
.fancybox8 {
padding: 20px;
color: #6f6f6f;
max-width: 500px;
margin: auto;
background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 10px, #fcf0f1 0, #fcf0f1 20px);
}

9 枠がストライプ

枠がストライプのサンプルです
.fancybox9 {
padding: 18px;
position: relative;
z-index: 0;
width: 500px;
margin: auto;
}
.fancybox9:before{
background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 5px, #fcf0f1 0, #fcf0f1 10px);
content: ”;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -2;
}
.fancybox9:after{
background: #fff;
content: ”;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: -1;
}

10 角丸ドロップシャドウ

角丸ドロップシャドウのサンプルです
<div class=”fancybox10”>テキスト</div>
.fancybox10 {
border: 4px solid #ffe2e0;
border-radius: 10px;
padding: 10px;
box-shadow: 2px 2px 3px #ddd;
margin: auto;
width: 500px;
display: block
}
.fancybox10 {
border: 4px solid #ffe2e0;
border-radius: 10px;
padding: 10px;
box-shadow: 2px 2px 3px #ddd;
}
.fancybox10 {
border: 4px solid #ffe2e0;
border-radius: 10px;
padding: 10px;
text-align: center;
box-shadow: 2px 2px 3px #ddd;
}

11 チェック柄の背景の枠

チェック柄の背景の枠のサンプルです
<div class=”fancybox11”>テキスト</div>
.fancybox11 {
border: 1px solid #fcebeb;
padding: 20px;
background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%);
background-size: 30px 30px;
max-width: 500px;
margin: auto;
}

12 角ポイントカラーの枠

角ポイントカラーのサンプルです
<div class=”fancybox12”>テキスト</div>
.fancybox12 {
border: 5px solid #eee;
padding: 10px;
position: relative;
z-index: 0;
max-width: 500px;
margin: auto;
}
.fancybox12:before {
border-top: 5px solid #f0b8bf;
border-left: 5px solid #f0b8bf;
content: ”;
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 20px;
height: 20px;
z-index: 1;
}

13 紙をテープでペタッと風枠

紙をテープでペタッと枠のサンプルです
<div class=”fancybox13”>テキスト</div>
.fancybox13 {
position: relative;
width: 90%;
margin: 2.5em auto;
padding: 35px 30px 20px;
color: #4c4c4c;
background-color: #e8ddbd;
box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.fancybox13::before {
display: block;
position: absolute;
content: “”;
width: 140px;
height: 35px;
left: 35%;
top: -16px;
background-color: rgba(204, 186, 136,0.3);
box-shadow: 0 0 3px rgba(0,0,0,0.1);
transform: rotate( -3.4deg ); }

コメント

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