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

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

メニュー部分のレスポンシブ化

f:id:yachin29:20180410204258j:plain



<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おすすめメニュー部分の練習</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/menu2.css">
</head>

<body>
<div class="container">
<div class="menu">
<div class="menu-wrapper">
<h3>おすすめメニュー</h3>
<p class="all"><a href="#">すべてのメニュー</a></p>
</div><!--/.menu-wrapper-->

<div class="food-wrapper">
<div class="menuFood">
<h4>日替わりごはんセット</h4>
<p class="photo"><img src="img/photo1.jpg" alt="#"></p>
<p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p>
</div>


<div class="menuFood top-box">
<h4>週替わりカレー</h4>
<p class="photo"><img src="img/photo2.jpg" alt="#"></p>
<p class="photoText">甘辛たけのこカレー ゆでたまごつき</p>
</div>

<div class="menuFood">
<h4>季節のおやつ</h4>
<p class="photo"><img src="img/photo3.jpg" alt="#"></p>
<p class="photoText">西か東か!さくらもち食べ比べ対決セット</p>
</div>

<div class="menuFood">
<h4>ひとくち晩酌</h4>
<p class="photo"><img src="img/photo4.jpg" alt="#"></p>
<p class="photoText">今だけ!いちごごろごろサングリア</p>
</div>
</div><!--/.food-wrapper-->
</div><!--/.menu-->
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd,header, nav, footer {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a {
  text-decoration:none;
  color:#222;
}

ul {
  list-style:none;
}
img {
  border:0;
  vertical-align:bottom;
}

/*PCレイアウト*/
.container {
  max-width:960px;
  margin:0 auto;
}
/*おすすめメニュー部分*/
.menu {
  background:#FFFFCC;
}
.menu-wrapper {
  overflow:hidden;
  background:#00CC66;
  margin-bottom:40px;
}
.menu-wrapper>h3 {
  font-size:32px;
  padding:30px 0 20px 10px;
  width:300px;
  float:left;
}
.all {
  width:200px;
  height:60px;
  float:right;
  margin:10px 40px 0 0;
}
.all a {
  display:block;
  text-align:center;
  line-height:60px;
  background:#F9C;
}
.all a:hover {
  background:#FCF;
}

.food-wrapper {
  overflow:hidden;
  background:#999999;
}
.menuFood {
  width:220px;
  float:left;
  margin:10px;
  background:#339999;
}
.menuFood>h4 {
  margin-bottom:10px;
}
.menuFood>.photo {
  margin-bottom:10px;
}
.photoText {
  line-height:1.4;
}
@media screen and (max-width:959px){
.food-wrapper {
  width:480px;
  margin:0 auto;
}
.top-box {
  margin-bottom:50px;
}
}
@media screen and (max-width:767px){
.menu-wrapper>h3 {
  font-size:32px;
  padding:30px 0 20px 10px;
  width:300px;
  float:none;
  margin:0 auto 10px;
  text-align:center;
  background:#F96;
}
.all {
  width:200px;
  height:60px;
  float:none;
  margin:0 auto;
}
.food-wrapper {
  width:96%;
  margin:0 auto;
}
.menuFood {
  width:46%;
  float:left;
  margin:2%;
  background:#339999;
}
.menuFood img {
  max-width:100%;/*フルードイメージ化*/
}
.top-box {
  margin-bottom:70px;
}
}