こんにちは、Webデザイナーのmanaです！

HTMLとCSSを使っておしゃれなボックスデザインを作成しました。自分の備忘録も兼ねて記事にまとめています。今後、デザインは随時更新予定です。

コピペで簡単に使用できるので、デザイン初心者の方もぜひ試してみてください！

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

ベーシックでアレンジのしやすいデザインです。線の太さや背景色などをWebサイトやブログの雰囲気に合わせて変更できます。汎用性が高く、さまざまなシーンで活用可能なデザインです。

紙がめくれたようなデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box1">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box1 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
}
  .simple-box1::before {
  content: '';
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -3px;
  width: 50px;
  background-color: #fff;
  aspect-ratio: 1;
}
  .simple-box1::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: -3px;
  bottom: -3px;
  width: 50px;
  background-color: #141414;
  aspect-ratio: 1;
  --border-width: 3px;
  clip-path: polygon(0 0,100% 0,0 100%,0 0,var(--border-width) var(--border-width),var(--border-width) calc(100% - var(--border-width)/tan(22.5deg)),calc(100% - var(--border-width)/tan(22.5deg)) var(--border-width),var(--border-width) var(--border-width));
}

背景をずらした立体的なデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box2">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box2 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
}
.simple-box2::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 5px;
  top: 5px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  background-color: #fff74c;
}

影がストライプのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box3">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box3 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
  background-color: #fff;
}
.simple-box3::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 5px;
  top: 5px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  background-image: repeating-linear-gradient(-45deg, #fff74c, #fff74c 5px, transparent 5px, transparent 15px);
}

線が二重に見える立体的なデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box4">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box4 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  background-color: #fff;
  border: 3px solid #141414;
}
.simple-box4::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -10px;
  bottom: -10px;
  width: 100%;
  height: 100%;
  border-right: 3px solid #141414;
  border-bottom: 3px solid #141414;
}

折り目があるような立体的なデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box5">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box5 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
}
.simple-box5::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  right: -3px;
  width: 20px;
  background-color: #141414;
  aspect-ratio: 1;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  transform: scaleX(2);
  transform-origin: right;
}
.simple-box5::after {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: -3px;
  width: 20px;
  background-color: #141414;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,100% 100%);
  transform: scaleX(2);
  transform-origin: left;
}

枠が二重になったデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box6">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box6 {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  background-color: #fff74c;
  border: 10px solid #fff;
  outline: 3px solid #141414;
}

一部背景のアクセントのあるデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box7">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box7 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
}
.simple-box7::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: #fff74c;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,0 100%);
}

一部線が欠けて見えるデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box8">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box8 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 3px solid #141414;
}
.simple-box8::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 3px;
  background-color: #fff;
  top: -3px;
  left: -3px;
}
.simple-box8::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 3px;
  background-color: #fff;
  bottom: -3px;
  right: -3px;
}

上下の線が一部欠けたデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box9">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box9 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
}
.simple-box9::before, .simple-box9::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 100%;
  border: 3px solid #141414;
}
.simple-box9::before {
  border-right: 0;
  top: 0;
  left: 0;
}
.simple-box9::after {
  border-left: 0;
  bottom: 0;
  right: 0;
}

シンプルな吹き出しデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box10">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box10 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 20px;
}
.simple-box10::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #FFF;
  z-index: 2;
}
.simple-box10::after {
  position: absolute;
  content: '';
  top: calc(100% + 1px);
  left: 27px;
  border: 18px solid transparent;
  border-top: 18px solid #141414;
  z-index: 1;
}

立体的な角まるデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box11">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box11 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 20px;
}
.simple-box11::after {
  position: absolute;
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
  bottom: -10px;
  left: 0;
  background: #fff74c;
  border-radius: inherit;
  box-shadow: 0 0 0 3px #141414;
}

フォルダのようなデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

  <div class="simple-box12">
    <p>こちらにテキストが入ります。</p>
  </div>
          

