レスポンシブサイトのコーディング@6月10日 - webサイトデザインAI入門科授業用ブログ

f:id:yachin29:20200110115012p:plain

カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味がある。

作成したワイヤーを元にカンプを作ってみましょう。
f:id:yachin29:20200910003416j:plain

ドミナントカラー

ドミナントとは「支配」するという意味です。色相を統一した多色配色をドミナントカラー配色といいます。
色相は同一色相で、トーンは自由に選択できる配色です。ただし必ず同一色相にしなければならないわけではなく、色相に統一感がある場合は隣接・類似色相から選択しても構いません。色と色との明度差を小さくすることでより統一感が生まれ、色によるイメージの支配を強く図ることができます。

f:id:yachin29:20190930214255j:plain

今回使用するカラーは
ベースカラー（body、nav）
メインカラー(header、col)
サブカラー（footer）
アクセントカラー１(content1)
アクセントカラー２(content2)
アクセントカラー３(content3)

使用する画像

content部分：1400x940以上　3枚

col部分：612x360以上　3枚

ある程度慣れてきたら最近のトレンドでもある、ブロークングリッドレイアウトのカンプなどを作ってみましょう
f:id:yachin29:20200916105926j:plain

monomode.co.jp

mogumogu-design.com

note.com

https://yachin29.github.io/0406/

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>Furniture-store</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<header>
<h1>Furniture-store</h1>
</header>
<input type="checkbox" id="check">
<label for="check" class="ham-btn">
  <p class="bar"></p>
</label>
<nav id="g-nav">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<div class="container">
<div class="main">
<div class="content">
<div class="txt-box">
<h2>LOREM IPSU</h2>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit aut corporis provident veritatis. Molestias voluptate, voluptates ut ipsum facere excepturi expedita porro impedit cupiditate aut sit dolores odio tempora autem?</p>
<p class="btn"><a href="#">Read more</a></p>
</div><!-- /.txt-box -->
<div class="photo-box">
<img src="img/main01.jpg" alt="">
</div><!-- /.photo-box -->
</div><!-- /.content -->
<div class="content">
<div class="txt-box">
<h2>LOREM IPSU</h2>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit aut corporis provident veritatis. Molestias voluptate, voluptates ut ipsum facere excepturi expedita porro impedit cupiditate aut sit dolores odio tempora autem?</p>
<p class="btn"><a href="#">Read more</a></p>
</div><!-- /.txt-box -->
<div class="photo-box">
<img src="img/main02.jpg" alt="">
</div><!-- /.photo-box -->
</div><!-- /.content -->
<div class="content">
<div class="txt-box">
<h2>LOREM IPSU</h2>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit aut corporis provident veritatis. Molestias voluptate, voluptates ut ipsum facere excepturi expedita porro impedit cupiditate aut sit dolores odio tempora autem?</p>
<p class="btn"><a href="#">Read more</a></p>
</div><!-- /.txt-box -->
<div class="photo-box">
<img src="img/main03.jpg" alt="">
</div><!-- /.photo-box -->
</div><!-- /.content -->
</div><!-- /.main -->
<div class="col-1">
<h2>LOREM IPSUM DOLOR SI</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Quo facere iste molestias temporesimilique architecto
<br> vel reprehenderit veniam! Iste ea amet dolore nulla<br> omnis facere iure culpa consectetur! A, nobis?</p>
</div><!-- /.col-1 -->

<div class="col-3">
<div class="col-3_box">
<div class="col-3_photo">
<img src="img/col-3_1.jpg" alt="">
</div><!-- /.col-3_photo -->
<div class="col-3_txt">
<h3>LOREM IPSU</h3>
<p class="icon"><img src="img/icon01.svg" alt=""></p>
<p class="col-3_btn"><a href="#">About</a></p>
</div><!-- /.col-3_txt -->
</div><!-- /.col-3_box -->

<div class="col-3_box">
<div class="col-3_photo">
<img src="img/col-3_2.jpg" alt="">
</div>
<div class="col-3_txt">
<h3>LOREM IPSU</h3>
<p class="icon"><img src="img/icon02.svg" alt=""></p>
<p class="col-3_btn"><a href="#">About</a></p>
</div>
</div><!-- /.col-3_box -->

<div class="col-3_box">
<div class="col-3_photo">
<img src="img/col-3_3.jpg" alt="">
</div>
<div class="col-3_txt">
<h3>LOREM IPSU</h3>
<p class="icon"><img src="img/icon03.svg" alt=""></p>
<p class="col-3_btn"><a href="#">About</a></p>
</div>
</div><!-- /.col-3_box -->
</div><!-- /.col-3 -->

