【コピペでOK】おしゃれなボックスデザイン15選：CSSデザイン

Coding

今回はコピペで出来るおしゃれなボックスデザインを15パターン紹介します。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。

使い方

  1. HTMLをbodyの好きな箇所にコピペ
  2. CSSをスタイルシートにコピペ

注意点

一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass="この部分“を任意のものにすれば解決します。

シンプルなボックスデザイン

まずは基本的なボックスの記述です。これを基本型として次からのデザインを作成してきます。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn00">
  <div class="wakusenn00-contents">
    <p>まずは基本的なボックスの記述です。これを基本型として次からのデザインを作成してきます。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn00 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn00-contents{
  border:1px solid #006edc; /*枠線の色*/
  padding:0px 15px 0px 15px /*枠線の中の空白*/
}

枠線2本

枠線を2本にしたバージョンです。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn01">
  <div class="wakusenn01-contents">
    <p>枠線を2本にしたバージョンです。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn01 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn01-contents{
  border:5px double #00dc63; /*枠線の色*/
  padding:0px 15px 0px 15px /*枠線の中の空白*/
}

角を丸く

角を丸くします。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn02">
  <div class="wakusenn02-contents">
    <p>角を丸くします。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn02 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn02-contents{
  border:3px solid #006edc; /*枠線の色*/
  border-radius:10px; /*枠線の丸み*/
  padding:0px 15px 0px 15px /*枠線の中の空白*/
}

背景色

背景色を追加します。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn03">
  <div class="wakusenn03-contents">
    <p>背景色を追加します。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn03 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn03-contents{
  border:3px solid #00dc63; /*枠線の色*/
  border-radius:10px; /*枠線の丸み*/
  padding:0px 15px 0px 15px; /*枠線の中の空白*/
  background: rgba(0, 220, 99, .2);
}

上下にボーダー線

上下にボーダー線を追加します。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn04">
  <div class="wakusenn04-contents">
    <p>上下にボーダー線を追加します。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn04 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn04-contents{
  border-top:3px solid #222; /*枠線の色*/
  border-bottom:3px solid #222; /*枠線の色*/
  padding:0px 15px 0px 15px; /*枠線の中の空白*/
  background: #eee;
}

左右にボーダー線

左右にボーダー線を追加します。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn05">
  <div class="wakusenn05-contents">
    <p>左右にボーダー線を追加します。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn05 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn05-contents{
  border-left:3px solid #222; /*枠線の色*/
  border-right:3px solid #222; /*枠線の色*/
  padding:15px 15px 15px 15px; /*枠線の中の空白*/
  background: #eee;
}

枠線を点線に

枠線を点線に変更します。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn06">
  <div class="wakusenn06-contents">
    <p>枠線を点線に変更します。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn06 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px /*枠線の下の空白*/
}

.wakusenn06-contents{
  border:2px dashed #006edc; /*枠線の色*/
  padding:15px 15px 15px 15px; /*枠線の中の空白*/
}

影を付ける

影を付けます。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn07">
  <div class="wakusenn07-contents">
    <p>影を付けます。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn07 {
  margin-top:10px; /*枠線の上の空白*/
  margin-bottom:30px; /*枠線の下の空白*/
  box-shadow: 2px 2px 4px #777;
}

.wakusenn07-contents{
  border:2px solid #ddd; /*枠線の色*/
  padding:15px 15px 15px 15px; /*枠線の中の空白*/
}

立体的

背景色を追加します。（ここにコンテンツ内容が入ります。）

HTML

<div class="wakusenn08">
  <div class="wakusenn08-contents">
    <p>背景色を追加します。（ここにコンテンツ内容が入ります。）</p>
  </div>
</div>

CSS

.wakusenn08 {
  margin-top: 10px;
  margin-bottom: 30px;
  border-radius: 9px;
}

