4列レイアウト

このページの基本カラー

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

  • タイトルが入ります

    TITLE

  • タイトルが入ります

    TITLE

  • タイトルが入ります

    TITLE

  • タイトルが入ります

    TITLE

  • タイトルが入ります

    TITLE

  • タイトルが入ります

    TITLE

説明・補足

テキストがあるので最終一列
（そもそもテキストが入ってるのに4列だとごちゃごちゃなんですが。。。）

HTML

    
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    • 
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    • 
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    • 
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    • 
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    • 
 
  • 
  
    
   
  
    
  
    
   
    
     
    タイトルが入ります
    
     
    TITLE
    
   
    
  
    
 
    •

CSS

.four_column01 {
 display: flex;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin: 0 0 40px;
}


.four_column01:last-child {
 margin-bottom: 0;
}

.four_column01 > li {
	width: calc((100% - 60px ) / 4);
}

.four_column01_txt_box {
 margin: 15px 0 0;
}

.four_column01_tit_area {
 display: flex;
 flex-direction: column-reverse;
 line-height: 1.3;
}

.four_column01_tit {
 font-size: 18px;
 font-weight: bold;
}

.four_column01_tit+.four_column01_sub_tit {
 font-size: 16px;
 font-weight: bold;
 color: var(--main-color);
}

.four_column01_img_box {
 text-align: center;
}

@media  (max-width : 1060px){


.four_column01 > li {
	width: calc((100% - 40px ) / 3);
}

.four_column01_tit {
 font-size: 16px;
 font-size: 1.6rem;
} 
 
.four_column01_tit+.four_column01_sub_tit {
 font-size: 14px;
 font-size: 1.4rem;
} 
 
}

@media (max-width : 810px){

.four_column01 > li{
	width: calc((100% - 20px ) / 2);
 }
 
}

@media (max-width : 640px){

.four_column01 > li {
 width: 100%;
 max-width: inherit;
 margin: 0;
}

}
詳細

説明・補足

最終2列

HTML

    
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    • 
 
  • 
  
    
   
  
    
 
    •

CSS

.four_column02 {
 display: flex;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin: 0 0 40px;
}


.four_column02:last-child {
 margin-bottom: 0;
}

.four_column02 > * {
	width: calc((100% - 60px ) / 4);
}

.four_column02_img_box {
 text-align: center;
}

@media  (max-width : 1060px){

.four_column02 > * {
	width: calc((100% - 40px ) / 3);
}

}

@media (max-width : 810px){

.four_column02 > * {
	width: calc((100% - 20px ) / 2);
 }
 
}
詳細