囲み枠（ボックス装飾）┃コピペですぐに使えるジェネレーターを導入しました！┃HTML,CSS

ウェブサイトで囲み枠（ボックス装飾）を使用すると視覚的な整理をすることができ、ページがより読みやすくなる場合があります。

囲み枠を使うメリット

コンテンツをグループ化できる。
情報の優先順位を伝えやすくなる。
ページの内容にメリハリができる。
サイトの外観を整えることができる。

今回はコピペで使える、上記のような囲み枠／ボックス装飾のデザインをご紹介します。

HTMLだけで使えるタイプもあります

yunico-fluffylife.com

必読┃はじめに
- カラーコードについて
囲み枠の使い方
デザイン┃シンプル
デザイン┃おしゃれ・かわいい
デザイン┃タイトル付き
おわりに

必読┃はじめに

ご紹介しているコードは皆さまが個人のウェブページで使用することを目的として公開しています。

ジェネレーターで作ったコードを配布（色違いを複数生成し、コード紹介と称して掲載する行為など）することを禁じます。

カラーコードについて

コードを生成するためにカラーコードを入力する必要があります。カラーコードは以下のサイト様などから探してくださいね。
www.colordic.org

囲み枠の使い方

yunico

コードの使い方がわかる方はデザインの項目にお進み下さい。

HTML

囲み枠を表示させたい場所（ブログなら記事内）に貼り付けて、文章を入力して使います。

定型文へ登録

はてなブログの定型文登録

はてなブログの記事編集（PC版）で、上記画像①→②→の順番に選択して、定型文にHTMLを登録しておく。
③→④と選択して本文に定型文を貼り付ける。

CSSコードは（CSSデザインに貼り付ける場合）一度きりで同じデザインをずっと使うことができますが、HTMLは使用するたびに記入する必要があります。よく使うHTMLは定型文に登録しておくのがおすすめです！

yunico

スマホから記事を編集される方は【定型文アプリ】や【コピペアプリ】を使うのが便利です。

CSS ⒈全体に反映

コードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

CSS ⒉記事ごとに反映

<style>
ここにCSSコード
</style>

上記のように＜style＞で囲んだ状態のCSSコードを記事内に貼り付けると、記事内でデザインを完結することができます。

もくもく

この方法はCSSを書き込んだ記事のみに有効な方法だよ。
BOXを使う時はHTMLとあわせてCSSも毎回入力する必要があるから注意してね。

デザイン┃シンプル

BOX1 // 囲い枠

ここに文字が入ります。
このように表示されます。

枠線の種類

枠線の色

枠線の太さ

角の丸み

▼ BOX1 // HTML

<div class="box1">ここに文字</div>

▼ BOX1 // 生成されたCSS

.box1 {
    padding: 0.5em 1em;
    border: solid 1px #DCBFAC;
    border-radius: 0px;
}

BOX2 // 背景

ここに文字が入ります。
このように表示されます。

背景色

角の丸み

▼ Box2 // HTML

<div class="box2">ここに文字</div>

▼ Box2 // 生成されたCSS

.box2 {
    padding: 0.5em 1em;
    background-color: #F3E9E3;
    border-radius: 0px;
}

BOX3 // 交差する線で囲う

ここに文字が入ります。
このように表示されます。

線の色

線の太さ

▼ BOX3 // HTML

<div class="box3">ここに文字</div>

▼ BOX3 // 生成されたCSS

.box3 {
    position: relative;
    padding:  1em 2em;
    border-top: solid 2px #85A2C3;
    border-bottom: solid 2px #85A2C3;
}

.box3::before,
.box3::after {
    position: absolute;
    width: 2px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #85A2C3;
    content: '';
}

.box3::before {
    left: 10px;
}

.box3::after {
    right: 10px;
}

BOX4 // めくれた紙

ここに文字が入ります。
このように表示されます。

背景色

三角のサイズ

