webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブレイアウトの演習

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムレイアウトの復習</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<div class="txt-box">
<h1>Cafe de Felica</h1>
<p>食とアートと音楽が交差する空間</p>
</div><!--/.txt-box-->
<nav>
<ul class="gnav">
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="key-visual">
<p><img src="img/main.jpg" alt="#"></p>
</div><!--/.key-visual-->
<div class="txt-copy">
<h2>Cafe de Felicaは、<br>
食とアートと音楽が交差する空間を創造します。</h2>
<p>シェフ・矢島が提供するのは、スペイン料理に「東京」の
エッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div><!--/.txt-copy-->

<div class="wrapper">
<div class="box">
<a href="#">
<h3>Concept</h3>
<p class="box-photo">
<img src="img/box1.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div><!--/.box-->

<div class="box">
<a href="#">
<h3>Menu</h3>
<p class="box-photo">
<img src="img/box2.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div><!--/.box-->

<div class="box">
<a href="#">
<h3>Access</h3>
<p class="box-photo">
<img src="img/box3.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div><!--/.box-->
</div><!--/.wrapper-->
</div><!--/.main-->

<footer></footer>
</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;
}

header {
  width:100%;
  border-bottom: 4px solid #D0A36C;
  margin-bottom:20px;
  padding-top:10px;
}
.inner {
  max-width:960px;
  margin:0 auto;
  overflow:hidden;
}
.txt-box {
  width:400px;
  float:left;
}
h1 {
  width:270px;
  height:30px; 
  background:url(../img/logo.svg) no-repeat left top/contain;
  margin-bottom:16px;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
.txt-box p {
  margin-bottom:10px;
}
nav {
  width:480px;
  float:right;
  padding-top:10px;
}

.gnav li {
  width:25%;
  height:30px;
  float:left;
}
.gnav li a {
  display:block;
  line-height:30px;
  text-align:center;
}

.main {
  max-width:960px;
  margin: 0 auto 60px;
}
.key-visual {
  margin-bottom:40px;
}
.txt-copy {
  text-align:center;
}
.txt-copy h2 {
  margin-bottom:30px;
  line-height:1.7;
}
.txt-copy p {
  line-height:1.5;
  margin-bottom:30px;
}
.wrapper {
  overflow:hidden;
}
.box {
  width:308px;
  float:left;
  margin-right:18px;
}
.box:last-child {
  margin-right:0;
}
.box h3 {
  border-left:10px solid #996;
  padding-left:10px;
  font-size:24px;
}
.box:nth-child(2) h3 {
  border-left:10px solid #F96;
}
.box:nth-child(3) h3 {
  border-left:10px solid #936;
}
.box-photo {
  margin-bottom:10px;
}
.box-txt {
  line-height:1.6;
}
.box a {
  display:block;
}
.box a:hover {
  opacity:0.8;
}





.box img {
  max-width:100%;
}

footer {
  width:100%;
  height:50px;
  background:#D0A36C;
}

.sp-on {
  display:none;
}

@media screen and (max-width:959px){
.txt-box {
  width:41%;/*400÷960x100=41.6666...*/
}
h1 {
  width:200px;
}
nav {
  width:50%;/*480÷960x100*/
}
.key-visual img {
  max-width:100%;/*フルードイメージ*/
}

.box {
  width:32%;/*308÷960x100*/
  float:left;
  margin-right:2%;
}
.box img {
  max-width:100%;
}
}
@media screen and (max-width:640px){
.txt-box {
  width:100%;
  float:none;
}
nav {
  width:100%;
  float:none;
}
.box {
  width:90%;
  float:none;
  margin:0 auto 40px;
}

.sp-on {
  display:block;
}
}