HTML・CSSでつくるおしゃれなボックス(囲み枠)20選

ブログ記事などでよく見かけるボックス。記事内に挿れるだけでワンクッション間を挟むことができ、文章がグッと読みやすくなる便利な要素です。そこで今回はボックス(囲み枠)のデザインスニペットをまとめました。補足や注意喚起など、ご自身の用途に適したものを選んでみてください。

ブログで使えるボックス

ブログで使えるボックスのメモアイコン(小)バージョン

メモアイコン(小)

step1
デザインを調整する

メモアイコン付きの小さいボックスです。

step2
HTMLをコピペする
HTML
<div class="box-006">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffb36b"
              d="M13.6,4.4l6,6l-13,13L1.2,24c-0.7,0.1-1.3-0.5-1.2-1.2l0.6-5.4C0.6,17.4,13.6,4.4,13.6,4.4z M23.3,3.5l-2.8-2.8  c-0.9-0.9-2.3-0.9-3.2,0l-2.7,2.7l6,6l2.7-2.7C24.2,5.8,24.2,4.4,23.3,3.5z"/>
    </svg>
    <p>メモアイコン付きの小さいボックスです。</p>
</div>
step3
CSSをコピペする
CSS
.box-006 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #fff9e5;
    color: #333333;
}

.box-006 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #ffb36b;
}
ブログで使えるボックスのチェックアイコン(小)バージョン

チェックアイコン(小)

step1
デザインを調整する

チェックアイコン付きの小さいボックスです。

step2
HTMLをコピペする
HTML
<div class="box-008">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#86d67c"
              d="M8.2,20.6l-7.8-7.8c-0.5-0.5-0.5-1.2,0-1.7L2,9.4c0.5-0.5,1.2-0.5,1.7,0L9,14.7L20.3,3.4c0.5-0.5,1.2-0.5,1.7,0l1.7,1.7  c0.5,0.5,0.5,1.2,0,1.7L9.8,20.6C9.4,21.1,8.6,21.1,8.2,20.6L8.2,20.6z"/>
    </svg>
    <p>チェックアイコン付きの小さいボックスです。</p>
</div>
step3
CSSをコピペする
CSS
.box-008 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #ecffe9;
    color: #333333;
}

.box-008 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #86d67c;
}
ブログで使えるボックスの注意アイコン(小)バージョン

注意アイコン(小)

step1
デザインを調整する

注意アイコン付きの小さいボックスです。

step2
HTMLをコピペする
HTML
<div class="box-004">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#f06060"
              d="M12,1.5c.7,0,1.3,.4,1.6,.9l10.1,17.3c.3,.6,.3,1.3,0,1.9s-1,.9-1.6,.9H1.9c-.7,0-1.3-.4-1.6-.9s-.3-1.3,0-1.9L10.4,2.4c.3-.6,1-.9,1.6-.9Zm0,6c-.6,0-1.1,.5-1.1,1.1v5.3c0,.6,.5,1.1,1.1,1.1s1.1-.5,1.1-1.1v-5.3c0-.6-.5-1.1-1.1-1.1Zm1.5,10.5c0-.8-.7-1.5-1.5-1.5s-1.5,.7-1.5,1.5,.7,1.5,1.5,1.5,1.5-.7,1.5-1.5Z"/>
    </svg>
    <p>注意アイコン付きの小さいボックスです。</p>
</div>
step3
CSSをコピペする
CSS
.box-004 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #ffebee;
    color: #333333;
}

.box-004 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
}
ブログで使えるボックスのメモアイコン(大)バージョン

メモアイコン(大)

step1
デザインを調整する
タイトル

メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。

step2
HTMLをコピペする
HTML
<div class="box-007">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
            <path fill="#ffb36b"
                  d="M13.6,4.4l6,6l-13,13L1.2,24c-0.7,0.1-1.3-0.5-1.2-1.2l0.6-5.4C0.6,17.4,13.6,4.4,13.6,4.4z M23.3,3.5l-2.8-2.8  c-0.9-0.9-2.3-0.9-3.2,0l-2.7,2.7l6,6l2.7-2.7C24.2,5.8,24.2,4.4,23.3,3.5z"/>
        </svg>
        タイトル
    </div>
    <p>メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-007 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #ffb36b;
    border-radius: 5px;
    color: #333333;
}

.box-007 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #ffb36b;
    font-weight: 600;
    vertical-align: top;
}

.box-007 svg {
    padding-right: 4px;
}

.box-007 p {
    margin: 0;
    padding: 0 1.5em 1em;
}
ブログで使えるボックスのチェックアイコン(大)バージョン

