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>NetSmart</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Net Smart</h1> <p class="tag-line">よりスマートなインターネットライフを</p> </header> <nav class="g-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">SERVICE</a></li> <li><a href="#">ACCESS</a></li> </ul> </nav> <main> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div> <div class="main-txt"> <h2> 必要なものは、<br> ビジネスの価値を届ける<br class="sp-on">デザインの力。 </h2> <p> Net Smartは、ビジネスとユーザーを理解し、<br class="pc-on">関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br class="pc-on">よりスマートなインターネットライフを送るお手伝いを致します。 </p> </div> <div class="content-wrapper"> <div class="content-box"> <h3>CONCEPT</h3> <p class="photo"><img src="img/01.jpg" alt=""></p> <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> </div><!-- /.content-box --> <div class="content-box"> <h3>SERVICE</h3> <p class="photo"><img src="img/02.jpg" alt=""></p> <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> </div><!-- /.content-box --> <div class="content-box"> <h3>ACCESS</h3> <p class="photo"><img src="img/03.jpg" alt=""></p> <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> </div><!-- /.content-box --> </div><!-- /.content-wrapper --> <div class="info-wrapper"> <div class="company-wrapper"> <h3>会社情報</h3> <dl class="company-info"> <dt>会社名</dt> <dd>株式会社Net Smart</dd> <dt>住所</dt> <dd>東京都豊島区南池袋</dd> <dt>電話番号</dt> <dd><a class="tel-num" href="tel:03-0000-0000">03-0000-0000</a></dd> <dt>従業員</dt> <dd>1000名</dd> </dl> </div><!-- /.company-wrapper --> <div class="map-wrapper"> <h3>Map</h3> <div class="map-inner"> <iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9454663323195!2d139.7121211499927!3d35.72755968008629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1663033017491!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- .map-inner --> </div><!-- /.map-wrapper --> </div><!-- /.info-wrapper --> </main> <footer> <ul class="sns"> <li><img src="img/instagram.svg" alt=""></li> <li><img src="img/twitter.svg" alt=""></li> <li><img src="img/line.svg" alt=""></li> </ul> <p><small>© Net Smart all rights reserved</small></p> </footer> </body> </html>
style.css
@charset "utf-8"; *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; color: #222; } img{ vertical-align: bottom; max-width: 100%;/* フルードイメージの設定 */ } /* pcレイアウト */ header{ max-width: 960px; margin: 0 auto; padding: 20px 0; } .g-nav{ width: 100%; height: 50px; background-color: #1c5775; margin-bottom: 50px; } .g-nav>ul{ display: flex; max-width: 960px; margin: 0 auto; } .g-nav li{ width: 25%; } .g-nav a{ color: #FFF; display: block; text-align: center; line-height: 50px; border-left: 1px solid #FFF; } .g-nav a:hover{ background-color: #6b6c75; } .g-nav li:last-of-type>a{ border-right: 1px solid #FFF; } main{ max-width: 960px; margin: 0 auto 100px; } .main-visual{ margin-bottom: 80px; } .main-txt{ text-align: center; margin-bottom: 80px; } .main-txt>h2{ margin-bottom: 30px; } .main-txt>p{ line-height: 2; } .content-wrapper{ display: flex; justify-content: space-between; margin-bottom: 80px; } .content-box{ width: calc((100% - 40px) / 3); } .content-box>h3{ margin-bottom: 10px; border-left: 20px solid #1c5775; padding-left: 16px; } .photo{ margin-bottom: 10px; } .info-wrapper{ display: flex; justify-content: space-between; } .company-wrapper{ width: 48%; } .company-info{ display: flex; flex-wrap: wrap;/* 改行の指定 */ border: 1px solid #555; } .company-info>dt{ width: 30%; background-color: #e0e4e9; padding: 20px; box-sizing: border-box; border-right: 1px solid #555; } .company-info>dd{ width: 70%; padding: 20px; box-sizing: border-box; } .company-info>dt:nth-of-type(n+2),.company-info>dd:nth-of-type(n+2){ border-top: 1px solid #555; } .map-wrapper{ width: 48%; } .map-inner{ height: 300px; } .g-map{ width: 100%; height: 100%; } footer{ width: 100%; padding: 50px 0; background-color: #1c5775; } .sns{ max-width: 960px; margin: 0 auto 40px; display: flex; } .sns>li{ width: 40px; margin-right: 20px; } footer>p{ text-align: center; color: #FFF; } .sp-on{ display: none;/* 改行の無効 */ } .tel-num{ pointer-events: none;/* pc時は電話番号のリンクを無効 */ } @media (max-width:959px){ /* 959px以下の時 */ header{ padding-left: 20px; } .g-nav li:last-of-type>a{ border-right: 0; } .g-nav li:first-of-type>a{ border-right: 0; } main{ padding: 0 10px; } .sns{ justify-content: center; } .sns>li{ margin: 0 10px; } } @media (max-width:767px){ header{ text-align: center; } .g-nav{ height: 100px; } .g-nav>ul{ flex-wrap: wrap; } .g-nav li{ width: 50%; } .g-nav li:nth-of-type(n+3)>a{ border-top: 1px solid #FFF; } .content-wrapper{ display: block; } .content-box{ width: 100%; margin-bottom: 80px; } .info-wrapper{ display: block; } .company-wrapper{ width: 100%; margin-bottom: 80px; } .map-wrapper{ width: 100%; } .map-inner{ height: 260px; } /* 改行の処理 */ .main-txt>p{ text-align: left; } .pc-on{ display: none; } .sp-on{ display: block;/* 改行の有効 */ } .tel-num{ pointer-events: auto;/* sp時は電話番号のリンクを有効 */ } }