.simple-box12 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 20px;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 10px;
  margin-top: 50px;
}
.simple-box12::after {
  content: '';
  position: absolute;
  top: -25px;
  left: -3px;
  width: 100px;
  height: 30px;
  background-color: #fff74c;
  border: 3px solid #141414;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

女性向けWebサイトのボックスデザイン

華奢なラインやソフトな色合いを取り入れたデザインです。美容やファッションなど、女性向けのサイトにぴったりなおしゃれなデザインです。

クロスラインとグラデーションのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box1">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box1 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 30px;
  background-image: linear-gradient(45deg, #bce1c7, #97bfdf);
}
.girly-box1::before, .girly-box1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
.girly-box1::before {
  border-top: 1px solid #fff;
  top: 15px;
  width: 100%;
}
.girly-box1::after {
  border-left: 1px solid #fff;
  left: 15px;
  height: 100%;
}
.girly-box1 p {
  color: #fff;
}

ボーダーとグラデーションのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box2">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box2 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 15px;
  border: 10px solid #fff;
  outline: 1px solid #666;
  background-image: linear-gradient(45deg, #efb1ca, #f6bda0);
}
.girly-box2::before, .girly-box2::after {
  content: '';
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border: 1px solid #666;
}
.girly-box2::before {
  bottom: -22px;
  left: -22px;
}
.girly-box2::after {
  top: -22px;
  right: -22px;
}
.girly-box2 p {
  color: #fff;
}

ダブルボーダーとグラデーションのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box3">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box3 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 20px;
  border: 2px double #fff;
}
.girly-box3::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-image: linear-gradient(45deg, #d3b6d2, #9497cb);
}
.girly-box3 p {
  color: #fff;
}

背景がクロスのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box4">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box4 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border-top: 3px solid #c5ddde;
  border-bottom: 3px solid #c5ddde;
  background: radial-gradient(circle, transparent 20%, #fff 20%, #fff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fff 20%, #fff 80%, transparent 80%, transparent) 20px 20px, linear-gradient(#d6ebec 1.6px, transparent 1.6px) 0 -0.8px, linear-gradient(90deg, #d6ebec 1.6px, #fff 1.6px) -0.8px 0;
background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
}
.girly-box4::before, .girly-box4::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
.girly-box4::before {
  border-top: 1px solid #c5ddde;
  top: -10px
}
.girly-box4::after {
  border-bottom: 1px solid #c5ddde;
  bottom: -10px
}
.girly-box4 p {
  color: #666;
}

上背景がストライプのデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box5">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box5 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 20px;
  background: #ffffffde;
}
.girly-box5::before, .girly-box5::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(100% + 20px);
  height: calc(50% + 10px);
}
.girly-box5::before {
  z-index: -1;
  top: -10px;
  background-image: repeating-linear-gradient(-45deg, #f1d4d9, #f1d4d9 5px, transparent 5px, transparent 10px);
}
.girly-box5::after {
  z-index: -2;
  bottom: -10px;
  background-color: #f1d4d9;
}
.girly-box5 p {
  color: #666;
}

ストライプの背景をずらした立体的なデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box6">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box6 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 1px solid #666;
}
.girly-box6::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10px;
  top: -10px;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(-45deg, #e2f1f1, #e2f1f1 5px, transparent 5px, transparent 10px);
}
.girly-box6 p {
  color: #666;
}

華奢な線の吹き出しデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box7">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box7 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 1px solid #666;
}
.girly-box7::before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -16px;
  left: 45px;
  width: 1px;
  height: 30px;
  background-color: #141414;
  transform: rotate(-30deg);
  outline: 10px solid #fff;
}
.girly-box7 p {
  color: #666;
}

背景に丸のあるデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box8">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box8 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.girly-box8::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: -10%;
  right: -5%;
  width: 200px;
  aspect-ratio: 1;
  background-color: #f9e9ec;
  border-radius: 100vw;
}
.girly-box8::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -5%;
  width: 200px;
  aspect-ratio: 1;
  background-color: #f9e9ec;
  border-radius: 100vw;
}
.girly-box8 p {
  color: #666;
}