チェックアイコン(大)

step1
デザインを調整する
タイトル

チェックアイコン付きの大きいボックス。章末にまとめとして使うのがおすすめです。

step2
HTMLをコピペする
HTML
<div class="box-009">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="23" height="23">
            <path fill="#86d67c"
                  d="M8.2,20.6l-7.8-7.8c-0.5-0.5-0.5-1.2,0-1.7L2,9.4c0.5-0.5,1.2-0.5,1.7,0L9,14.7L20.3,3.4c0.5-0.5,1.2-0.5,1.7,0l1.7,1.7  c0.5,0.5,0.5,1.2,0,1.7L9.8,20.6C9.4,21.1,8.6,21.1,8.2,20.6L8.2,20.6z"/>
        </svg>
        タイトル
    </div>
    <p>チェックアイコン付きの大きいボックス。章末にまとめとして使うのがおすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-009 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #86d67c;
    border-radius: 5px;
    color: #333333;
}

.box-009 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #86d67c;
    font-weight: 600;
    vertical-align: top;
}

.box-009 svg {
    padding-right: 4px;
}

.box-009 p {
    margin: 0;
    padding: 0 1.5em 1em;
}
ブログで使えるボックスの注意アイコン(大)バージョン

注意アイコン(大)

step1
デザインを調整する
タイトル

注意アイコン付きの大きいボックス。赤系の色にするのがおすすめです。

step2
HTMLをコピペする
HTML
<div class="box-005">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
            <path fill="#f06060"
                  d="M12,1.5c.7,0,1.3,.4,1.6,.9l10.1,17.3c.3,.6,.3,1.3,0,1.9s-1,.9-1.6,.9H1.9c-.7,0-1.3-.4-1.6-.9s-.3-1.3,0-1.9L10.4,2.4c.3-.6,1-.9,1.6-.9Zm0,6c-.6,0-1.1,.5-1.1,1.1v5.3c0,.6,.5,1.1,1.1,1.1s1.1-.5,1.1-1.1v-5.3c0-.6-.5-1.1-1.1-1.1Zm1.5,10.5c0-.8-.7-1.5-1.5-1.5s-1.5,.7-1.5,1.5,.7,1.5,1.5,1.5,1.5-.7,1.5-1.5Z"/>
        </svg>
        タイトル
    </div>
    <p>注意アイコン付きの大きいボックス。赤系の色にするのがおすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-005 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 svg {
    padding-right: 4px;
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

シンプルなボックス

シンプルなボックスの交差する枠線バージョン

交差する枠線

step1
デザインを調整する
枠線を交差させたボックス。はみ出す線は縦横で同じ長さになるようにしていますが、こちらはお好みで調整してください。
step2
HTMLをコピペする
HTML
<div class="box-018">
    枠線を交差させたボックス。はみ出す線は縦横で同じ長さになるようにしていますが、こちらはお好みで調整してください。
</div>
step3
CSSをコピペする
CSS
.box-018 {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 1em calc(1.5em + 9px);
    border-top: 1px solid #2589d0;
    border-bottom: 1px solid #2589d0;
    color: #333;
}

.box-018::before,
.box-018::after {
    position: absolute;
    width: 1px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #2589d0;
    content: '';
}

.box-018::before {
    left: 9px;
}

.box-018::after {
    right: 9px;
}
シンプルなボックスの番号付きバージョン

番号付き

step1
デザインを調整する
  • 番号の形状
左上に番号を添えたボックス。ステップに沿って何かを説明・補足したい時におすすめのデザインです。

左上に番号を添えたボックス。表示する番号はHTMLタグの属性で指定することができます。

step2
HTMLをコピペする
HTML
<div class="box-021" data-number="1">
    左上に番号を添えたボックス。ステップに沿って何かを説明・補足したい時におすすめのデザインです。
</div>
step3
CSSをコピペする
CSS
.box-021 {
    position: relative;
    max-width: 400px;
    margin: 1em auto;
    padding: 1em 1.5em;
    border: 2px solid #2589d0;
    border-radius: 3px;
    color: #333;
}

.box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    content: attr(data-number);
}
シンプルなボックスの枠外にタイトルバージョン

枠外にタイトル

step1
デザインを調整する
タイトル

枠外にタイトルを付けたボックス。タイトルが枠外にあるかつ単色なので、スッキリしたデザインになっています。

step2
HTMLをコピペする
HTML
<div class="box-011">
    <span>タイトル</span>
    <p>枠外にタイトルを付けたボックス。タイトルが枠外にあるかつ単色なので、スッキリしたデザインになっています。</p>