.wakusenn08-contents{
  border:solid 1px rgba(0, 220, 99, .2);
  padding:0px 15px 0px 15px; /*枠線の中の空白*/
  background: rgba(0, 220, 99, .2);
  border-radius: 9px;
  border-bottom: solid 6px rgba(0, 220, 99, .4);
  box-shadow: 0px 3px 6px rgba(0, 220, 99, .4);
}

おしゃれなボックスデザイン

色合いやレイアウトなどのデザインを少し凝ったおしゃれなデザインを紹介します。
基本全てコピペでOKです。好きな色に変更して使って下さい。

吹き出し風

よく見る吹き出し風のボックスデザインです。（ここにコンテンツ内容が入ります。）

HTML

<div class="hukidasi01">
    <p>よく見る吹き出し風のボックスデザインです。（ここにコンテンツ内容が入ります。）</p>
</div>

CSS

.hukidasi01 {
    position: relative;
    padding: 1em 1em;
    margin: 2em 0;
    background: rgba(44, 255, 107, .3);
    color: #333;
    font-weight: bold;
}
.hukidasi01:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid rgba(44, 255, 107, .3);
    width: 0;
    height: 0;
}
.hukidasi01 p {
    margin: 0; 
    padding: 0;
}

テープ風

よく見るペタッとテープが貼られていて少し剥がれている感じ。（ここにコンテンツ内容が入ります。）

HTML

<div class="tepuhuu">
    <p>よく見るペタッとテープが貼られていて少し剥がれている感じ。（ここにコンテンツ内容が入ります。）</p>
</div>

CSS

.tepuhuu{
    position: relative;
    background: rgba(0, 110, 220, .2);
    box-shadow: 0px 0px 0px 5px rgba(0, 110, 220, .2);
    border: dashed 2px white;
    padding: 1em 1em;
    color: #454545;
}
.tepuhuu:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: rgba(0, 110, 220, .2) #fff rgba(0, 110, 220, .2);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.tepuhuu p {
    margin: 0; 
    padding: 0;
}

カラフル

グラデーションをかけてカラフルなデザインにしてます。（ここにコンテンツ内容が入ります。）

HTML

<div class="karahuru_box">
 <p>グラデーションをかけてカラフルなデザインにしてます。</p>
</div>

CSS

.karahuru_box {
  position: relative;
  padding: 1em 1em;
  background: linear-gradient( 135deg, rgba(67, 203, 255, .3) 10%, rgba(151, 8, 204, .3) 100%) no-repeat;
  font-weight: bold;
  color: #333;
}

.karahuru_box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, rgba(255, 219, 44, .9), rgb(44, 255, 107, .3) 20%, rgba(255, 77, 64, 0) 50%) no-repeat;  
}

ラベル付き

ボックスの角にラベルを付けたデザイン達です。汎用性の高いデザインなので是非参考にして下さい。

シンプルなラベル

ここにタイトル

シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）

HTML

<div class="labelbox">
    <div class="labelbox-title">
      <span>ここにタイトル</span>
    </div>
    <div class="labelbox-content">
      <p></p>
      <p>シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）</p>
    </div>
  </div>

CSS

.labelbox{
    margin-top:10px;
    margin-bottom:30px;
}

.labelbox-title{
    color:#fff;
    background-color:#808080;
    border:1px solid #808080;
    padding:3px 15px;
    display:inline-block;
}

.labelbox-content{
    border:2px solid #808080;
    padding:0px 15px 0px 15px;
}

アイコン付き/背景色

ここにタイトル

シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）

HTML

