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

Coding

この記事は、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制作などに適当に使って下さい。（全部丸々コピペでいけます。）

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

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

デザイン見本まとめ

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

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

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2020年5月2日CodingCSS,HTML,Reference

Posted by KT