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

2022/8/252023/2/23

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

ブログで使えるボックス

メモアイコン(小)

背景色：#fff9e5
アイコン色：#ffb36b
文字色：#333333

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

<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>

.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;
}

チェックアイコン(小)

背景色：#ecffe9
アイコン色：#86d67c
文字色：#333333

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

<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>

.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;
}

注意アイコン(小)

背景色：#ffebee
アイコン色：#f06060
文字色：#333333

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

<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>

.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;
}

メモアイコン(大)

基調色：#ffb36b
文字色：#333333

タイトル

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

<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>

.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;
}

チェックアイコン(大)

基調色：#86d67c
文字色：#333333

タイトル

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

<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>

.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;
}

注意アイコン(大)

基調色：#f06060
文字色：#333333

タイトル

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

<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>

.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;
}

シンプルなボックス

交差する枠線

基調色：#2589d0

枠線を交差させたボックス。はみ出す線は縦横で同じ長さになるようにしていますが、こちらはお好みで調整してください。

<div class="box-018">
    枠線を交差させたボックス。はみ出す線は縦横で同じ長さになるようにしていますが、こちらはお好みで調整してください。
</div>

.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;
}

番号付き

基調色：#2589d0
番号の形状円四角

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

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

<div class="box-021" data-number="1">
    左上に番号を添えたボックス。ステップに沿って何かを説明・補足したい時におすすめのデザインです。
</div>

.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);
}

枠外にタイトル

基調色：#2589d0

タイトル

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

<div class="box-011">
    <span>タイトル</span>
    <p>枠外にタイトルを付けたボックス。タイトルが枠外にあるかつ単色なので、スッキリしたデザインになっています。</p>
</div>

.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;
}

枠内にタイトル

基調色：#2589d0

タイトル

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

<div class="box-012">
    <span>タイトル</span>
    <p>枠内にタイトルを付けたボックス。単色なのでスッキリしたデザインになっています。タイトル前にアイコンを付けるのもおすすめです。</p>
</div>

.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;
}

吹き出し風のタイトル

基調色：#2589d0
吹き出しの形状角丸四角

タイトル

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

<div class="box-019">
    <div>タイトル</div>
    <p>吹き出し風のタイトルを付けたボックス。角丸にすることで、よりポップで可愛らしい印象を与えることができます。</p>
</div>

.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;
}

上部中心にタイトル

基調色：#2589d0

タイトル

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

<div class="box-013">
    <span>タイトル</span>
    <p>枠内の上中心にタイトルを付けたボックス。タイトルをより目立たせたい場合や文字数が長くなる場合におすすめです。</p>
</div>

.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;
}

見出し風のタイトル付き

上線の色：#2589d0
背景色：#f2f2f2
シャドウなしあり

タイトル

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

<div class="box-017">
    <div>タイトル</div>
    <p>見出し風にタイトルを付けたボックス。上枠線とタイトルの色は、サイトのテーマカラーなどに統一するのがおすすめです。</p>
</div>

.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;
}

引用風

左線の色：#2589d0
背景色：#f2f2f2
シャドウなしあり

引用ブロックのように左線を付けたボックス。どんなサイトとも合う、余白落ち着きのある可愛らしいデザインが特徴です。

<div class="box-016">
    引用ブロックのように左線を付けたボックス。どんなサイトとも合う、余白落ち着きのある可愛らしいデザインが特徴です。
</div>

.box-016 {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
    color: #333;
}

その他のボックス

チェック柄

基調色：#5ba9f7
枠線ありなし

チェック柄のボックス。可愛い系のサイトはもちろんのこと、基調色を落ち着いた色にすることで意外とどんなサイトともマッチします。

<div class="box-014">チェック柄のボックス。可愛い系のサイトはもちろんのこと、基調色を落ち着いた色にすることで意外とどんなサイトともマッチします。</div>

.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;
}

めくられた紙風

背景色：#e0efff

紙をめくったように見えるボックス。背景だけのシンプルさにワンポイントの可愛さを加えたデザインとなっています。

<div class="box-020">
    紙をめくったように見えるボックス。背景だけのシンプルさにワンポイントの可愛さを加えたデザインとなっています。
</div>

.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: '';
}

テープで貼られてる風

背景色：#e0efff
文字色：#333333

タイトル

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

<div class="box-010">
    <span>タイトル</span>
    <p>タイトルをテープ風にしたボックス。立体的にすることで、可愛らしさがありながらかなり目立つデザインになっています。</p>
</div>

.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;
}

クリップ風

背景色：#e0efff
文字色：#333333

右上にクリップ風の装飾をしたボックス。ボックス・クリップ両方に影を付けることで、よりリアリティを出しています。

<div class="box-015">
    右上にクリップ風の装飾をしたボックス。ボックス・クリップ両方に影を付けることで、よりリアリティを出しています。
</div>

.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;
}

ウィンドウ風

バーの色：#e6edf3

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

<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>

.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;
}

方眼紙風

文字色：#333333

背景を方眼紙風にしたボックス。かわいい系のサイトと相性が良く、背景が白以外の箇所で利用するとより効果的です。

デモページ

<div class="box-003">背景を方眼紙風にしたボックス。かわいい系のサイトと相性が良く、背景が白以外の箇所で利用するとより効果的です。</div>

.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;
}