作例
PCレイアウト
SPレイアウト
- cssは外部参照で記述すること
- cssに適切なリセットをかける事
- 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する
- flexプロパティを使ってコンテンツを横に並べる
- 画像を自身で用意しトリミングしフルードイメージに設定する
- h1にGoogle Fontsを使用すること
- Google Mapを埋め込みレスポンシブ対応させること
- transformとtranstionを使ってホバーアクションを設定する
- 適切な余白を設定すること。
使用テキスト
Net Smart
よりスマートなインターネットライフを
HOME
CONCEPT
SERVICE
ACCESS
必要なものは、
ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、
関係性を構築するためのストーリーの設計とUXデザインをご提供し、
よりスマートなインターネットライフを送るお手伝いを致します。
CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
会社情報
会社名
株式会社Net Smart
住所
東京都豊島区南池袋
電話番号
03-0000-0000
従業員
1000名
Map
© Net Smart all rights reserved
<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>Net Smart</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを</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>
<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>
<div class="main-copy">
<h2>必要なものは、
ビジネスの価値を届けるデザインの力。</h2>
<p>Net Smartは、ビジネスとユーザーを理解し、
関係性を構築するためのストーリーの設計とUXデザインをご提供し、
よりスマートなインターネットライフを送るお手伝いを致します。</p>
</div>
<div class="contents-wrapper">
<div class="contents">
<h3>CONCEPT</h3>
<p class="photo"><img src="img/photo01.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="contents">
<h3>SERVICE</h3>
<p class="photo"><img src="img/photo02.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="contents">
<h3>ACCESS</h3>
<p class="photo"><img src="img/photo03.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="info-wrapper">
<div class="info-box">
<h2>会社情報</h2>
<dl>
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd><a class="tel" href="tel:0300000000">03-0000-0000</a></dd>
<dt>従業員</dt>
<dd>1000名</dd>
</dl>
</div>
<div class="info-box">
<h2>Map</h2>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0345936169033!2d139.71350231465223!3d35.72536773515872!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6be1f56ec1%3A0x44d0e4b6ea15cb9f!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yW4oiS77yR77yQIOODl-ODquODouODl-ODqeODvOODiOODk-ODqw!5e0!3m2!1sja!2sjp!4v1638842210975!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer>
<p><small>© 2011-2021 Net Smart all rights reserved</small></p>
</footer>
</body>
</html>
style.css
@charset "uft-8";
html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}
*{
box-sizing: border-box;
}
header{
max-width: 960px;
margin: 0 auto;
padding: 20px 0;
}
.g-nav{
width: 100%;
height: 50px;
background-color: #314645;
}
.g-nav>ul{
max-width: 960px;
margin: 0 auto;
display: flex;
}
.g-nav li{
width: 25%;
height: 50px;
}
.g-nav a{
display: block;
color: #FFF;
text-align: center;
line-height: 50px;
border-right: 1px solid #FFF;
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: #6f6f86;
}
.main-visual{
max-width: 960px;
margin: 60px auto;
}
.main-copy{
max-width: 680px;
margin: 0 auto 60px;
text-align: center;
}
.main-copy>h2{
margin-bottom: 30px;
}
.main-copy>p{
line-height: 2;
}
.contents-wrapper{
display: flex;
max-width: 960px;
margin: 0 auto 60px;
justify-content: space-between;
}
.contents{
width: calc((100% - 40px) / 3);
border: 1px solid #444;
padding: 16px;
}
.contents>h3{
border-left: 16px solid #314645;
padding-left: 16px;
margin-bottom: 16px;
}
.photo{
margin-bottom: 16px;
overflow: hidden;
}
.contents img{
transition: 0.2s;
}
.contents:hover img{
transform: scale(1.2);
}
.info-wrapper{
max-width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.info-box{
width: 46%;
}
.info-box>h2{
text-align: center;
margin-bottom: 20px;
}
dl{
display: flex;
flex-wrap: wrap;
}
dt{
width: 30%;
padding: 20px 20px 10px;
border-bottom: 2px solid #314645;
margin-bottom: 20px;
}
dd{
width: 70%;
padding: 20px 20px 10px;
border-bottom: 2px solid #314645;
margin-bottom: 20px;
}
.map-inner{
height: 400px;
}
.g-map{
width: 100%;
height: 100%;
}
.tel{
color: #222;
pointer-events: none;
}
footer{
height: 100px;
background-color: #314645;
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
font-size: 18px;
}
@media (max-width:959px){
}
@media (max-width:640px){
}