【Webデザインスクール体験談#11】意外と楽しいコーディング！クリエイターズファクトリー（CF）

<div class="car_container"> <header class="car_header"> <img class="logo_image" src="image/O-ie-.png" alt="O-ie- カーショップのロゴ"> <div class="header_content"> <a class="header_About" href="">About</a> <a class="header_Lineup" href="">Lineup</a> </div> </header> <div class="car_mv"> <img class="mv_image" src="image/erik-mclean-ZRns2R5azu0-unsplash.jpg" alt="O-ie- カーショップのメインビジュアル"> </div> <div class="car_content About_content"> <h2 class="car_title">About</h2> <div class="About_inner"> <div class="About_store"> <img class="About_image" src="image/sigmund-zBfBXHCaLmk-unsplash.png" alt="O-ie- カーショップの店内"> </div> <div class="About_explanation"> <h3 class="About_title">O-ie- カーショップ</h3> <p class="About_text"> 当社は中古車・新車の販売、自動車整備、車検、板金塗装、自動車保険など車に関わるサービス全般行っております。近畿地方での納車はもちろんのこと、東北地方や九州・沖縄などの遠方での納車も積極的に行っております。<br>お車でお困りのことは0-ie-カーショップへお任せ下さい。 </p> </div> </div> <div class="car_button"> <a class="button" href="">詳しくはこちら</a> </div> </div> <div class="car_content Lineup_content"> <h2 class="car_title">Lineup</h2> <div class="Lineup_inner"> <div class="Lineup_box"> <img class="Lineup_image" src="image/dhiva-krishna-X16zXcbxU4U-unsplash.jpg" alt="Sports"> <h3 class="Lineup_title">Sports</h3> <p class="Lineup_text">スポーツカーをお探しの方は、こちらのページを御覧ください。</p> </div> <div class="Lineup_box"> <img class="Lineup_image" src="image/dan-gold-N7RiDzfF2iw-unsplash.jpg" alt="Classic"> <h3 class="Lineup_title">Classic</h3> <p class="Lineup_text">クラッシックをお探しの方は、こちらのページを御覧ください。</p> </div> <div class="Lineup_box"> <img class="Lineup_image" src="image/sven-d-a4S6KUuLeoM-unsplash.jpg" alt="Off-road"> <h3 class="Lineup_title">Off-road</h3> <p class="Lineup_text">4WDをお探しの方は、こちらのページを御覧ください。</p> </div> </div> <div class="car_button"> <a class="button" href="">詳しくはこちら</a> </div> </div> <footer class="car_footer"> <p class="footer_text">© 2020 O-ie-</p> </footer>
</div>

/* 共通部分 ここから */
.car_container { max-width: 1360px; font-family: "Source Han Sans", sans-serif; margin: auto; color: #222; background: #fff;
}
.car_content { margin-top: 100px;
}
.car_title { font-size: 32px; font-weight: bold; text-align: center;
}
.car_button { display: flex; justify-content: center; margin-top: 60px;
}
.button { display: inline-block; background: #222; padding: 17px 96.19px; font-size: 16px; font-weight: bold; color: #fff;
}
/* 共通部分 ここまで */
/* ヘッダー ここから */
.car_header { display: flex; justify-content: space-between; align-items: center; margin: 14px 212.32px 5px 183px;
}
.logo_image { max-width: 78px; height: 50px;
}
.header_content { display: flex; align-items: center; font-size: 18px; font-weight: bold;
}
.header_Lineup { margin-left: 50px;
}
/* ヘッダー ここまで */
/* メインビジュアル ここから */
.mv_image { max-width: 100%;
}
/* メインビジュアル ここまで */
/* About ここから */
.About_content { max-width: 984.36px; margin-right: 192.46px; margin-left: 183.18px;
}
.About_inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 50px;
}
.About_store { max-width: 307px;
}
.About_image { max-width: 100%;
}
.About_explanation { max-width: 586.37px;
}
.About_title { font-size: 24px; font-weight: bold;
}
.About_text { margin-top: 30px; font-size: 16px; font-weight: normal; line-height: 170%; letter-spacing: 1%;
}
/* About ここまで */
/* Lineup ここから */
.Lineup_content { max-width: 960.99px; margin-right: 216.01px; margin-left: 183px;
}
.Lineup_inner { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;
}
.Lineup_box { max-width: 307px;
}
.Lineup_image { max-width: 100%;
}
.Lineup_title { font-size: 18px; font-weight: bold; margin-top: 12px;
}
.Lineup_text { font-size: 16px; font-weight: normal; margin: 12px auto;
}
/* Lineup ここまで */
/* ヘッダー ここから */
.car_footer { max-width: 1360px; height: 50px; margin-top: 152px; background: #222; display: flex; justify-content: center; align-items: center;
}
.footer_text { color: #fff; font-size: 16px; font-weight: bold;
}
/* ヘッダー ここまで */

<h2 class="section_title">Service<span>サービス</span></h2>

.section_title { font-size: 32px; font-weight: bold; line-height: 1.6; margin-bottom: 30px;
}
.section_title span { font-size: 16px; font-weight: bold; line-height: 1.6; margin-left: 26px;
}

 <header class="header wrapper"> <h1> <img class="header_logo" src="img/logo.png" alt="koho眼鏡"> </h1> <nav class="header_nav"> <ul> <li><a href="">フレーム</a></li> <li><a href="">レンズ</a></li> <li><a href="">お知らせ</a></li> <li><a href="">お問い合わせ</a></li> </ul> </nav> </header>

.header { display: flex; justify-content: space-between; align-items: center; padding: 14px 0;
}
.header_logo { width: 50%;
}
.header_nav ul { display: flex;
}
.header_nav li { margin-left: 50px;
}