プロのWEBデザイナーが使う「シンプル囲み罫・囲み枠・ボックス！」コピペサンプル集

更新日 : 2022/11/03

シンプルボックス

シンプル実線ボックス

吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

[コードを開く]

<div class="sampleBox4">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox4{
    color: #7e7e7e;
    line-height: 1.7;
    padding: 1em;
    background:#fcebeb;
    border: 1px solid #ef9e9e;
    position: relative;
    margin: 1em auto;
    width: 80%;
}

シンプル実線ボックス2

[コードを開く]

<div class="sampleBox6">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox6{
    color: #333333;
    line-height: 1.7;
    padding: 1em;
    border: 3px solid #ef9e9e;
    position: relative;
    margin: 3em auto 1em;
    width: 80%;
}

シンプル実線ボックス3

[コードを開く]

<div class="sampleBox9">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox9{
    color: #000;
    background:#aedcea;
    box-shadow: 0 0 0 6px #aedcea;
    line-height: 1.7;
    padding: 1em;
    border: 2px solid #fff;
    position: relative;
    margin: 3em auto 1em;
    width: 80%;
}

シンプル破線ボックス

[コードを開く]

<div class="sampleBox5">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox5{
    color: #333333;
    line-height: 1.7;
    padding: 1.5em;
    border: 1px dashed #ff6600;
    position: relative;
    margin: 3em auto 1em;
    width: 80%;
}

シンプル破線ボックス2

[コードを開く]

<div class="sampleBox7">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox7{
    color: #333333;
    background:#fcebeb;
    line-height: 1.7;
    padding: 1.5em;
    border: 1px dashed #dd8484;
    position: relative;
    margin: 3em auto 1em;
    width: 80%;
}

大括弧ボックス

囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。
囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。
囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。

[コードを開く]

<div class="sampleBox8">
囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。
</div>

.sampleBox8{
color: #7e7e7e;
line-height: 1.7;
padding: 1.5em;
position: relative;
margin: 3em auto 1em;
width: 94%;
}