</div>
step3
CSSをコピペする
CSS
.box-011 {
    position: relative;
    max-width: 400px;
    margin: 1.9em auto 0;
    padding: 1em 1.5em;
    border: 2px solid #2589d0;
    border-radius: 3px;
}

.box-011 span {
    position: absolute;
    top: -1.9em;
    left: -2px;
    padding: .2em .8em;
    border-radius: 5px 5px 0 0;
    background-color: #2589d0;
    color: #fff;
}

.box-011 p {
    margin: 0;
    color: #333;
}
シンプルなボックスの枠内にタイトルバージョン

枠内にタイトル

step1
デザインを調整する
タイトル

枠内にタイトルを付けたボックス。単色なのでスッキリしたデザインになっています。タイトル前にアイコンを付けるのもおすすめです。

step2
HTMLをコピペする
HTML
<div class="box-012">
    <span>タイトル</span>
    <p>枠内にタイトルを付けたボックス。単色なのでスッキリしたデザインになっています。タイトル前にアイコンを付けるのもおすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-012 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #2589d0;
    border-radius: 3px;
    overflow: hidden;
}

.box-012 span {
    padding: .4em .8em;
    background-color: #2589d0;
    color: #fff;
}

.box-012 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
}
シンプルなボックスの吹き出し風のタイトルバージョン

吹き出し風のタイトル

step1
デザインを調整する
  • 吹き出しの形状
タイトル

吹き出し風のタイトルを付けたボックス。角丸にすることで、よりポップで可愛らしい印象を与えることができます。

step2
HTMLをコピペする
HTML
<div class="box-019">
    <div>タイトル</div>
    <p>吹き出し風のタイトルを付けたボックス。角丸にすることで、よりポップで可愛らしい印象を与えることができます。</p>
</div>
step3
CSSをコピペする
CSS
.box-019 {
    position: relative;
    margin-top: 1em;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #2589d0;
}

.box-019 > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 1.4em;
    border-radius: 25px;
    background-color: #2589d0;
    color: #fff;
    font-size: .9em;
}

.box-019 > div::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #2589d0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.box-019 p {
    margin: 0;
}
シンプルなボックスの上部中心にタイトルバージョン

上部中心にタイトル

step1
デザインを調整する
タイトル

枠内の上中心にタイトルを付けたボックス。タイトルをより目立たせたい場合や文字数が長くなる場合におすすめです。

step2
HTMLをコピペする
HTML
<div class="box-013">
    <span>タイトル</span>
    <p>枠内の上中心にタイトルを付けたボックス。タイトルをより目立たせたい場合や文字数が長くなる場合におすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-013 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #2589d0;
    border-radius: 3px;
}

.box-013 span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

.box-013 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
}
シンプルなボックスの見出し風のタイトル付きバージョン

見出し風のタイトル付き

step1
デザインを調整する
  • シャドウ
タイトル

見出し風にタイトルを付けたボックス。上枠線とタイトルの色は、サイトのテーマカラーなどに統一するのがおすすめです。

step2
HTMLをコピペする
HTML
<div class="box-017">
    <div>タイトル</div>
    <p>見出し風にタイトルを付けたボックス。上枠線とタイトルの色は、サイトのテーマカラーなどに統一するのがおすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-017 {
    max-width: 400px;
    margin: 0 auto;
    padding: .5em 1.5em 1em;
    border-top: 5px solid #2589d0;
    border-radius: 3px;
    background-color: #f2f2f2;
}

.box-017 > div {
    margin-bottom: .5em;
    color: #2589d0;
    font-weight: 600;
    font-size: 1.05em;
}

.box-017 > p {
    margin: 0;
    color: #333;
}
シンプルなボックスの引用風バージョン

引用風

step1
デザインを調整する
  • シャドウ
引用ブロックのように左線を付けたボックス。どんなサイトとも合う、余白落ち着きのある可愛らしいデザインが特徴です。
step2
HTMLをコピペする
HTML
<div class="box-016">
    引用ブロックのように左線を付けたボックス。どんなサイトとも合う、余白落ち着きのある可愛らしいデザインが特徴です。
</div>
step3
CSSをコピペする
CSS
.box-016 {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
    color: #333;
}

その他のボックス

その他のボックスのチェック柄バージョン

チェック柄

step1
デザインを調整する
  • 枠線
