画像+テキスト

このページの基本カラー

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

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

HTML

<div class="common_box01">
 <div class="common_box01_txt_area">
  <p class="common_box01_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 </div>    
 <div class="common_box01_img_area">
  <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
 </div>
</div>

CSS

.common_box01 {
 width: 100%;
 display: flex;
 margin: 0 0 70px;
 gap: 40px 40px;
}
 
.common_box01:last-child {
 margin-bottom: 0;
}
 
.common_box01 .common_box01_txt_area {
 width: 50%;
}
 
.common_box01 .common_box01_txt_area:only-child {
 width: 100%;
}
 
.common_box01 .common_box01_img_area {
 width: 50%;
 box-sizing: border-box;
}
 
@media (max-width : 810px){
 
 .common_box01 {
 flex-direction: column;
 align-items: center;
 text-align: center;
}
  
.common_box01 .common_box01_img_area {
 max-width: inherit;
 width: 100%;
 order: 1;
}
  
.common_box01 .common_box01_txt_area {
 width: 100%; 
 margin: 0;
 order: 2;
} 
 
}

詳細

POINT1

タイトルが入ります。

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

HTML

<div class="common_box03">
 <div class="common_box03_txt_area">
   <div class="common_box03_tit_area">
    <span class="common_box03_point">POINT1</span>
    <h2 class="common_box03_tit">タイトルが入ります。</h2>   
   </div>
   <p class="common_box03_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 </div>
 <div class="common_box03_img_area">
  <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
 </div>    
</div>

CSS

.common_box03 {
 width: 100%;
 display: flex;
 margin: 0 0 70px;
 gap: 40px 40px;
}
 
.common_box03:last-child {
 margin: 0;
}
 
.common_box03 .common_box03_txt_area {
 width: 60%;
}
 
.common_box03 .common_box03_txt_area:only-child {
 width: 100%;
}
 
.common_box03 .common_box03_img_area {
 width: 40%;
 box-sizing: border-box;
}
 
.common_box03_tit_area {
    display: flex;
    margin: 0 0 35px;
    flex-direction: column;
    position: relative;
}
 
.common_box03_point {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 110px;
 padding: 10px 5px;
 font-size: 18px;
 font-size: 1.8rem;
 font-weight: 600;
 line-height: 1;
 color: #fff;
 text-align: center;
 background-color: var(--main-color);
 margin: 0 0 15px;
}
 
.common_box03_tit {
 font-size: 24px;
 letter-spacing: 0.1em;
 font-weight: 400;
 border-bottom: 2px solid #f3f3f3;
 padding-bottom: 8px;
 position: relative;
}
 
.common_box03_tit::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -2px;
 width: 70px;
 height: inherit;
 border-bottom: 2px solid var(--main-color);
}
 
 
@media (max-width : 810px){
  
.common_box03 {
 flex-direction: column;
 align-items: center;
 text-align: center;
}
  
.common_box03 .common_box03_img_area {
 max-width: inherit;
 width: 100%;
 order: 1;
}
  
.common_box03 .common_box03_txt_area {
 width: 100%; 
 margin: 0;
 order: 2;
} 
 
}

詳細