Web白描

２カラムレイアウト（３）

★HTML+CSS実践

２カラムレイアウト（３）

CAKE SHOP

ホーム
CakeShopについて
ケーキメニュー
お店のご案内
お知らせ
お問い合わせ


トピックス

2013.10.30
CAKE SHOP 創業40周年記念ケーキ販売決定！
2013.09.12
【重要】全国郵送に関するお知らせ
2013.08.02
8月12日〜16日まで夏期休暇とさせていただきます。
2013.04.01
新メニュー「クラシックケーキ」販売します。


こだわり

ロールケーキの秘密

CAKE SHOPの歴史

Copyright © CAKE SHOP All Rights Reserved.

HTML記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>CAKE SHOP</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

<!-- .header -->
<header class="header">
  <h1 class="logo"><img src="img/logo.png" alt="CAKE SHOP"></h1>
  <nav class="gnav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">CakeShopについて</a></li>
      <li><a href="#">ケーキメニュー</a></li>
      <li><a href="#">お店のご案内</a></li>
      <li><a href="#">お知らせ</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>
<!-- /.header -->

<div class="wrapper">
  <!-- .main-content -->
  <main class="main-content">
    <!-- .key-Visual -->
    <div class="key-visual"><img src="img/mainvisual.png" alt=""></div>
    <!-- /.key-Visual -->
    <section class="news">
    <h3>トピックス</h3>
    <dl>
      <dt>2013.10.30</dt><dd>CAKE SHOP 創業40周年記念ケーキ販売決定！</dd>
      <dt>2013.09.12</dt><dd>【重要】全国郵送に関するお知らせ</dd>
      <dt>2013.08.02</dt><dd>8月12日〜16日まで夏期休暇とさせていただきます。</dd>
      <dt>2013.04.01</dt><dd>新メニュー「クラシックケーキ」販売します。</dd>
    </dl>
    </section><!-- /.news -->
  </main><!-- /.main-content -->
  <aside class="sidebar">
    <h3>こだわり</h3>
    <p class="banner"><a href="#"><img src="img/event_1.png" alt="ロールケーキの秘密"></a></p>
    <p class="banner"><a href="#"><img src="img/event_2.png" alt="CAKE SHOPの歴史"></a></p>
  </aside><!-- /.sidebar -->
</div><!-- /.wrapper -->

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

<!-- .footer -->
<footer class="footer">
  <p><small>Copyright © CAKE SHOP  All Rights Reserved.</small></p>
</footer>
<!-- /.footer -->
</body>
</html>

CSS記述例

@charset "UTF-8";

/* ----------------------------------
  reset
---------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------
  body
---------------------------------- */
body {
  color: #222;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
  border-top: 4px solid #e2a438;
}


/* ----------------------------------
  layout
---------------------------------- */
.container {
  display: flex;
  width: 960px;
  margin: 0 auto;
}
.header {
  flex-basis: 230px;
}
.wrapper {
  display: flex;
  gap: 30px;
  width: 730px;
  margin-bottom: 30px;
}
.footer {
  padding: 20px 0 70px;
  background-color: #e2a438;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* ----------------------------------
  header
---------------------------------- */
h1 {
  margin-bottom: 30px;
}
ul li {
  margin-bottom: 40px;
}
ul a {
  display: block;
  color: #e2a438;
}


/* ----------------------------------
  element
---------------------------------- */
.key-visual {
  margin-bottom: 16px;
}
.news {
  width: 500px;
}
h3 {
  margin-bottom: 12px;
  padding: 10px;
  background-color: #e2a438;
  color: #fff;
}
dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
}
dt {
  width: 7em;
  padding: 12px 0;
  border-bottom: 1px dashed #333;
}
dd {
  width: 388px;
  padding: 12px 0;
  border-bottom: 1px dashed #333;
}
.banner {
  margin-bottom: 8px;
}