<footer>
<p><small>&copy; 2021 Furniture-store</small></p>
</footer>
</div><!-- /.container -->
</body>
</html>

style.css

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
img{
max-width: 100%;
}

/* pcレイアウト */
header{
width: 100%;
height: 100px;
background-color: #c4d6d2;
}
h1{
text-align: center;
line-height: 100px;
}
#g-nav{
width: 100%;
height: 50px;
background-color: #7d7d7d;
position: sticky;/* 指定した位置に来たら固定(fixed)になる */
top: 0;
left: 0;
}
#g-nav>ul{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
#g-nav li{
margin: 0 24px;
}
#g-nav a{
color:#FFF;
padding: 5px 8px;
}
#g-nav a:hover{
text-decoration-line: underline;
text-decoration-thickness: 4px;/* 下線の線幅 */
text-underline-offset: 4px;/* 下線と文字の間隔 */
text-decoration-color:darksalmon;/* 下線の色 */
}


.container{
max-width: 1366px;
margin: 0 auto;
padding: 10px;
}
.content{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.content:nth-of-type(odd){
flex-direction: row-reverse;
}
.txt-box{
width: calc(33.33% - 5px);
background-color: #e1e1e1;
text-align: center;
padding:100px 50px 0;
}
.txt-box>h2{
margin-bottom: 50px;
}
.txt{
line-height: 2;
}
.btn{
width: 200px;
height: 50px;
margin: 50px auto 0;
background-color: #FFF;
transition: 0.2s;
}
.btn:hover{
/* transform: translate(10px,0);右に10px移動 */
box-shadow: 0 0 20px #AAA;
}
.btn>a{
display: block;
line-height: 50px;
color:#222;
background: url(../img/arrow-right.svg)no-repeat 90% 50%/20px;
}
.photo-box{
width: calc(66.66% - 5px);
}
.photo-box>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.col-1{
width: 100%;
padding: 150px 0;
background-color: #f4e190;
margin-bottom: 10px;
text-align: center;
}
.col-1>h2{
margin-bottom: 60px;
}
.col-3{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.col-3_box{
width: calc((100% - 20px) / 3);
background-color: #c4ced6;
text-align: center;
}
.col-3_photo{
margin-bottom: 40px;
}
.col-3_box>h3{
font-size: 26px;
}
.icon{
width: 70px;
height: 70px;
margin: 30px auto;
padding: 10px;
background-color: #FFF;
border-radius: 50%;
}
.col-3_btn{
width: 160px;
height: 50px;
background-color: #FFF;
margin:0 auto 50px;
}
.col-3_btn>a{
text-align: center;
display: block;
line-height: 50px;
color: #222;
}
footer{
width: 100%;
height: 200px;
background-color: #d6cec4;
}
footer>p{
text-align: center;
padding-top: 60px;
}


/* -------タブレットレイアウト */
@media (max-width:900px){
.ham-btn{
width: 44px;
height: 44px;
background-color: crimson;
position: fixed;
top: 8px;
right: 10px;
}
.bar{
width: 26px;
height: 2px;
background-color: #000;
position: absolute;
top: -12px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.bar::after{
display: block;
content: "";
width: 26px;
height: 2px;
background-color: #000;
position: absolute;
bottom: -12px;
}

#g-nav{
display: none;/* 非表示 */
}

.txt-box{
padding: 10px;
}
.col-3{
display: block;
}
.col-3_box{
width: 100%;
display: flex;
margin-bottom: 10px;
}
.col-3_photo{
width: 50%;
height: 360px;
margin-bottom: 0;
}
.col-3_photo>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.col-3_txt{
width: 50%;
}

}

/* spレイアウト */
@media (max-width:767px){
body{
font-size: 14px;
}
header{
height: 60px;
}
h1{
font-size: 22px;
line-height: 60px;
text-align: left;
padding-left:10px;
}
.content{
flex-direction: column-reverse;
}
.content:nth-of-type(odd){
flex-direction: column-reverse;
}
.txt-box{
width: 100%;
}
.photo-box{
width: 100%;
height: 340px;
margin-bottom: 10px;
}
.col-3_box{
display: block;
}
.col-3_photo{
width: 100%;
height: 240px;
}
.col-3_txt{
width: 100%;
padding: 20px 0;
}

}