Flexboxを使ったレイアウト - 実践 - WEB制作の備忘録

店舗サイトをつくる

コンテンツ幅（960px）固定値で設定
レスポンシブWebデザインで作成
デザインは今風に改変
画像は個別に用意

実践

例

f:id:hak00810:20200507162120p:plain
f:id:hak00810:20200507161737p:plain

テキスト

IKEBUKURO
COFFEE池袋珈琲

トップ
メニュー
店舗
こだわり

IKEBUKURO COFFEE

ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。


おすすめメニュー

カフェラテとスイーツ
好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか？

厳選した豆を深煎り
厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。

アイスコーヒー
アイスコーヒー、夏はもちろん冬にもご提供します。深煎りをさらに2倍利用して深みを出しています。


★おいしいコーヒーの特徴と入れ方★

コーヒー豆の種類と特徴

おいしいドリップ珈琲の入れ方入門

トップ
メニュー
店舗
こだわり
お問い合わせ
企業情報
採用情報

(c) 2020 IkebukuroCoffee

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style2.css">
<title>IKEBUKURO COFFEE | 池袋珈琲</title>
</head>

<body>
<div class="container">
<header>
<h1><a href="#">IKEBUKURO<br>
COFFEE<span class="shop_jp">池袋珈琲</span></a></h1>

<nav>
<ul class="nav">
  <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="billboard">
<a href="#"><img src="img/coffeehouse-2600877.jpg" alt="IKEBUKURO COFFEE"></a>
<p class="caption">ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。</p>
</div>

<section class="recommend">
<h2>おすすめメニュー</h2>

<div class="menu">
<a href="#">
<p class="comment"><img src="img/coffee-sweets-4542944.jpg" alt="カフェラテとスイーツ"></p>
<div class="menu_copy">
<h3>カフェラテとスイーツ</h3>
<p>好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか？</p>
</div>
</a>

<a href="#">
<p class="comment"><img src="img/coffee-beans-167001.jpg" alt="厳選した豆を深煎り"></p>
<div class="menu_copy">
<h3>厳選した豆を深煎り</h3>
<p>厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。</p>
</div>
</a>

<a href="#">
<p class="comment"><img src="img/iced-coffee-3908006.jpg" alt="アイスコーヒー"></p>
<div class="menu_copy">
<h3>アイスコーヒー</h3>
<p>アイスコーヒー、夏はもちろん冬にもご提供します。深煎りをさらに2倍利用して深みを出しています。</p>
</div>
</a>
</div>
</section>

<section class="howto">
<h2><span class="browngray">★</span>おいしいコーヒーの特徴と入れ方<span class="browngray">★</span></h2>
<div class="content">
<a href="#">
  <p class="comment"><img src="img/coffee-steel-2595828.jpg" alt="画像1"></p>
  <p class="comment">コーヒー豆の種類と特徴</p>
</a>

<a href="#">
  <p class="comment"><img src="img/coffee-drip-3908007.jpg" alt="画像2"></p>
  <p class="comment">おいしいドリップ珈琲の入れ方入門</p>
</a>
</div>
</section>

</div><!-- .container -->

  
<footer>
<div class="footer">
<nav>
  <ul class="nav">
    <li><a href="#">トップ</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">店舗</a></li>
    <li><a href="#">こだわり</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">企業情報</a></li>
    <li><a href="#">採用情報</a></li>
  </ul>
</nav>

<p class="copyright">&copy; 2020 IkebukuroCoffee</p>
</div>
</footer>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,nav,div,h1,h2,h3,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background: #C6D2D7;
}
/* layout */
.container {
  width: 900px;
  margin: 0 auto;
  background: #FFF;
  padding: 20px 30px 30px;
}

/* header */
header {
  display: flex;
  justify-content: space-between;/* 水平方向 */
  align-items: flex-end;/* 垂直方向 */
  height: 100px;
  margin-bottom: 20px;
}
h1 a {
  display:block;
  font-size: 48px;
  font-family: 'Averia Serif Libre', cursive;
  line-height: .9;
}
.shop_jp {
  font-size: 20px;
  margin-left: 22px;
  color: #795247;
}
.nav {
  display: flex;
  justify-content: flex-end;/* 水平方向 */
}
.nav li a {
  display: block;
  width: 100px;
  text-align: center;
  border-left: 1px solid #2C1E1A;
  line-height: 2.0;
}
.nav li:last-child a {
  border-right: 1px solid #2C1E1A;
}
.nav li a:hover {
  color: #FFF;
  background: #9E817A;
}

