index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルファーストで作る家具屋のECサイト</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Furniture-store</h1> <button id="ham-btn"><span></span></button> </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> <nav id="sp-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> <main> <div class="main-contents"> <div class="contents-wrapper"> <div class="main-text"> <h2>Lorem, ipsum dolor.</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae corrupti voluptas veniam.</p> <a class="more" href="#">view more</a> </div><!-- /.main-text --> <div class="main-img"> <img src="img/main-1.webp" alt=""> </div><!-- /.main-img --> </div><!-- /.contents-wrapper --> <div class="contents-wrapper"> <div class="main-text"> <h2>Lorem, ipsum dolor.</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae corrupti voluptas veniam.</p> <a class="more" href="#">view more</a> </div><!-- /.main-text --> <div class="main-img"> <img src="img/main-2.webp" alt=""> </div><!-- /.main-img --> </div><!-- /.contents-wrapper --> <div class="contents-wrapper"> <div class="main-text"> <h2>Lorem, ipsum dolor.</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae corrupti voluptas veniam.</p> <a class="more" href="#">view more</a> </div><!-- /.main-text --> <div class="main-img"> <img src="img/main-3.webp" alt=""> </div><!-- /.main-img --> </div><!-- /.contents-wrapper --> </div><!-- /.main-contents --> <div class="col-1"> <h2>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, soluta quibusdam. Est veritatis facilis omnis, quia unde in fuga consectetur iusto cupiditate eveniet, suscipit tempore? Et inventore a error accusantium?</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.webp" alt=""> </div><!-- /.col-3-img --> <div class="col-3-text"> <h3>Lorem, ipsum.</h3> <p class="icon"><img src="img/icon-1.svg" alt=""></p> <a class="more" href="#">view more</a> </div><!-- /.col-3-text --> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-2.webp" alt=""> </div><!-- /.col-3-img --> <div class="col-3-text"> <h3>Lorem, ipsum.</h3> <p class="icon"><img src="img/icon-2.svg" alt=""></p> <a class="more" href="#">view more</a> </div><!-- /.col-3-text --> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-3.webp" alt=""> </div><!-- /.col-3-img --> <div class="col-3-text"> <h3>Lorem, ipsum.</h3> <p class="icon"><img src="img/icon-3.svg" alt=""></p> <a class="more" href="#">view more</a> </div><!-- /.col-3-text --> </div><!-- /.col-3-box --> </div><!-- /.col-3-wrapper --> </main> <footer> <p><small>© <span id="this-year"></span> Furniture-store</small></p> </footer> </body> </html>
style.css
//パーシャルファイルを呼び出す @use "reset"; //_reset.scssの省略形 //変数の登録 $color_1:#e3e3c9;//headerとcol-1 $color_2:#bfdae6;//navとfooter $color_3:#bfc4e6;//main-text1とcol-3-text1 $color_4:#bfe6e2;//main-text2とcol-3-text2 $color_5:#c6e6bf;//main-text3とcol-3-text3 $text_color:#555; $font_en: "Ubuntu", sans-serif; $point_1:500px; $point_2:800px; //関数の登録 @mixin sp(){ @media (min-width:$point_1){ @content(); } } @mixin pc(){ @media (min-width:$point_2){ @content(); } } //font-sizeの指定 @function rem($px){ @return ($px / 16) * 1rem; } body{ font-family: $font_en; color: $text_color; } //spファースト //header部分 header{ width: 100%; height: 60px; background-color: $color_1; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; position: fixed; z-index: calc(infinity); >h1{ font-size: 28px; } } //ハンバーガーボタン #ham-btn{ display: block; width: 40px; height: 40px; background-color: #FFF; position: relative; >span{ display: block; width: 24px; height: 3px; background-color: $text_color; position: absolute; inset: 0; margin: auto; &::before{ display: block; content: ""; width: 24px; height: 3px; background-color: $text_color; position: absolute; top: -8px; transition: 0.2s; } &::after{ display: block; content: ""; width: 24px; height: 3px; background-color: $text_color; position: absolute; top: 8px; transition: 0.2s; } } &.is-active>span{ background-color: transparent; &::before{ top: 0; rotate: 45deg; } &::after{ top: 0; rotate: 135deg; } } } //pc用ナビゲーション #g-nav{ display: none; } //sp用ナビゲーション #sp-nav{ display: none; } //共通ボタン .more{ display: block; width: 70%; margin: 10px auto; background-color: #FFF; color: $text_color; padding: 10px 20px; position: relative; &::after{ display: block; content: ""; width: 10px; height: 10px; border-top: 2px solid $text_color; border-right: 2px solid $text_color; rotate: 45deg; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto; } } main{ padding:70px 10px 0; } //main-contents部分 .contents-wrapper{ display: flex; flex-direction: column-reverse; &:nth-of-type(2)>.main-text{ background-color: $color_4; } &:nth-of-type(3)>.main-text{ background-color: $color_5; } } .main-img{ width: 100%; aspect-ratio: 4/2.6; margin-bottom: 10px; >img{ object-fit: cover; width: 100%; height: 100%; } } .main-text{ background-color: $color_3; text-align: center; padding: 30px 20px; margin-bottom: 10px; >h2{ margin-bottom: 20px; } >P{ line-height: 1.75; margin-bottom: 20px; } } /* col-1部分 */ .col-1{ background-color: $color_1; padding: 20px; text-align: center; margin-bottom: 10px; >h2{ font-size: 20px; margin-bottom: 20px; } >P{ line-height: 1.5; } } //col-3部分 .col-3-box{ margin-bottom: 10px; .col-3-img{ width: 100%; aspect-ratio: 2/1; >img{ object-fit: cover; width: 100%; height: 100%; } } .col-3-text{ background-color: $color_3; text-align: center; padding: 20px; >h3{ font-size: 24px; } >.icon{ width: 70px; aspect-ratio: 1/1; background-color: #FFF; border-radius: 50%; padding: 10px; margin: 20px auto; } } } .col-3-box:nth-of-type(2)>.col-3-text{ background-color: $color_4; } .col-3-box:nth-of-type(3)>.col-3-text{ background-color: $color_5; } footer{ background-color: $color_2; margin: 0 10px 10px; >p{ text-align: center; padding: 20px 0; } }
