モバイルファーストでのコーディング

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>北欧家具のECサイトをモバイルファーストでトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<div class="header-inner">
<h1><img src="img/logo.svg" alt="ロゴ"></h1>
<p class="burgur" id="btn"><span></span></p>
</div>
<nav>
</nav>
</header>

<div class="container">
<div class="main">
<div class="inner">
<div class="photo one"></div>
<div class="txt one"></div>
</div>
<div class="inner reverse">
<div class="photo two"></div>
<div class="txt two"></div>
</div>
<div class="inner">
<div class="photo three"></div>
<div class="txt three"></div>
</div>
<div class="inner reverse">
<div class="photo four"></div>
<div class="txt four"></div>
</div>
</div><!--/.main-->
<div class="one-col"></div>

<div class="three-col">
<div class="three-col-1">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-2">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-3">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
</div><!--/.three-col-->
<footer></footer>
</div><!--/.container-->
</body>
</html>

スタイルシート

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

:root {
  --bg_color: #f0ede7;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*モバイルレイアウト*/
body {
  background:var(--bg_color);
}
header {
  height:55px;
  background:#e4dfd6;
  margin-bottom:10px;
  padding:5px;
}
.header-inner {
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
}
h1 {
  width:150px;
  margin-right:10px;
}
.burgur {
  width:60px;
  height:45px;
  background:#EB6062;
  position:relative;
}
.burgur span {
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:0;
  right:0;
  bottom:10px;
  left:0;
  margin:auto;
}
.burgur span:after {
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:20px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
.container {
  max-width:1366px;
  margin:0 auto;
}
.photo {
  height:30vh;
  background: url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  height:60vh;
  background:#c87f63;
  margin-bottom:10px;
}
.txt.two {
  background:#e1cfb9;
}
.txt.three {
  background:#dbdbdb;
}
.txt.four {
  background:#FFFFFF;
}
.one-col {
  height:80vh;
  background:#c7a96e;
  margin-bottom:10px;
}
.three-col-photo {
  height:25vh;
  background:url(../img/3col-01.jpg) no-repeat center center/cover;
}
.three-col-2>.three-col-photo {
  background:url(../img/3col-02.jpg) no-repeat center center/cover;
}
.three-col-3>.three-col-photo {
  background:url(../img/3col-03.jpg) no-repeat center center/cover;
}
.three-col-txt {
  height:50vh;
  background:#e4dfd6;
  margin-bottom:10px;
}
footer {
  height:80vh;
  background:#bed5db;
}

@media screen and (min-width:768px){
header {
  height:150px;
}
.container{
  padding:0 10px 10px 10px;
}
.inner {
  display:flex;
  flex-wrap: wrap;
}
.photo {
  width:calc(66.66% - 5px);
  height:80vh;
  margin:0 10px 0 0;
  background:url(../img/aw18.png) no-repeat 20px 20px, url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  width:calc(33.33% - 5px);
  height:80vh;
}
.inner.reverse {
  flex-direction:row-reverse;
}
.inner.reverse .photo {
  margin:0 0 0 10px;
}

.three-col-1,.three-col-2,.three-col-3 {
  display:flex;
}
.three-col-photo {
  width:50%;
  height:60vh;
}
.three-col-txt {
  width:50%;
  height:60vh;
}
}
@media screen and (min-width:901px){
.three-col {
  display:flex;
}
.three-col-1,.three-col-2,.three-col-3 {
  width:calc((100% - 20px) / 3);
  flex-direction:column;
}
.three-col-1,.three-col-2 {
  margin-right:10px;
}
.three-col-photo {
  width:100%;
  height:40vh;
}
.three-col-txt {
  width:100%;
  height:60vh;
}
}

WEBサイト制作の勉強

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

モバイルファーストでのコーディング