.sampleBox8:before, .sampleBox8:after{
    position: absolute;
    top: 0;
    content:'';
    width: 14px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.sampleBox8:before{
    border-left: solid 2px #4f9f64;
    border-top: solid 2px #4f9f64;
    border-bottom: solid 2px #4f9f64;
    left: 0;
}
.sampleBox8:after{
    border-top: solid 2px #4f9f64;
    border-right: solid 2px #4f9f64;
    border-bottom: solid 2px #4f9f64;
    right: 0;
}

左右二重線ボックス

[コードを開く]

<div class="sampleBox15">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox15{
                                color: #333333;
                                background: #eaeaea;
                                line-height: 1.7;
                                padding: 1.5em;
                                border-left: double 6px #FFAE43;/*左*/
                                border-right: double 6px #FFAE43;/*右*/
                                position: relative;
                                margin: 1em auto;
                                width: 80%;
}

ポストイット風ボックス

[コードを開く]

<div class="sampleBox16">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox16{
                                color: #333333;
        background: #fffbc7;
        line-height: 1.7;
        padding: 1.5em;
        border-left: solid 14px #ffe472;/*左*/
        position: relative;
        margin: 1em auto;
        width: 80%;
}

動画スクール「デジタルハリウッド STUDIO 説明会・受講申込」

デジハリ・オンラインスクール｜通信講座の申込

上ラインボックス

[コードを開く]

<div class="sampleBox17">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox17{
        color: #333333;
        background: #fafafa;
        line-height: 1.7;
        padding: 1.5em;
        border-top: solid 5px #9cd0c2;/*左*/
        position: relative;
        margin: 1em auto;
        width: 80%;
}

吹き出しボックス

[コードを開く]

<div class="sampleBox18">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>


            .sampleBox18 {
        color: #333333;
        background: #fff7cb;
        line-height: 1.7;
        padding: 1.5em;
        position: relative;
        margin: 1em auto;
        width: 80%;
    }
    .sampleBox18:after {
        position: absolute;
        content: '';
        top: 100%;
        left: 30px;
        border: 15px solid transparent;
        border-top: 15px solid #fff7cb;
        width: 0;
        height: 0;
    }

かどまるボックス

シンプルかどまるボックス

[コードを開く]

<div class="sampleBox2">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox2{
    color: #7e7e7e;
    line-height: 1.7;
    padding: 1em;
    border: 4px solid #ef9e9e;
    border-radius: 12px;
    position: relative;
     margin: 2em auto 1em;
    width: 80%;
}

シンプル破線かどまるボックス

[コードを開く]

<div class="sampleBox3">
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleBox3{
    color: #7e7e7e;
    line-height: 1.7;
    padding: 1em;
    border: 1px dashed #3366cc;
    border-radius: 12px;
    position: relative;
    margin: 1em auto;
    width: 80%;
}

見出し付きボックス

かどまる見出し付き

サンプル見出し

[コードを開く]

<div class="sampleMidashiBox">
<div class="sampleMidashi">サンプル見出し</div>
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleMidashiBox{
    color: #7e7e7e;
    line-height: 1.7;
    padding: 1em;
    border: 2px solid #7e7e7e;
    border-radius: 6px;
    position: relative;
    margin: 1em auto;
    width: 80%;
}

.sampleMidashiBox p{
    margin: 0;padding: 0
}

.sampleMidashi{
    color: #585858;
    font-weight: 600;
    background: #fff;
    position: absolute;
    top: -1em;
    left: 1em;
    padding: 0em 0.6em 0em;
    font-size font17px;
}

.sampleMidashi::before{
    font-size font17px;
    font-family: FontAwesome;
    content: "\f00c"" ";
    color: #eaab00;
}

かどまる見出し付き2

サンプル見出し

[コードを開く]

<div class="sampleMidashiBox5">
<div class="sampleMidashi5">サンプル見出し</div>
<p>囲み枠をスタイリッシュにするだけでページの印象ががらりと変わります。</p>
</div>

.sampleMidashiBox5 {
                color: #7e7e7e;
                line-height: 1.7;
                padding: 1em;
                border: 1px solid #6cc1aa;
                border-radius: 3px;
                position: relative;
                margin: 1em auto;
                width: 80%;
            }

            .sampleMidashiBox5 p {
                margin: 0;
                padding: 0
            }

            .sampleMidashi5 {
                color: #fff;
                font-weight: 600;
                background: #6cc1aa;
                border-radius: 3px;
                position: absolute;
                top: -1em;
                left: 1em;
                padding: 0em 0.6em 0em;
                font-size font17px;
            }

            .sampleMidashi5::before {
                font-size font17px;
                font-family: FontAwesome;
                content: "\f00c"" ";
                color: #fff;
            }

シンプル見出し付きボックス

サンプル見出し

[コードを開く]

<div class="sampleMidashiBox2">
            <div class="sampleMidashi2">サンプル見出し</div>
            <p>テキスト</p>
        </div>

  .sampleMidashiBox2 {
                color: #333333;
                line-height: 1.7;
                padding: 1em;
                border: 3px solid #067eca;
                position: relative;
                margin: 4em auto 1em;
                width: 80%;
            }

            .sampleMidashiBox2 p {
                margin: 0;
                padding: 0;
            }

            .sampleMidashi2 {
                color: #fff;
                font-weight: 600;
                background:#067eca;
                position: absolute;
                top: -38px;
                left: -3px;
                padding:4px 0.5em;
                font-size font17px;
            }

シンプル見出し付きボックス2

サンプル見出し

[コードを開く]

<div class="sampleMidashiBox3">
            <div class="sampleMidashi3">サンプル見出し</div>
            <p>テキスト</p>
        </div>

  .sampleMidashiBox3 {
                color: #333333;
                line-height: 1.7;
                padding: 1em;
                border: 3px solid #cc6699;
                position: relative;
                margin: 4em auto 1em;
                width: 80%;
            }

            .sampleMidashiBox3 p {
                margin: 0;
                padding: 0;
            }

            .sampleMidashi3 {
                border-radius: 8px 8px 0px 0px;
                border:solid 1px #cc6699;
                color: #fff;
                font-weight: 600;
                background:#cc6699;
                position: absolute;
                top: -38px;
                left: -4px;
                padding:4px 0.5em;
                font-size font17px;
            }

シンプル見出し付きボックス3

サンプル見出し

[コードを開く]

<div class="sampleMidashiBox4">
            <div class="sampleMidashi4">サンプル見出し</div>
            <p>テキスト</p>
        </div>

  .sampleMidashiBox4 {
                color: #333333;
                line-height: 1.7;
                padding: 2em 1em 1em;
border: 3px solid #43b3bd;
                position: relative;
                margin: 4em auto 1em;
                width: 80%;
            }

            .sampleMidashiBox4 p {
                margin: 0;
                padding: 0;
            }

            .sampleMidashi4 {
                color: #fff;
                font-weight: 600;
                background:#43b3bd;
                position: absolute;
                top: 0px;
                left: 0px;
                padding:0 0.5em;
                font-size font17px;
            }

動画スクール「デジタルハリウッド STUDIO 説明会・受講申込」

デジハリ・オンラインスクール｜通信講座の申込

ブログやホームページの記事作成に便利なレスポンシブ対応の「囲み罫・ボックス」を紹介してみました。

どれもコピペだけで作成できるので大変便利になっていて、
横幅やカラーを適宜変更してカスタマイズも簡単にできます。
お気軽にご使用下さい。

有名ブログ・サイトのレンタルサーバーを調査したら驚愕の結果！現役WEBプロデューサーがおすすめレンタルサーバー紹介

ホームページを始めるんだけど、なにもかも初めてでレンタルサーバーはどこを選んでいいのかわかりません。。。。ブログやホームページを開設する場合、初心者の方は、どこで借りていいのかわからないと思います...

ミミヨリ

https://www.rivfield.com/famous-sites-hosting-service

WEB&DTPデザイナーで就職するには、独学とスクールどっち?

ミミヨリ

https://www.rivfield.com/web-dtp-designer

コメント欄コメントをキャンセル

Author
英

アウトドア歴40年以上

DTP,WEBデザイナー20年以上

社内ネットワーク・システム管理20年以上

印刷,WEB会社勤務約20年以上

デジタルハリウッド修了(東京本校)

某地方自治体美術展デザイン部門無鑑査

九州の田舎で暮らす、アラフィフWEB&DTPデザイナーの「英」です。
平均年収額全国最低の町でも、簡単節約術で可処分所得を増やし文化的に楽しく暮らしています。
そこで得た「節約術」や「WEBやDTPデザインTips」「登山や釣りなどのガジェット・アイテム紹介」等々アウトプットしています。

☆当サイトはリンクフリーです。☆
（公序良俗に反するサイトは一切不可）

Affiliateの利用
当サイトの記事は、一部広告記事としての要素も含み、第三者配信の広告サービス（Amazonアソシエイト・A8.net 他）を利用してサイトを運営しています。
おすすめ記事
本物のデザイナーになるなら「デジハリ」

Author
英

アウトドア歴40年以上

DTP,WEBデザイナー20年以上

社内ネットワーク・システム管理20年以上

印刷,WEB会社勤務約20年以上

デジタルハリウッド修了(東京本校)

某地方自治体美術展デザイン部門無鑑査

九州の田舎で暮らす、アラフィフWEB&DTPデザイナーの「英」です。
平均年収額全国最低の町でも、簡単節約術で可処分所得を増やし文化的に楽しく暮らしています。
そこで得た「節約術」や「WEBやDTPデザインTips」「登山や釣りなどのガジェット・アイテム紹介」等々アウトプットしています。

☆当サイトはリンクフリーです。☆
（公序良俗に反するサイトは一切不可）

Affiliateの利用
当サイトの記事は、一部広告記事としての要素も含み、第三者配信の広告サービス（Amazonアソシエイト・A8.net 他）を利用してサイトを運営しています。
過去の記事
過去の記事

プロのWEBデザイナーが使う「シンプル囲み罫・囲み枠・ボックス！」コピペサンプル集

シンプルボックス

シンプル実線ボックス

シンプル実線ボックス2

シンプル実線ボックス3

シンプル破線ボックス

シンプル破線ボックス2

大括弧ボックス

左右二重線ボックス

ポストイット風ボックス

上ラインボックス

吹き出しボックス

かどまるボックス

シンプルかどまるボックス

シンプル破線かどまるボックス

見出し付きボックス

かどまる見出し付き

かどまる見出し付き2

シンプル見出し付きボックス

シンプル見出し付きボックス2

シンプル見出し付きボックス3

関連・おすすめ記事

コメント欄 コメントをキャンセル

コメント欄コメントをキャンセル