三角の色

▼ BOX4 // HTML

<div class="box4">ここに文字</div>

▼ bottom4 // 生成されたCSS

.box4 {
    padding: 1em 1.5em;
    background-color: #E1E9EB;
    position: relative;
}

.box4:after {
    position: absolute;
    content: '';
    border-style: solid;
    right: 0px;
    top: 0px;
    border-width: 0 20px 20px 0;
    border-color: #BACCD2 #FFFFFF #BACCD2;
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);
}

デザイン┃おしゃれ・かわいい

BOX5 // 背景上の線で囲う

ここに文字が入ります。
このように表示されます。

背景色

枠線の種類

枠線の太さ

枠線の色

角の丸み

▼ BOX5 // HTML

<div class="box5">ここに文字</div>

▼ BOX5 // 生成されたCSS

.box5 {
    padding: 1em 1.5em;
    background-color: #F6F2EF;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.box5 .box5-border {
    position: absolute;
    border: dashed 2px #B69E8C;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0.5em;
    border-radius: 10px;
    z-index: -1;
}

BOX6 // ずれた囲み枠

ここに文字が入ります。
このように表示されます。

背景色

枠線の色

枠線の種類

枠線の太さ

角の丸み

▼ BOX6 // HTML

<div class="box6-wrapper"><div class="box6-background"></div><div class="box6">ここに文字</div></div>

▼ BOX6 // 生成されたCSS

.box6-wrapper {
    position: relative;
    width: 98%;
}

.box6 {
    padding: 1.5em 0.5em 1em 1.5em;
    background: none;
    border: 1px solid #DCBFAC;
    position: relative;
    border-radius: 0px;
}

.box6-background {
    background-color: #F3E9E3;
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    border-radius: 0px;
}

BOX7 // ストライプ背景

ここに文字が入ります。
このように表示されます。

ストライプ色

▼ BOX7 // HTML

<div class="box7"><div class="box7-inner">ここに文字</div></div>

▼ BOX7 // 生成されたCSS

