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

Programming
2020.05.02

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

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

使い方
  1. HTMLをbodyの好きな箇所にコピペ
  2. CSSをスタイルシートにコピペ
  3. DLファイルのscssを使用したい場合はこの記事を参考にして下さい
注意点
  • クラス名は各自で変更するなりして下さい。

デフォルト

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

背景インライン

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

背景幅固定

<div class="div_design002">
  <p>BOXデザイン002</p>
</div>
/* 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;
}

箱が横に並ぶ

<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>
/* 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

<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>
/* 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

<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>
/* 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

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

交互

<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>
/* 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%;
}

交互画像

<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>
/* 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%;
}

テキストあり交互

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

カード横交互

<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>
/* 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影付き

<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>
/* 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

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

ボバー時背景

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

カードホバーアップ

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

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

<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>
/* 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);
}

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

<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>
/* 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カラム

<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>
/* 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カラム

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

ボバー時背景＋ボーダー

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

ボバー時背景＋点線

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

吹き出し

<div class="div_design021">
  <p>BOXデザイン020</p>
</div>
/* 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;
}

テープ風

<div class="div_design022">
  <p>BOXデザイン022</p>
</div>
/* 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;
}

ラベル付き

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

ラベル付きアイコン付き

<div class="div_design024">
  <div class="div_design024_label">
    <p>BOXデザイン024</p>
  </div>
  <div class="div_design024_contents">
    <p>シンプルなラベル付きボックスです。（ここにコンテンツが入ります。）</p>
  </div>
</div>
/* 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制作などに適当に使って下さい。（全部丸々コピペでいけます。）

デザイン見本まとめ

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

CSSでグラデーションを作成する方法【コピペで使える】
今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指定の仕方や値に関してを詳しく書いていきます。また最後にはコピペ用の見本デザインも用意していますので良かったら参考にして下さい。
kt-life.net
2020.03.17
コピペで出来る見出しデザイン15選：CSSをそのまま使用可能
この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し（h1,h2など）のデザインをいくつか紹介します。ブログやHPで使って下さい。
kt-life.net
2020.02.16
【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!
この記事は、HTMLとCSSだけでボックス（div）の色々な用途で使用可能なレイアウトのコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。
kt-life.net
2020.05.02
【コピペOK】お洒落な引用デザイン10選！！
今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。
kt-life.net
2020.09.09
【コピペ可】ワードプレスの表(テーブル)デザイン5選！！
この記事では、HTMLとCSSだけで色々な用途で使用可能な表（table）のおしゃれなコーティングデザインをいくつか紹介します。ブログやHPで一覧表や料金表などをまとめる時にでも使って下さい。
kt-life.net
2020.03.01
【コピペ可】おしゃれなリスト(箇条書き)デザイン30選！！ファイルあり
この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。
kt-life.net
2020.02.11
【CSS】ボタンのデザイン10選：丸ごとコピペ超簡単！！
この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログやHPでお問い合わせボタンや詳細ボタンなどのCTAに使って下さい。
kt-life.net
2020.03.22
【コピペOK】CSSで画像をおしゃれに！全6パターン！!
この記事では、CSSで画像に様々のスタイルを付けて、いくつかおしゃれなデザインを紹介します。画像を目立たせたい場合や他の画像とデザインで差別化する際などに使ってみて下さい。
kt-life.net
2020.07.08
この記事を書いた人
KEITO
KEITO

AI × IT × WEB3｜関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
CSSHTMLReference
この記事を共有する
KEITO
KT LIFE
タイトルとURLをコピーしました