3列レイアウト

このページの基本カラー

:root {
 --main-color: #133967;
 --sub-color: #C4C4C4;
}

HTML

<ul class="three_column02">
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="three_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
</ul>

CSS

.three_column02 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column02:last-child {
 margin: 0;
}
 
.three_column02 > li {
 width: calc((100% - 60px) / 3)
}
 
@media (max-width : 767px){
 
.three_column02 > li {
 width: calc((100% - 30px) / 2)
}
  
.three_column02_img_box {
 text-align: center;
}
  
}
 
@media (max-width : 640px){
 
.three_column02 > li {
 width: 100%;
}
  
.three_column02_img_box {
 text-align: center;
}
  
}

詳細

タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE

HTML

<ul class="three_column01">
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic02.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic03.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic04.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic05.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="three_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic06.webp" alt="">
  </div>
  <div class="three_column01_txt_box">
   <div class="three_column01_tit_area">
     <h2 class="three_column01_main_tit">タイトルが入ります</h2>
     <p class="three_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
</ul>

CSS

.three_column01 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column01:last-child {
 margin: 0;
}
.three_column01 > li {
 width: calc((100% - 60px) / 3)
}
 
.three_column01_txt_box {
 margin: 15px 0 0;
}
 
.three_column01_tit_area {
 display: flex;
 flex-direction: column-reverse;
 line-height: 1.3;
}
 
.three_column01_main_tit {
 font-size: 20px;
 font-weight: bold;
}
 
.three_column01_sub_tit {
 font-size: 16px;
 font-weight: bold;
 color: var(--main-color);
}
 
@media (max-width : 1060px){
 
.three_column01_main_tit {
 font-size: 18px;
} 
 
.three_column01 > li {
 width: calc((100% - 30px) / 2)
}
  
}
 
@media (max-width : 810px){
 
.three_column01 > li {
 width: 100%;
}
 
.three_column01_main_tit {
 font-size: 18px;
} 
  
.three_column01_img_box {
 text-align: center;
}
  
}

詳細

タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

HTML

<ul class="three_column03">
 <li>
  <div class="three_column03_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
  <div class="three_column03_txt_box">
  <h2 class="three_column03_main_tit">タイトルが入ります</h2>
  <p class="three_column03_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
 </li>
 <li>
  <div class="three_column03_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
  <div class="three_column03_txt_box">
  <h2 class="three_column03_main_tit">タイトルが入ります</h2>
  <p class="three_column03_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
 </li>
 <li>
  <div class="three_column03_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
  <div class="three_column03_txt_box">
  <h2 class="three_column03_main_tit">タイトルが入ります</h2>
  <p class="three_column03_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
 </li>
 <li>
  <div class="three_column03_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
  <div class="three_column03_txt_box">
  <h2 class="three_column03_main_tit">タイトルが入ります</h2>
  <p class="three_column03_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
 </li>
</ul>

CSS

.three_column03 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column03:last-child {
 margin: 0;
}
.three_column03 > li {
 width: calc((100% - 60px) / 3)
}
 
.three_column03_txt_box {
 margin: 15px 0 0;
}
 
.three_column03_main_tit {
 font-size: 20px;
 font-weight: bold;
}
 
@media (max-width : 1060px){
 
 
 
.three_column03 > li {
 width: calc((100% - 30px) / 2)
}
}
 
 
@media  (max-width : 810px){
 
.three_column03 > li {
 width: 100%;
}
  
.three_column03_img_box {
 text-align: center;
}
  
.three_column03_main_tit {
 font-size: 18px;
}  
  
}

詳細

HTML

<ul class="three_column05">
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
</ul>

CSS

.three_column05 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column05:last-child {
 margin: 0;
}
.three_column05 > li {
 width: calc((100% - 60px) / 3)
}
 
.three_column05 > li > a {
 text-decoration: none;
 transition: 0.3s all;
}
 
.three_column05 > li > a img {
 transition: 0.3s all;
}
 
.three_column05_txt_box {
 padding: 10px 0;
 background: var(--main-color);
}
 
.three_column05_main_tit {
 font-size: 18px;
 font-size: 1.8rem;
 text-align: center;
 color: #fff;
}
 
@media (max-width : 1060px){
 
.three_column05 > li {
 width: calc((100% - 30px) / 2)
} 
 
}
 
 
@media  (max-width : 810px){
 
.three_column05 > li {
 width: 100%;
}
  
.three_column05_img_box {
 text-align: center;
}
  
}

詳細

タイトル

テキスト
タイトル

テキスト
タイトル

テキスト
タイトル

テキスト
タイトル

テキスト
タイトル

テキスト

HTML

<ul class="three_column06">
 <li>
   <div class="three_column06_txt_area three_column06_bg01">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
   </div>
 </li>
 <li>
    <div class="three_column06_txt_area three_column06_bg02">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
    </div>
 </li>
 <li>
    <div class="three_column06_txt_area three_column06_bg03">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
    </div>
 </li>
 <li>
   <div class="three_column06_txt_area three_column06_bg04">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
   </div>
 </li>
 <li>
    <div class="three_column06_txt_area three_column06_bg05">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
    </div>
 </li>
 <li>
    <div class="three_column06_txt_area three_column06_bg06">
     <h3 class="three_column06_tit">タイトル</h3>
     <p class="three_column06_txt">テキスト</p>
    </div>
 </li>
</ul>

CSS

.three_column06 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column06:last-child {
 margin: 0;
}
 
 
.three_column06_txt_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 225px;
  padding: 10px;
  box-sizing: border-box;
 position: relative;
}
 
.three_column06_txt_area:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
    background: rgba(0,0,0,0.3);
    z-index: -1;
}
 
.three_column06_tit {
 font-size: 20px;
 font-size: 2.0rem;
 color: #fff;
 text-align: center;
 padding: 0 0 10px;
 margin: 0 0 15px;
 position: relative;
}
 
.three_column06_tit:after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 40px;
 height: 4px;
 background: #fff;
}
 
.three_column06_txt {
 font-size: 16px;
 font-size: 1.6rem;
 text-align: center;
 font-weight: 500;
 display: block;
 position: relative;
 width: 100%;
 color: #fff;
}
 
.three_column06 > li {
 width: calc((100% - 60px) / 3)
}
 
.three_column06_bg01 {
 background: url("../img/common/three_column06_bg01.webp") center/cover no-repeat #ccc;
 z-index: 0;
}
 
.three_column06_bg02 {
 background: url("../img/common/three_column06_bg02.webp") center/cover no-repeat #ccc;
 z-index: 0;
}
 
.three_column06_bg03 {
 background: url("../img/common/three_column06_bg03.webp") center/cover no-repeat #ccc;
 z-index: 0;
}
 
 
 
@media (max-width : 1060px){
 
.three_column06 > li {
 width: 100%;
}
  
}

詳細

S