<div class="labelbox2">
    <div class="labelbox2-title">
      <span class="labelbox2-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 2 28 28">
          <path d="M16 21.484v-2.969c0-0.281-0.219-0.516-0.5-0.516h-3c-0.281 0-0.5 0.234-0.5 0.516v2.969c0 0.281 0.219 0.516 0.5 0.516h3c0.281 0 0.5-0.234 0.5-0.516zM15.969 15.641l0.281-7.172c0-0.094-0.047-0.219-0.156-0.297-0.094-0.078-0.234-0.172-0.375-0.172h-3.437c-0.141 0-0.281 0.094-0.375 0.172-0.109 0.078-0.156 0.234-0.156 0.328l0.266 7.141c0 0.203 0.234 0.359 0.531 0.359h2.891c0.281 0 0.516-0.156 0.531-0.359zM15.75 1.047l12 22c0.344 0.609 0.328 1.359-0.031 1.969s-1.016 0.984-1.719 0.984h-24c-0.703 0-1.359-0.375-1.719-0.984s-0.375-1.359-0.031-1.969l12-22c0.344-0.641 1.016-1.047 1.75-1.047s1.406 0.406 1.75 1.047z" fill="#fff"></path>
        </svg>
      </span>
      <span>ここにタイトル</span>
    </div>
    <div class="labelbox2-content">
      <p></p>
      <p>シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）</p>
    </div>
  </div>

CSS

.labelbox2{
    margin-top:10px;
    margin-bottom:30px;
}
.labelbox2-title{
    color:#fff;
    background-color:#dc143c;
    border:1px solid #dc143c;
    padding:3px 15px;
}

.labelbox2-content{
    background-color:rgba(255, 255, 0, .2);
    border:2px solid #dc143c;
    padding:0px 15px 0px 15px;
}

自己紹介ボックス

ここにタイトル

自己紹介文風ラベル付きボックス。
ここに自己紹介文を記述して下さい。

・テキスト
・テキスト
・テキスト
・テキスト

HTML

<div class="profile_box">
  <div class="pfbox-cont">
    <div class="pfbox-wrap">
      <div class="pfbox-title-wrap">
        <span class="pfbox-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 2 20 28">
            <path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z" fill="#fff"></path>
          </svg>
        </span>
        <span class="pfbox-title">ここにタイトル</span>
      </div>
      <div class="pfbox-main">
        <figure>
          <img src="https://kt-life.net/wp-content/uploads/2020/06/kekeilifemin.jpg" style="border-radius:80%"/>
        </figure>
        <div class="pfbox-text-wrap">
          <p class="pfbox-text">自己紹介文風ラベル付きボックス。 
            <br>ここに自己紹介文を記述して下さい。 
            <br>
            <br>・テキスト 
            <br>・テキスト 
            <br>・テキスト 
            <br>・テキスト 
          </p>
        </div>
      </div>
    </div>
    <div style="clear:both"></div>
  </div>
</div>

CSS

.profile_box {
    margin-top:10px;
    margin-bottom:30px;
}

.pfbox-cont {
    border:4px double #999;
    border-radius:4px;
    padding: 20px 0px 10px 10px;
}

.pfbox-title-wrap {
    margin:-20px 0 0 -10px;
    padding:3px 12px;
    color:#fff;
    background-color:#333;
    border-radius:0 0 4px 0;
}

.pfbox-main {
    padding: 10px 0 0 0;
    display: flex;
}

.pfbox-main figure {
    float:left;
    max-width:20%;
}

.pfbox-text-wrap {
    flex:1;
    margin: 0px 20px 0px;
}

.pfbox-text{
    margin:0;
}

以上が「【コピペでOK】おしゃれなボックスデザイン15選：CSSデザイン」でした。

今後もいろんなデザインを追加していきたいと思います。

Udemyなら一早く一流のエンジニアになれます。
約10万の中から選べる完全買い切り型のオンライン教材だから無駄なく学べて、尚且つ非常に分かりやすく効率的です。
普段のネットショッピングの様にカートに入れてレジに進む。たったこれだけで一流への一歩を歩めます。

▶︎　世界最大級のオンライン学習サイトUdemy

デザイン見本まとめ

他のデザイン見本もいくつか用意しています。合わせてどうぞ。

今すぐ使えるCSSレシピブック
created by Rinker

2020年5月2日CodingCSS,HTML,Reference

Posted by KT