【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!

この記事は、HTMLとCSSだけでボックス（div）の色々な用途で使用可能なレイアウトのコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。最後にhtml、css、scssの入ったファイルのダウンロードが可能です。是非活用下さい

使い方

HTMLをbodyの好きな箇所にコピペ
CSSをスタイルシートにコピペ
DLファイルのscssを使用したい場合はこの記事を参考にして下さい

注意点

クラス名は各自で変更するなりして下さい。

デフォルト

divは囲い（BOX）を表すタグです。

HTML

<div>
  divは囲い（BOX）を表すタグです。
</div>

背景インライン

HTML

<div class="div_design001">
  BOXデザイン001
</div>

CSS

/* BOXデザイン001 */
.div_design001 {
  padding: 1rem;
  background: #ddd;
  width: 300px;
  height: 300px;
  display: inline;
}

背景幅固定

HTML

<div class="div_design002">
  <p>BOXデザイン002</p>
</div>

CSS

/* BOXデザイン002 */
.div_design002 {
  background: #ddd;
  width: 300px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.div_design002 p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

箱が横に並ぶ

HTML

<div class="div_design003">
  <div class="div_design003_inner">BOXデザイン003</div>
  <div class="div_design003_inner">BOXデザイン003</div>
  <div class="div_design003_inner">BOXデザイン003</div>
</div>

CSS

/* BOXデザイン003 */
.div_design003 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.div_design003 .div_design003_inner {
  background: #ddd;
  width: 300px;
  height: 100px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.div_design003 .div_design003_inner p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

カード型1

HTML

<div class="div_design004">
    <div class="div_design004_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン004</p>
    </div>
    <div class="div_design004_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン004</p>
    </div>
    <div class="div_design004_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン004</p>
    </div>
</div>

CSS

/* BOXデザイン004 */
.div_design004 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design004 .div_design004_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.div_design004 .div_design004_contents img {
  width: 100%;
  height: auto;
}
.div_design004 .div_design004_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

カード型2

HTML

<div class="div_design005">
    <div class="div_design005_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン005</p>
    </div>
    <div class="div_design005_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン005</p>
    </div>
    <div class="div_design005_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン005</p>
    </div>
</div>

CSS

/* BOXデザイン005 */
.div_design005 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design005 .div_design005_contents {
  background: #ddd;
  width: 330px;
  height: auto;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design005 .div_design005_contents img {
  width: 50%;
  height: auto;
}
.div_design005 .div_design005_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

カード型3

HTML

<div class="div_design006">
    <div class="div_design006_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン006</p>
    </div>
  
    <div class="div_design006_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン006</p>
    </div>
  
    <div class="div_design006_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン006</p>
    </div>
</div>

CSS

/* BOXデザイン006 */
.div_design006 {
  display: inline-block;
}
.div_design006 .div_design006_contents {
  background: #ddd;
  width: 330px;
  height: auto;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design006 .div_design006_contents img {
  width: 50%;
  height: auto;
}
.div_design006 .div_design006_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

交互

HTML

<div class="div_design007">
    <div class="div_design007_inner">
      <div class="div_design007_contents">
        <p>BOXデザイン007</p>
      </div>
    </div>
    
    <div class="div_design007_inner">
      <div class="div_design007_contents">
        <p>BOXデザイン007</p>
      </div>
    </div>
    
    <div class="div_design007_inner">
      <div class="div_design007_contents">
        <p>BOXデザイン007</p>
      </div>
    </div>
</div>

CSS

/* BOXデザイン007 */
.div_design007 {
  display: inline-block;
  width: 900px;
}
.div_design007 .div_design007_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.div_design007 .div_design007_inner:nth-of-type(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.div_design007 .div_design007_inner .div_design007_contents {
  background: #ddd;
  width: 450px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design007 .div_design007_inner .div_design007_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
  width: 100%;
}

交互画像

HTML

<div class="div_design008">
  <div class="div_design008_inner">
    <div class="div_design008_contents">
      <img src="img/300x180.png">
    </div>
  </div>
  
  <div class="div_design008_inner">
    <div class="div_design008_contents">
      <img src="img/300x180.png">
    </div>
  </div>
  
  <div class="div_design008_inner">
    <div class="div_design008_contents">
      <img src="img/300x180.png">
    </div>
  </div>
</div>

CSS

/* BOXデザイン008 */
.div_design008 {
  display: inline-block;
  width: 900px;
}
.div_design008 .div_design008_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.div_design008 .div_design008_inner:nth-of-type(odd) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.div_design008 .div_design008_inner .div_design008_contents {
  background: #ddd;
  width: 450px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design008 .div_design008_inner .div_design008_contents img {
  width: 100%;
  height: 100%;
}

テキストあり交互

HTML

<div class="div_design009">
  <div class="div_design009_inner">
    <div class="div_design009_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン009</p>
    </div>
  </div>
  
  <div class="div_design009_inner">
    <div class="div_design009_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン009</p>
    </div>
  </div>
  
  <div class="div_design009_inner">
    <div class="div_design009_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン009</p>
    </div>
  </div>
</div>

CSS

/* BOXデザイン009 */
.div_design009 {
  display: inline-block;
  width: 900px;
}
.div_design009 .div_design009_inner .div_design009_contents {
  background: #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design009 .div_design009_inner .div_design009_contents img {
  width: 100%;
  height: 100%;
}
.div_design009 .div_design009_inner .div_design009_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
  width: 100%;
  height: auto;
}
.div_design009 .div_design009_inner:nth-of-type(2n-1) .div_design009_contents {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

カード横交互

HTML

<div class="div_design010">
  <div class="div_design010_inner">
    <div class="div_design010_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン010</p>
    </div>
  </div>
  
  <div class="div_design010_inner">
    <div class="div_design010_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン010</p>
    </div>
  </div>
  
  <div class="div_design010_inner">
    <div class="div_design010_contents">
      <img src="img/300x180.png">
      <p>BOXデザイン010</p>
    </div>
  </div>
</div>

CSS

/* BOXデザイン010 */
.div_design010 {
  display: inline-block;
  width: 450px;
}
.div_design010 .div_design010_inner {
  margin: 1rem;
}
.div_design010 .div_design010_inner .div_design010_contents {
  background: #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design010 .div_design010_inner .div_design010_contents img {
  width: 50%;
  height: 100%;
}
.div_design010 .div_design010_inner .div_design010_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
  width: 100%;
  height: auto;
}
.div_design010 .div_design010_inner:nth-of-type(2n) .div_design010_contents {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

BOX影付き

HTML

<div class="div_design011">
  <div class="div_design011_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン011</p>
  </div>
  <div class="div_design011_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン011</p>
  </div>
  <div class="div_design011_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン011</p>
  </div>
</div>

CSS

/* BOXデザイン011 */
.div_design011 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design011 .div_design011_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.div_design011 .div_design011_contents img {
  width: 100%;
  height: auto;
}
.div_design011 .div_design011_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

BOX影付き2

HTML

<div class="div_design012">
  <div class="div_design012_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン012</p>
  </div>
  <div class="div_design012_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン012</p>
  </div>
  <div class="div_design012_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン012</p>
  </div>
</div>

CSS

/* BOXデザイン012 */
.div_design012 {
  display: inline-block;
}
.div_design012 .div_design012_contents {
  background: #ddd;
  width: 330px;
  height: auto;
  -webkit-box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
  margin: 10px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design012 .div_design012_contents img {
  width: 50%;
  height: auto;
}
.div_design012 .div_design012_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

ボバー時背景

HTML

<div class="div_design013">
  <div class="div_design013_inner"><p>BOXデザイン013</p></div>
  <div class="div_design013_inner"><p>BOXデザイン013</p></div>
  <div class="div_design013_inner"><p>BOXデザイン013</p></div>
</div>

CSS

/* BOXデザイン013 */
.div_design013 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.div_design013 .div_design013_inner {
  background: #ddd;
  width: 300px;
  height: 100px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  border: solid #111 1px;
}
.div_design013 .div_design013_inner p {
  font-family: 'Train One', cursive;
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}
.div_design013 .div_design013_inner:hover {
  background: rgba(244, 160, 6, 0.1);
}
.div_design013 .div_design013_inner:hover p {
  font-size: 1.1rem;
}

カードホバーアップ

HTML

<div class="div_design014">
  <div class="div_design014_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン014</p>
  </div>
  <div class="div_design014_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン014</p>
  </div>
  <div class="div_design014_contents">
    <img src="img/300x180.png">
    <p>BOXデザイン014</p>
  </div>
</div>

CSS

/* BOXデザイン014 */
.div_design014 {
  display: inline-block;
}
.div_design014 .div_design014_contents {
  background: #ddd;
  width: 330px;
  height: auto;
  margin: 15px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: pointer;
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
}
.div_design014 .div_design014_contents:hover {
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}
.div_design014 .div_design014_contents img {
  width: 50%;
  height: auto;
}
.div_design014 .div_design014_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}

カードホバー時フワッと上に

HTML

<div class="div_design015">
  <div class="div_design015_contents">
    <div class="div_design015_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン015</p>
  </div>
  <div class="div_design015_contents">
    <div class="div_design015_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン015</p>
  </div>
  <div class="div_design015_contents">
    <div class="div_design015_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン015</p>
  </div>
</div>

CSS

/* BOXデザイン015 */
.div_design015 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design015 .div_design015_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
}
.div_design015 .div_design015_contents .div_design015_img {
  width: 300px;
  height: 180px;
  overflow: hidden;
}
.div_design015 .div_design015_contents .div_design015_img img {
  width: 300px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.div_design015 .div_design015_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}
.div_design015 .div_design015_contents:hover {
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

カード画像のみホバー時フワッと

HTML

<h2>BOXデザイン016</h2>
<span>カード画像のみホバー時フワッと</span>
<div class="div_design016">
  <div class="div_design016_contents">
    <div class="div_design016_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン016</p>
  </div>
  <div class="div_design016_contents">
    <div class="div_design016_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン016</p>
  </div>
  <div class="div_design016_contents">
    <div class="div_design016_img">
      <img src="img/300x180.png">
    </div>
    <p>BOXデザイン016</p>
  </div>
</div>

CSS

/* BOXデザイン016 */
.div_design016 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.div_design016 .div_design016_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
}
.div_design016 .div_design016_contents .div_design016_img {
  width: 300px;
  height: 180px;
  overflow: hidden;
}
.div_design016 .div_design016_contents .div_design016_img img {
  width: 300px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.div_design016 .div_design016_contents p {
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}
.div_design016 .div_design016_contents:hover .div_design016_img img {
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  overflow: hidden;
}

1:2カラム

HTML

<div class="div_design017">
  <div class="div_design017_contents">BOXデザイン017</div>
  <div class="div_design017_contents">BOXデザイン017</div>
  <div class="div_design017_contents">BOXデザイン017</div>
</div>

CSS

/* BOXデザイン017 */
.div_design017 {
  width: 750px;
}
.div_design017 .div_design017_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  float: left;
}
.div_design017 .div_design017_contents:first-child {
  height: 610px;
}
.div_design017 .div_design017_contents:nth-of-type(3n) {
  float: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

1:2:1カラム

HTML

<div class="div_design018">
  <div class="div_design018_inner">
    <div class="div_design018_contents">BOXデザイン018</div>
    <div class="div_design018_contents">BOXデザイン018</div>
    <div class="div_design018_contents">BOXデザイン018</div>
  </div>
  <div class="div_design018_inner">
    <div class="div_design018_contents">BOXデザイン018</div>
  </div>
</div>

CSS

/* BOXデザイン018 */
.div_design018 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.div_design018 .div_design018_inner {
  width: 620px;
}
.div_design018 .div_design018_inner .div_design018_contents {
  background: #ddd;
  width: 300px;
  height: 300px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  float: left;
}
.div_design018 .div_design018_inner .div_design018_contents:first-child {
  height: 610px;
}
.div_design018 .div_design018_inner .div_design018_contents:nth-of-type(3n) {
  float: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

ボバー時背景＋ボーダー

HTML

<div class="div_design019">
  <div class="div_design019_inner"><p>BOXデザイン019</p></div>
  <div class="div_design019_inner"><p>BOXデザイン019</p></div>
  <div class="div_design019_inner"><p>BOXデザイン019</p></div>
</div>

CSS

/* BOXデザイン019 */
.div_design019 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.div_design019 .div_design019_inner {
  background: #ddd;
  width: 308px;
  height: 108px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  border: 3px solid #f4a006;
}
.div_design019 .div_design019_inner p {
  font-family: 'Train One', cursive;
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}
.div_design019 .div_design019_inner:hover {
  background: rgba(244, 160, 6, 0.1);
  border: 7px double #f4a006;
  width: 300px;
  height: 100px;
}
.div_design019 .div_design019_inner:hover p {
  font-size: 1.1rem;
}

ボバー時背景＋点線

HTML

<div class="div_design020">
  <div class="div_design020_inner"><p>BOXデザイン020</p></div>
  <div class="div_design020_inner"><p>BOXデザイン020</p></div>
  <div class="div_design020_inner"><p>BOXデザイン020</p></div>
</div>

CSS

/* BOXデザイン020 */
.div_design020 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.div_design020 .div_design020_inner {
  background: #ddd;
  width: 300px;
  height: 100px;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.div_design020 .div_design020_inner p {
  font-family: 'Train One', cursive;
  font-size: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  display: block;
  text-align: center;
}
.div_design020 .div_design020_inner:hover {
  background: rgba(244, 160, 6, 0.1);
  border: 2px dashed #f4a006;
  width: 296px;
  height: 96px;
}
.div_design020 .div_design020_inner:hover p {
  font-size: 1.1rem;
}

吹き出し

HTML

<div class="div_design021">
  <p>BOXデザイン020</p>
</div>

CSS

/* BOXデザイン021 */
.div_design021 {
  width: 300px;
  position: relative;
  padding: 1rem;
  margin: 3rem 0;
  background: #f4a006;
  color: #fff;
  font-weight: bold;
}
.div_design021 :after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #f4a006;
  width: 0;
  height: 0;
}
.div_design021 p {
  padding: 0;
  margin: 0;
}

テープ風

HTML

<div class="div_design022">
  <p>BOXデザイン022</p>
</div>

CSS

/* BOXデザイン022 */
.div_design022 {
  width: 300px;
  position: relative;
  background: #f4a006;
  -webkit-box-shadow: 0px 0px 0px 5px #f4a006;
          box-shadow: 0px 0px 0px 5px #f4a006;
  border: dashed 2px #fff;
  padding: 1em 1em;
  color: #fff;
}
.div_design022 :after {
  position: absolute;
  content: '';
  right: -7px;
  top: -7px;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #ddd #fff rgba(244, 160, 6, 0.1);
  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
          box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.div_design022 p {
  margin: 0;
  padding: 0;
}

ラベル付き

HTML

<div class="div_design023">
  <div class="div_design023_label">
    <p>BOXデザイン023</p>
  </div>
  <div class="div_design023_contents">
    <p>シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）</p>
  </div>
</div>

CSS

/* BOXデザイン023 */
.div_design023 {
  width: 300px;
}
.div_design023 .div_design023_label {
  color: #fff;
  background-color: #999;
  border: 1px solid #999;
  padding: 0 15px;
  display: inline-block;
}
.div_design023 .div_design023_label p {
  margin: 0;
  padding: 0;
  border: 1px solid #999;
}
.div_design023 .div_design023_contents {
  border: 2px solid #999;
  padding: 0px 15px 0px 15px;
}
.div_design023 .div_design023_contents p {
  margin: 1rem;
}

ラベル付きアイコン付き

HTML

<div class="div_design024">
  <div class="div_design024_label">
    <p>BOXデザイン024</p>
  </div>
  <div class="div_design024_contents">
    <p>シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）</p>
  </div>
</div>

CSS

/* BOXデザイン024 */
.div_design024 {
  width: 300px;
}
.div_design024 .div_design024_label {
  color: #fff;
  background-color: #f4a006;
  border: 1px solid #f4a006;
  padding: 0 15px;
  display: inline-block;
}
.div_design024 .div_design024_label p {
  margin: 0;
  padding: 0;
  border: 1px solid #f4a006;
}
.div_design024 .div_design024_label p::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
  padding: 0 5px;
}
.div_design024 .div_design024_contents {
  border: 2px solid #f4a006;
  padding: 0px 15px 0px 15px;
}
.div_design024 .div_design024_contents p {
  margin: 1rem;
}

ファイルをダウンロードする

以下のリンクから今回紹介したスタイルが書かれた実際のファイルを丸ごとダウンロード出来ます。個人用チートシートや学習用に使用して下さい。

divデザイン集ダウンロード

以上が『【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!』でした。

今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。（全部丸々コピペでいけます。）

デザイン見本まとめ

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

通貨数	338種以上
レバレッジ	最大100倍
現物取引手数料	Maker：0%〜0.1% Taker：0.02%〜0.1%
先物取引手数料	Maker：0%〜0.01% Taker：0.03%〜0.06%
操作性	スマホでも取引・入金できる
口座開設	簡単に口座開設できる
日本語対応	日本語対応あり・JPY利用可
特典	下記から登録で初回ボーナスあり
登録リンク	Bybitへの登録はこちら
招待コード	22295
レビュー記事	レビュー記事はこちら

通貨数	BigBoss：15種以上 CRYPTOS：15種以上
レバレッジ	最大1111倍
スポット手数料	Maker：0.02%〜0.18% Taker：0.05〜0.20%
先物取引手数料	ー
操作性	スマホでも取引・入金できる
口座開設	少し敷居が高い
日本語対応	日本語対応あり
特典	下記から登録で初回ボーナスあり
登録リンク	BigBossへの登録はこちら
招待コード	6690951
レビュー記事	レビュー記事はこちら

通貨数	60種以上
レバレッジ	ー
スポット手数料	Maker：0.04%〜0.20% Taker：0.03%〜0.20%
先物取引手数料	ー
操作性	スマホでも取引・入金できる
口座開設	簡単に口座開設できる
日本語対応	日本語対応あり
特典	下記から登録で初回ボーナスあり
登録リンク	Nexoへの登録はこちら
招待コード	ー
レビュー記事	レビュー記事はこちら

デフォルト

背景インライン

背景幅固定

箱が横に並ぶ

カード型1

カード型2

カード型3

交互

交互画像

テキストあり交互

カード横交互

BOX影付き

BOX影付き2

ボバー時背景

カードホバーアップ

カードホバー時フワッと上に

カード画像のみホバー時フワッと

1:2カラム

1:2:1カラム

ボバー時背景＋ボーダー

ボバー時背景＋点線

吹き出し

テープ風

ラベル付き

ラベル付きアイコン付き

ファイルをダウンロードする

デザイン見本まとめ

暗号資産投資するなら以下