背景に手書き風のいびつな丸のあるデザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box9">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box9 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
}
.girly-box9::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(50% - 40px);
  left: calc(50% + 40px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 130px;
  aspect-ratio: 1;
  border-radius: 41% 69% 52% 48% / 59% 52% 55% 41%;
  background-color: #d9ecf6;
}
.girly-box9::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(50% + 40px);
  left: calc(50% - 40px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 120px;
  aspect-ratio: 1;
  border-radius: 41% 59% 62% 38% / 59% 52% 55% 41%;
  background-color: #e2f1f1;
}
.girly-box9 p {
  color: #666;
}

手書き風のいびつな丸デザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="girly-box10">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.girly-box10 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 30px;
}
.girly-box10::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(50% - 5px);
  left: calc(50% + 5px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 41% 59% 62% 38% / 59% 52% 55% 41%;
  border: 1px solid #666;
}
.girly-box10::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 41% 59% 62% 38% / 59% 52% 55% 41%;
  background-color: #fff6ee;
}
.girly-box10 p {
  color: #666;
}

学生向けWebサイトのボックスデザイン

ノートやテープなど、筆記用具をモチーフにしたデザインです。塾や習い事など、学生や子ども向けサイトにおすすめのデザインです。

方眼紙風背景デザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="student-box1">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.student-box1 {
  width: 100%;
  max-width: 330px;
  padding: 25px;
  --background-color: #d6ecf7;
  border: 2px solid #79c4e6;
  background-image: linear-gradient(var(--background-color) 1.4000000000000001px, transparent 1.4000000000000001px), linear-gradient(90deg, var(--background-color) 1.4000000000000001px, transparent 1.4000000000000001px), linear-gradient(var(--background-color) 0.7000000000000001px, transparent 0.7000000000000001px), linear-gradient(90deg, var(--background-color) 0.7000000000000001px, #fff 0.7000000000000001px);
  background-size: 35px 35px, 35px 35px, 7px 7px, 7px 7px;
  background-position: center;
}

ノート風デザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="student-box2">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.student-box2 {
  width: 100%;
  max-width: 330px;
  padding: 0 15px 1px;
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, #79c4e6 1px, transparent 1px);
  background-size: 10px 100%, 100% 2.3em;
  border: 10px solid #fff;
  outline: 2px solid #79c4e6;
}
.student-box2 p {
  margin: 0;
  line-height: 2.3;
}

ルーズリーフ風デザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="student-box3">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.student-box3 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px 25px 25px 50px;
  border: 2px solid #79c4e6;
}
.student-box3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  height: calc(100% - 50px);
  border-left: 15px dotted #79c4e6;
}

テープ風デザイン

こちらにテキストが入ります。テキストテキストテキストテキストテキストテキストテキスト

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

HTMLとCSSはこちら 

    <div class="student-box4">
      <p>こちらにテキストが入ります。</p>
    </div>
            

.student-box4 {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 25px;
  border: 2px solid #79c4e6;
}
.student-box4::after {
  content: '';
  position: absolute;
  top: -15px;
  left: calc(50% - 50px);
  width: 100px;
  height: 30px;
  background-color: #79c4e6;
  background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-5deg);
}

この記事では、HTMLとCSSを使って作成した26種類のおしゃれなボックスデザインをご紹介しました。

初心者でも簡単に使えるシンプルなデザインから、女性向けや学生向けに特化したデザインまで、幅広いニーズに対応するボックスデザインを作成しました。

コードをコピペするだけで簡単に利用可能なので、ぜひ、Webサイトやブログの雰囲気に合わせて活用してみてください。

今後も新しいデザインを随時追加予定なので、ぜひ参考にしてください！

気に入ったらシェアしてね