/* billborad */
.billboard {
  position: relative;
  margin: 0 0 30px;
}
.caption {
  background: rgba(255,255,255,0.85);
  padding: 15px;
  width: 306px;
  line-height: 1.6;
  position: absolute;
  right: 15px;
  top: 110px;
}

/* recommend */
.recommend h2 {
  border: 1px solid #9E817A;
  border-left: 12px solid #9E817A;
  padding: 8px 10px 8px 12px;
  margin: 0 0 15px;
}
.menu {
  display: flex;
  justify-content: space-between;/* 水平方向 */
}
.menu a {
  flex-basis: calc(98% / 3);
  padding: 20px;
  margin-right: 1.7%;
  margin-bottom: 30px;
  background-color: #EFF2F4;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #E1E6EB), to(#ffffff)),
  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #E1E6EB), to(#ffffff));
  -webkit-background-size: 5px 5px;
}
.menu a:last-child {
  margin-right: 0;
}
.menu h3 {
  color: #795247;
  padding: 10px 0 5px;
  margin-bottom: 8px;
  border-bottom: 1px solid #795247;
}
.menu p {
  line-height: 1.4;
  letter-spacing: -.85px;
}

/* content */
.howto h2 {
  color: #795247;
  font-size: 22px;
  margin-bottom: 10px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.content a {
  width: calc(98% / 2);
  padding: 1.35%;
  border: 1px solid #9E817A;
  margin-right: 1.5%;
}
.content img {
  margin-bottom: 10px;
}

/* footer */
footer {
  background: #3D2924;
  padding: 20px 0 50px;
}
.footer {
  width: 960px;
  margin: 0 auto;
  font-size: 14px;
  color: #FFF;
  display: flex;
  justify-content: space-between;
}
footer .nav li a {
  width: inherit;
  padding: 0 13px;
  border-left: 1px solid #FFF;
  line-height: 1.6;
}
footer .nav li:last-child a {
  border-right: 1px solid #FFF;
}
.copyright {
  align-self: center;
}

/* item */
a:hover, img:hover {
  opacity: 0.5;
}
.comment {
  text-align: center;
}
.bluegray {
  color: #E1E6EB;
}
.browngray {
  color:#9E817A;
}

@media screen and (max-width: 480px) {
  /* font-size */
  html { font-size: 62.5%; }/*スマホはremのみ*/
  body { font-size: 1.4rem; }

  /* images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* layout */
  .container {
    width: 94%;
    padding: 3%;
  }
  
  /* header */
  header {
    display: block;
    text-align: center;
    margin-bottom: 9%;
  }
  h1 {
    font-size: 4rem;
    margin-bottom: 2%;
    max-width: 100%;
  }
  .shop_jp {
    font-size: 1.8rem;
    margin-left: 3.5%;
  }
  .nav {
    justify-content: space-between;
  }
  .nav li {
    flex-basis: calc(100% / 4);
  }
  .nav li a {
    width: inherit;
    font-size: 1.6rem;
    line-height: 2;
    box-sizing: border-box;
  }

  /* billborad */
  .billboard {
    position: static;
    margin: 0 0 3%;
  }
  .caption {
    background: none;
    width: 96%;
    padding: 2% 4%;
    font-size: 1.65rem;
    line-height: 1.3;
    position: static;
  }

  /* recommend */
  .menu {
    display: block;
    margin-bottom: 6%;
  }
  .menu a {
    display: flex;
    padding: 0;
    margin-right: 0%;
    margin-bottom: 4%;
    background: none;
  }
  .menu_copy {
    margin-left: 3%;
  }
  .menu h3 {
    color: #795247;
    padding: 0 0 2%;
    margin-bottom: 3%;
  }
  .menu p {
    font-size: 1.45rem;
  }
  
  .menu_copy {
    flex-basis: 50%;
  }

  /* content */
  .howto h2 {
    font-size: 1.8rem;
  }
  .content {
    display:block;
  }
  .content a {
    display: block;
    width: 96%;
    padding: 2%;
    margin-right: 0;
    margin-bottom: 3%;
  }

  /* footer */
  footer {
    padding: 0;
  }
  .footer {
    width: 100%;
    display: block;
  }
  .footer .nav {
    display: block;
    text-align: center;
  }
  footer .nav li a {
    display: block;
    padding: 0 0;
    border-left: none;
    border-bottom: 1px solid #FFF;
    line-height: 2.6;
  }
  footer .nav li:last-child a {
    border-right: none;
  }
  .copyright {
    text-align: center;
    line-height: 5.0;
  }

  /* item */
  .comment {
    text-align: left;
  }
  .howto .comment {
    text-align: center;
  }
}

＜参考サイト＞

odnax.hatenablog.com
odnax.hatenablog.com
www.clarenet.co.jp