index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Furniture-store</h1> </header> <nav id="g-nav"> <ul> <li><a href="#">Brands</a></li> <li><a href="#">Products</a></li> <li><a href="#">Stores</a></li> <li><a href="#">Catalogs</a></li> <li><a href="#">Styling tips</a></li> <li><a href="#">Partners & Press</a></li> </ul> </nav> <div class="container"> <div class="content-wrapper"> <div class="content-box"> <div class="content-img"> <img src="img/main-01.jpg" alt=""> </div> <div class="content-txt"> <h2>Lorem, ipsum dolor</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium autem minima nobis hic. Quidem!</p> </div> </div><!-- /.content-box --> <div class="content-box"> <div class="content-img"> <img src="img/main-02.jpg" alt=""> </div> <div class="content-txt"> <h2>Lorem, ipsum dolor</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium autem minima nobis hic. Quidem!</p> </div> </div><!-- /.content-box --> <div class="content-box"> <div class="content-img"> <img src="img/main-03.jpg" alt=""> </div> <div class="content-txt"> <h2>Lorem, ipsum dolor</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium autem minima nobis hic. Quidem!</p> </div> </div><!-- /.content-box --> </div><!-- /.content-wrapper --> <div class="col-1"> <h2>lorem10</h2> <p>lorem16</p> </div><!-- /.col-1 --> <div class="col-3-wrapper"> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-1.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor</h2> <p class="icon"><img src="img/icon-1.svg" alt=""></p> </div> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-2.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor</h2> <p class="icon"><img src="img/icon-2.svg" alt=""></p> </div> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-3.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor</h2> <p class="icon"><img src="img/icon-3.svg" alt=""></p> </div> </div><!-- /.col-3-box --> </div><!-- /.col-3-wrapper --> <footer> <p><small>© 2010-2023 Furniture-store All rights reserved</small></p> </footer> </div><!-- /.container --> </body> </html>
style.css
@charset "utf-8"; /* 使用するカラーを登録 */ :root{ --color_1:#e6eec5; --color_2:#c5dbee; --color_3:#eee0c5; } *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; max-width: 100%; } /* pcレイアウト */ header{ width: 100%; height: 100px; background-color: var(--color_1); display: flex; justify-content: center; align-items: center; } #g-nav{ width: 100%; height: 50px; background-color: var(--color_2); } #g-nav>ul{ max-width: 960px; height: 50px; margin: 0 auto; display: flex; justify-content: center; align-items: center; } #g-nav li{ margin: 0 16px; } #g-nav a{ color: #111; padding: 10px 16px; } #g-nav a:hover{ text-decoration: underline 3px #e04c4c; text-underline-offset: 4px; } .container{ padding: 10px; } .content-box{ display: flex; justify-content: space-between; margin-bottom: 10px; } .content-box:nth-of-type(even){ flex-direction: row-reverse; } .content-img{ width: calc((100% - 10px) / 3 * 2); height: 500px; background-color: #e04c4c; } .content-img>img{ object-fit: cover; object-position: center center; width: 100%;/* 必須 */ height: 100%;/* 必須 */ } .content-txt{ width: calc((100% - 10px) / 3); background-color: var(--color_3); }