既存サイトのトレース - WEBサイト制作の勉強

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
<li><a href="#">ボタン４</a></li>
</ul>
</nav>
</header>
<div class="container">

<div class="top top-l">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">テキストテキストテキストテキスト</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>

<div class="top top-r">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">テキストテキストテキストテキスト</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="btm btm-l">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">テキストテキストテキストテキスト</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="btm btm-c">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">テキストテキストテキストテキスト</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>

<div class="btm btm-r">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">テキストテキストテキストテキスト</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
color:#222;
}
img {
vertical-align:bottom;
}

/*PCレイアウト*/
body {
display:flex;
}
header {
width:10%;
height:100vh;
position:relative;
background:#9A9A9A;
}
h1 {
width:120px;
height:120px;
position:absolute;
top:20px;
right:0;
left:0;
margin:auto;
background: url(../img/logo.svg) no-repeat center center/cover;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.g-nav {
margin-top:200px;
width:100%;
}
.g-nav li {
width:100%;
height:calc((100vh - 200px) /4);
}
.g-nav li a {
display:block;
text-align:center;
padding-top:100px;
font-size:16px;
padding-bottom:calc((100vh - 200px) / 4 - 116px);
/*calcは演算子の前後にスペースが必要*/
background:#DCDCDC;
box-sizing:border-box;
position:relative;
}
.g-nav li a:before {
display:block;
content:"";
width:60px;
height:60px;
background:url(../img/nav01.svg) no-repeat center center/contain;
position:absolute;
top:-50px;
right:0;
bottom:0;
left:0;
margin:auto;
}
.g-nav li:nth-child(2) a:before {
background:url(../img/nav02.svg) no-repeat center center/contain;
}
.g-nav li:nth-child(3) a:before {
background:url(../img/nav03.svg) no-repeat center center/contain;
}
.g-nav li:nth-child(4) a:before {
background:url(../img/nav04.svg) no-repeat center center/contain;
}
.g-nav li a:hover {
background:#E78284;
}
.container {
width:90%;
display:flex;
flex-wrap:wrap;
overflow:hidden;
}
.top {
width:50%;
height:50vh;
background:#ccc url(../img/L1.png) no-repeat right top/cover;
}
.top.top-r {
background:#ccc url(../img/L2.png) no-repeat right center/cover;
}
.btm {
width:33.33%;
height:50vh;
background:#ccc url(../img/S1.png) no-repeat center top/cover;
}
.btm.btm-c {
background:#ccc url(../img/S2.png) no-repeat center center/cover;
}
.btm.btm-r {
background:#ccc url(../img/S3.png) no-repeat right center/cover;
}

/*ホバーアクション*/
.cap {
width:100%;
height:50vh;
background:rgba(215,59,61,0);
text-align:center;
color:#FFF;
padding-top:120px;
transition:0.2s;
}
.cap:hover {
width:100%;
height:50vh;
background:rgba(215,59,61,1.00);
text-align:center;
color:#FFF;
padding-top:0;
}
h2 {
padding:100px 0 40px;
}
.txt {
margin-bottom:100px;
}

@media (max-width:640px){
/*SPレイアウト*/
body {
display:block;
}
header {
width:100%;
height:60px;
position:fixed;
z-index:9999;
display:flex;
justify-content:space-between;
}
.g-nav {
margin-top:0;
width:80%;
}
.g-nav ul {
display:flex;
}
.g-nav li {
width:25%;
height:60px;
}
.g-nav li a {
padding-top:40px;
font-size:13px;
height:60px;
}
.g-nav li a:before {
width:26px;
height:26px;
top:-20px;
right:0;
bottom:0;
left:0;
margin:auto;
}
.container {
width:100%;
display:block;
position:relative;
padding-top:60px;
}
h1 {
width:50px;
height:50px;
position:static;
margin:5px auto;
background: url(../img/logo.svg) no-repeat center center/cover;
}
.top,.btm {
width:100%;
height:40vh;
margin-bottom:30vh;
position:relative;
}
.cap {
width:100%;
height:30vh;
background:#FFFFFF;
text-align:center;
color:#222;
padding-top:0;
transition:none;
position:absolute;
top:100%;
}
.cap:hover {
width:100%;
height:30vh;
background:#FFFFFF;
text-align:center;
color:#222;
padding-top:0;
transition:none;
position:absolute;
top:100%;
}
h2 {
padding:50px 0 30px;
}
.txt {
margin-bottom:40px;
}
}

icooon-mono.com