チェック柄のボックス。可愛い系のサイトはもちろんのこと、基調色を落ち着いた色にすることで意外とどんなサイトともマッチします。
step2
HTMLをコピペする
HTML
<div class="box-014">チェック柄のボックス。可愛い系のサイトはもちろんのこと、基調色を落ち着いた色にすることで意外とどんなサイトともマッチします。</div>
step3
CSSをコピペする
CSS
.box-014 {
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    border: 2px solid #5ba9f7;
    border-radius: 3px;
    background-image: linear-gradient(45deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent), linear-gradient(-45deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent);
    background-color: #5ba9f70d;
    background-size: 20px 20px;
}
その他のボックスのめくられた紙風バージョン

めくられた紙風

step1
デザインを調整する
紙をめくったように見えるボックス。背景だけのシンプルさにワンポイントの可愛さを加えたデザインとなっています。
step2
HTMLをコピペする
HTML
<div class="box-020">
    紙をめくったように見えるボックス。背景だけのシンプルさにワンポイントの可愛さを加えたデザインとなっています。
</div>
step3
CSSをコピペする
CSS
.box-020 {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    background-color: #e0efff;
    color: #333;
}

.box-020::after {
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: #c0cfdf #fff;
    box-shadow: -1px 1px 1px rgb(0 0 0 / 5%);
    content: '';
}
その他のボックスのテープで貼られてる風バージョン

テープで貼られてる風

step1
デザインを調整する
タイトル

タイトルをテープ風にしたボックス。立体的にすることで、可愛らしさがありながらかなり目立つデザインになっています。

step2
HTMLをコピペする
HTML
<div class="box-010">
    <span>タイトル</span>
    <p>タイトルをテープ風にしたボックス。立体的にすることで、可愛らしさがありながらかなり目立つデザインになっています。</p>
</div>
step3
CSSをコピペする
CSS
.box-010 {
    position: relative;
    max-width: 400px;
    margin: 1.5em auto;
    padding: 2.5em 1.5em 1.5em;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #e0efff;
    color: #333333;
}

.box-010 span {
    position: absolute;
    top: -15px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: .5em 2em;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: rgb(255 255 255 / 40%);
    font-weight: 600;
}

.box-010 p {
    margin: 0;
}
その他のボックスのクリップ風バージョン

クリップ風

step1
デザインを調整する
右上にクリップ風の装飾をしたボックス。ボックス・クリップ両方に影を付けることで、よりリアリティを出しています。
step2
HTMLをコピペする
HTML
<div class="box-015">
    右上にクリップ風の装飾をしたボックス。ボックス・クリップ両方に影を付けることで、よりリアリティを出しています。
</div>
step3
CSSをコピペする
CSS
.box-015 {
    position: relative;
    max-width: 400px;
    margin: 1em auto;
    padding: 1em 2.5em 1em 1.5em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #e0efff;
    color: #333333;
}

.box-015::before,
.box-015::after {
    position: absolute;
    content: '';
}

.box-015::before {
    top: -15px;
    right: 10px;
    height: 50px;
    width: 15px;
    border: 3px solid #999;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
    transform: rotate(10deg);
}

.box-015::after {
    top: 0;
    width: 10px;
    right: 20px;
    border: solid 5px #e0efff;
}
その他のボックスのウィンドウ風バージョン

ウィンドウ風

step1
デザインを調整する

ウィンドウ風のボックス。Webサイトのキャプチャやソースコードなどを囲むのにおすすめです。

step2
HTMLをコピペする
HTML
<div  class="box-001">
    <svg class="window-bar" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ウインドウのボタン">
        <circle cx="25" cy="12" r="5.5" fill="#f48384"/>
        <circle cx="45" cy="12" r="5.5" fill="#fbd172"/>
        <circle cx="65" cy="12" r="5.5" fill="#82c880"/>
    </svg>
    <p>ウィンドウ風のボックス。Webサイトのキャプチャやソースコードなどを囲むのにおすすめです。</p>
</div>
step3
CSSをコピペする
CSS
.box-001 {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: calc(1em + 25px) 1.5em 1em;
    border: 2px solid #e6edf3;
    border-radius: 5px;
    overflow: auto;
}

.box-001 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: #e6edf3;
}

.box-001 p {
    margin: 0;
    padding: 0;
}
その他のボックスの方眼紙風バージョン

方眼紙風

step1
デザインを調整する
背景を方眼紙風にしたボックス。かわいい系のサイトと相性が良く、背景が白以外の箇所で利用するとより効果的です。
デモページ
step2
HTMLをコピペする
HTML
<div class="box-003">背景を方眼紙風にしたボックス。かわいい系のサイトと相性が良く、背景が白以外の箇所で利用するとより効果的です。</div>
step3
CSSをコピペする
CSS
.box-003 {
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
    background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
    background-size: 15px 15px;
    background-repeat: repeat;
    background-color: #ffffff;
    color: #333333;
}