.box7 {
    border: none;
    background: repeating-linear-gradient(-45deg, #ECE8E1, #ECE8E1 10px, #FFFFFF 10px, #FFFFFF 20px);
    padding: 15px;
}

.box7-inner {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 95%;
    padding: 10px;
}

BOX8 // チェック背景

ここに文字が入ります。
このように表示されます。

背景色

▼ BOX8 // HTML

<div class="box8"><div class="box8-inner">ここに文字</div></div>

▼ BOX8 // 生成されたCSS

.box8 {
    border: none;
    background: #ffffff;
    background-image: linear-gradient(-45deg, rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%);
    background-size: 40px 40px;
    transform: rotate(0deg);
    padding: 15px;
}

.box8-inner {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 95%;
    padding: 10px;
}

BOX9 // ドット背景

ここに文字が入ります。
このように表示されます。

背景色

ドットの色

●サイズ

▼ BOX9 // HTML

<div class="box9"><div class="box9-inner">ここに文字</div></div>

▼ BOX9 // 生成されたCSS

.box9 {
    border: none;
    background: #ECE8E1;
    background-image: radial-gradient(#ffffff 15%, transparent 20%), radial-gradient(#ffffff 15%, transparent 15%);
    background-position: 0 0, 13px 13px;
    background-size: 25px 25px;
    padding: 15px;
}

.box9-inner {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 95%;
    padding: 10px;
}

デザイン┃タイトル付き

BOX10 // シンプル

タイトル

ここに本文が入ります。
このように表示されます。

枠線の種類

枠線の色

枠線の太さ

タイトルの
文字色

タイトルの
文字サイズ

タイトルを
太字にする

▼ BOX10 // HTMLコード

<div class="box10"><div class="box-title">ここにタイトル</div>ここに本文</div>

▼ BOX10 // 生成されたCSS

.box10 {
    background-color: #fff;
    padding: 1em;
    position: relative;
    border: solid 1px #4F6071;
}

.box10 .box-title {
    background-color: #fff;
    font-size: 15px;
    font-weight: normal;
    color: #4F6071;
    padding: 0 5px;
    line-height: 1;
    position: absolute;
    top: -7px;
    left: 20px;
}

BOX11 // 背景付きシンプル

タイトル

ここに本文が入ります。
このように表示されます。

枠線の種類

枠線の色

枠線の太さ

タイトルの
背景色

タイトルの
文字サイズ

タイトルを
太字にする

▼ BOX11 // HTML

<div class="box11"><div class="box-title">ここにタイトル</div>ここに本文</div>

▼ BOX11 // 生成されたCSS

.box11 {
    background-color: #fff;
    padding: 1.5em 1em 1em 1em;
    position: relative;
    border: solid 1px #BC8F8F;
}

.box11 .box-title {
    background-color: #BC8F8F;
    font-size: 13px;
    font-weight: normal;
    color: #FFFFFF;
    padding: 7px 10px;
    line-height: 1;
    position: absolute;
    top: -12px;
    left: 15px;
}

BOX12 // 内側入りの背景

タイトル

ここに本文が入ります。
このように表示されます。

枠線の種類

枠線の色

枠線の太さ

タイトル
右下の丸み

タイトルの
背景色

タイトルの
文字サイズ

タイトルを
太字にする

▼ BOX12 // HTML

<div class="box12"><div class="box-title">ここにタイトル</div>ここに文字</div>

▼ BOX12 // 生成されたCSS

.box12 {
    padding: 2em 1em 0.5em;
    position: relative;
    border: solid 1px #8FBCBC;
}

.box12 .box-title {
    background: #8FBCBC;
    font-size: 13px;
    border-radius: 0 0 0 0;
    font-weight: normal;
    color: #FFFFFF;
    padding: 5px 15px 5px 10px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
}

BOX13 // テープで貼り付けたメモ

タイトル

ここに本文が入ります。
このように表示されます。

背景色

タイトルの
文字サイズ

タイトルを
太字にする

▼ BOX13 // HTML

<div class="box13"><div class="box-title">ここにタイトル</div>ここに文字</div>

▼ BOX13 // 生成されたCSS

.box13 {
    position: relative;
    margin-top: 3em;
    padding: 1.2em 1em 0.8em;
    background-color: #F4F5F7;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.box13 .box-title {
    position: absolute;
    width: 40%;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    padding: 0 10px;
    border-right: 1.5px dotted rgb(0 0 0 / 5%);
    border-left: 1.5px dotted rgb(0 0 0 / 5%);
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
    background-color: rgb(255 255 255 / 50%);
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}

おわりに

コピペで使える囲み枠をご紹介しました！

もくもく

ウェブページ作りのお手伝いができたら嬉しいね。

yunico

ご不明点などありましたらお気軽にお問い合わせください。

yunico-fluffylife.com

yunico's fluffy life

横着主婦の暮らしの詰め合わせ

囲み枠（ボックス装飾）┃コピペですぐに使えるジェネレーターを導入しました！┃HTML,CSS

必読┃はじめに

カラーコードについて

囲み枠の使い方

HTML

定型文へ登録

CSS ⒈全体に反映

CSS ⒉記事ごとに反映

デザイン┃シンプル

BOX1 // 囲い枠

BOX2 // 背景

BOX3 // 交差する線で囲う

BOX4 // めくれた紙

デザイン┃おしゃれ・かわいい

BOX5 // 背景上の線で囲う

BOX6 // ずれた囲み枠

BOX7 // ストライプ背景

BOX8 // チェック背景

BOX9 // ドット背景

デザイン┃タイトル付き

BOX10 // シンプル

BOX11 // 背景付きシンプル

BOX12 // 内側入りの背景

BOX13 // テープで貼り付けたメモ

おわりに