女子向けカスタマイズ

CSSで作れるシンプルな飾り枠デザイン

見出しデザインに続いて、CSSのコピペだけで反映できる、飾り枠のデザインを用意しました。
フォントのサイズや色はご自由に変更ください。

基本の飾り枠

この記事で紹介するデザインでは、HTMLを以下のように記述しています。
<div>~</div><の中の文章を好きに書き換えて使ってくださいね。

<div class="border-box">
    いろんな箱をつくってかわいく記事を飾ろう。
</div>

シンプルな枠線

一番シンプルな飾り枠はこれですね。

シンプルな飾り枠
.border-box{
    border:1px solid #97D3D3;
    padding:16px;
    margin:20px;
}

border: 線の太さ 線の種類 線の色という形で設定します。
paddingは枠の中の余白。
marginは枠の外の余白を設定します。

線を太くすることもできます。

太線の飾り枠

borderのところを1pxから5pxにしてみました。

.border-box{
    border:5px solid #97D3D3;
    padding:16px;
    margin:20px;
}

点線にすると、さりげなく。

.border-box{
    border:3px dashed #97D3D3;
    padding:16px;
    margin:20px;
}

ドットな枠線

ドットにすると、可愛らしさがUP🌸

ドットの飾り枠
.border-box{
    border:4px dotted #EEB1C0;
    padding:16px;
    margin:20px;
}

二重線な枠線

二重線にするときはborderの太さを3pxより大きくした方がきれいです。

二重線の飾り枠
.border-box{
    border:4px double #DA8596;
    padding:16px;
    margin:20px;
}

角を丸くする

border-radiusで角を丸くします。10pxくらいが使いやすくておすすめです✨

角丸の飾り枠
.border-box{
    border:2px solid #F2A09B;
    border-radius:10px;
    padding:16px;
    margin:20px;
}

背景色をいれる

背景色ありの飾り枠

枠線は細めで、背景色よりもちょっとだけ濃くするのが可愛いかなと思います☺️

.border-box{
    border:1px solid #F6BCAC;
    background-color:#FBDFDF;
    border-radius:10px;
    padding:16px;
    margin:20px;
}

background-color:枠内の背景色になっています。

背景色ありの二重線の飾り枠

枠を二重線にするのもすてき。

.border-box{
    border:3px double #F6BECA;
    background-color:#FDEDE3;
    border-radius:10px;
    padding:16px;
    margin:20px;
}

アレンジ編

影をつける

影をつけた飾り枠

.border-box{
border:1px solid #C1E2E4;
box-shadow: 4px 4px 1px #82C5CA;
padding:16px;
margin:20px;
}

箱の中に枠線をつくる

箱内に枠線がある飾り枠
.border-box{
    border:4px solid #FFFFFF;
    background-color: #F8C8B2;
    box-shadow:0 0 0 8px #F8C8B2;
    padding:16px;
    margin:20px;
}

サブタイトルをつけてみる

サブタイトルをつける飾り枠

サブタイトルをつける場合のHTMLコード👇

<div class="border-box">
    <span class="title">ポイント</span>
    いろんな箱をつくってかわいく記事を飾ろう。
</div>
.border-box{
    position:relative;
    border-top:1px solid #F6BCAC;
    border-bottom:1px solid #F6BCAC;
    background-color: #F8DDC8;
    padding:25px 20px;
    margin:30px;
}
.border-box .title{
    position:absolute;
    top: -12px;
    left: px;
    padding: 5px 25px;
    background-color: #F6BCAC;
    border-radius:4px;
    color:#fff;
    line-height: 1em;
}