スマートフォンのモック
メモアイコン(小)
チェックアイコン(小)
注意アイコン(小)

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

  • HTML
  • CSS
  • カラー調整対応
  • レスポンシブ対応

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

ブログで使えるボックス

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

メモアイコン(小)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
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;
}
ブログで使えるボックスのチェックアイコン(小)ver

チェックアイコン(小)

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;
}
ブログで使えるボックスの注意アイコン(小)ver

注意アイコン(小)

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;
}
ブログで使えるボックスのメモアイコン(大)ver

メモアイコン(大)

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;
}
ブログで使えるボックスのチェックアイコン(大)ver

チェックアイコン(大)

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;
}
ブログで使えるボックスの注意アイコン(大)ver

注意アイコン(大)

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

可愛いボックス

可愛いボックスのウィンドウ風ver

ウィンドウ風

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

リアルなボックス

リアルなボックスの方眼紙風ver

方眼紙風

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;
}
リアルなボックスのiPhone風ver

iPhone風

step1
デザインを調整する
step2
HTMLをコピペする
HTML
<div  class="box-002">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 25" fill="#3c3c3c">
        <circle cx="22.5" cy="7.5" r="5"/>
        <circle cx="37.5" cy="7.5" r="5"/>
        <circle cx="52.5" cy="7.5" r="5"/>
        <circle cx="67.5" cy="7.5" r="5"/>
    </svg>
    <!-- 囲みたい画像を指定してください -->
    <img src="/html-maker/img/article/html-maker/box/box-002-sample.svg" alt="" loading="lazy" decoding="async"/>
</div>
step3
CSSをコピペする
CSS
.box-002 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 168px;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
    border: 8px solid #303030;
    border-radius: 25px;
    box-sizing: content-box;
    box-shadow: 0 15px 30px -7px rgba(0, 12, 66, .2);
    background: #303030;
}

.box-002::after {
    position: absolute;
    bottom: 5px;
    width: 60px;
    height: 3px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .8);
    content: '';
}

.box-002 svg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 60px;
    height: 15px;
    border-radius: 0 0 15px 15px;
    background-color: #303030;
}

.box-002 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}