WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

11月10日の作業データ（コーポレートサイト：レスポンシブ対応）

2022年10月クラス

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>コーポレートサイトの作成</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&display=swap" rel="stylesheet">

<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>
関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br>
よりスマートなインターネットライフを送るお手伝いを致します。
</p>
</div>
<div class="content-wrapper">
<div class="content-box">
<h3>CONCEPT</h3>
<p class="photo"><img src="img/content-01.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<div class="content-box">
<h3>SERVICE</h3>
<p class="photo"><img src="img/content-02.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<div class="content-box">
<h3>ACCESS</h3>
<p class="photo"><img src="img/content-03.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div><!-- /.content-wrapper -->
<div class="info-wrapper">
<div class="company-info">
<h2>会社情報</h2>
<dl class="info-list">
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd>03-0000-0000</dd>
<dt>従業員</dt>
<dd>1000名</dd>
</dl>
</div><!-- /.company-info -->

<div class="map-outer">
<h2>MAP</h2>
<div class="map-code">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452892496847!2d139.71212651460664!3d35.72756403503821!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1667527713696!5m2!1sja!2sjp"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-code -->
</div><!-- /.map-outer -->
</div><!-- /.info-wrapper -->
</main>

<footer>
<p><small>&copy; Net Smart all rights reserved</small></p>
<ul class="sns">
<li><a href="#"><img src="img/twitter.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram.svg" alt=""></a></li>
<li><a href="#"><img src="img/line.svg" alt=""></a></li>
</ul>
</footer>
</body>
</html>


style.css

@charset "utf-8";

:root{
--main_color:#1c4554;/* 変数の登録 */
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージの設定 */
}
header{
max-width: 960px;
margin: 0 auto;
padding: 20px 0;
}
h1{
font-family: 'Ubuntu', sans-serif;
font-size: 40px;
margin-bottom: 10px;
}
.g-nav{
width: 100%;
height: 50px;
background-color: var(--main_color);
margin-bottom: 50px;
position: sticky;
top: 0;
z-index: 10;
}
.g-nav>ul{
max-width: 960px;
margin: 0 auto;
display: flex;
}
.g-nav li{
width: 25%;
}
.g-nav a{
display: block;
line-height: 50px;
text-align: center;
color: #FFF;
border-right: 1px solid #FFF;
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: #435374;
}
main{
max-width: 960px;
margin: 0 auto 100px;
}
.main-visual{
margin-bottom: 80px;
}
.main-txt{
text-align: center;
margin-bottom: 100px;
}
.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% - 60px) / 3);
}
.content-box>h3{
font-family: 'Ubuntu', sans-serif;
font-size: 26px;
border-left: 20px solid var(--main_color);
border-bottom: 1px solid var(--main_color);
margin-bottom: 16px;
padding: 0 0 6px 24px;
}
.photo{
margin-bottom: 10px;
overflow: hidden;
}
.txt{
line-height: 1.6;
}

.info-wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.info-wrapper h2{
text-align: center;
margin-bottom: 10px;
font-family: 'Ubuntu', sans-serif;
}
.company-info{
width: calc((100% - 30px) / 2);
}
.info-list{
display: flex;
flex-wrap: wrap;
}
.info-list>dt{
width: 30%;
padding: 14px;
border-bottom: 1px solid var(--main_color);
margin-bottom: 10px;
font-weight: bold;
}
.info-list>dd{
width: 70%;
padding: 14px;
border-bottom: 1px solid var(--main_color);
margin-bottom: 10px
}
.map-outer{
width: calc((100% - 30px) / 2);
}
.map-code{
width: 100%;
height: 320px;
}
.g-map{
width: 100%;
height: 100%;
}
footer{
width: 100%;
background-color: var(--main_color);
}
footer>p{
text-align: center;
padding: 20px 0;
color: #FFF;
}
.sns{
display: flex;
max-width: 960px;
margin: 0 auto;
padding-bottom: 30px;

}
.sns>li{
width: 40px;/* ボタンの最小サイズ */
margin-right: 20px;
}

/* ホバーアニメーション */
.photo>img{
transform: scale(1);
transition: 0.2s;
}
.photo>img:hover{
transform: scale(1.1);
}

.sp-on{
display: none;/* 非表示する */
}

/* 960px以下のスタイル */
@media (max-width:960px){
header{
padding:20px;
}

.g-nav li:first-of-type>a{
border-left: 0;
}
.g-nav li:last-of-type>a{
border-right: 0;
}

.content-wrapper,.info-wrapper{
padding: 0 10px;
}
.sns{
justify-content: center;
}
}

/* 767px以下になったら */
@media (max-width:767px){
header{
text-align: center;
}
h1{
font-size: 30px;
}
.g-nav{
position: static;/* positionをリセット */
}
.main-txt{
padding: 0 20px;
}
.sp-on{
display: block;/* 表示する */
}
.content-wrapper{
display: block;
}
.content-box{
width: 100%;
margin-bottom: 70px;
}
.info-wrapper{
display: block;
}
.company-info{
width: 100%;
margin-bottom: 70px;
}
.map-outer{
width: 100%;
}
.map-code{
height: 240px;
}
}