求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

Sass実践 CafeLeaf 文書構造

Sass実践 CafeLeaf 文書構造

  • テキスト LESSON28
  • レイアウトは、Flexbox
  • モバイルファースト(Sassで記述)

f:id:web-0220:20190218165841p:plain

レイアウト構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おいしい紅茶と手作り焼き菓子の店 CafeLeaf</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="header">
  <div class="container">

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

<nav class="gnav">
  <ul class="container">

  </ul><!-- /.container -->
</nav><!-- /.gnav -->

<main class="main container">

</main><!-- /.main .container -->

<footer class="footer">
  <div class="container">

  </div><!-- /.container -->
</footer><!-- /.footer -->
</body>
</html>
header
<header class="header">
  <div class="container">
    <h1 class="top-logo"><a href="index.html"><img src="img/logo_header.png" alt="おいしい紅茶と手作り焼き菓子の店 CafeLeaf"></a></h1>
  </div><!-- /.container -->
</header><!-- /.header -->
nav
<nav class="gnav">
  <ul class="container">
  <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><!-- /.gnav -->
main
<main class="main container">

<div class="intro">
  <div class="intro-text">
    <p>Cafe Leafは、豊島南池袋2丁目にある紅茶専門カフェです。<br>
    オーナー自らが目利きして買い付けた厳選された茶葉を、ポットでお出ししています。<br>
    都会の隠れ家カフェで、くつろぎのティータイムをごゆっくりお楽しみください。</p>
  </div><!-- /.intro-text -->
  <div class="intro-map">
    <div class="map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.035299273462!2d139.71349231526!3d35.72535038018395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6be1f35c5b%3A0xa9e4a5e1f39e8d31!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yW4oiS77yR77yQIOODl-ODquODouODl-ODqeODvOODiOODk-ODqw!5e0!3m2!1sja!2sjp!4v1535272099021" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div><!-- /.map -->
    <div class="address">
      <p>東京都豊島区南池袋2丁目X−X プリモプラートビル4F</p>
      <p class="btn_tel"><a href="tel:03-1234-5678">03-1234-5678</a></p>
    </div><!-- /.address --> 
  </div><!-- /.intro-map -->
</div><!-- /.intro -->

<section class="menu">
<div class="heading">
  <h2>Pickup Menu</h2><p class="more"><a href="#">more</a></p>
</div><!-- /.heading -->
  <ul class="menu-list">
    <li>
      <img src="img/ph_menu01.jpg" alt="">
      <p class="menu-text">ダージリン<br><b>800円</b></p>
    </li>
    <li>
      <img src="img/ph_menu02.jpg" alt="">
      <p class="menu-text">ロイヤルミルクティー<br><b>850円</b></p>
    </li>
    <li>
      <img src="img/ph_menu03.jpg" alt="">
      <p class="menu-text">ハーブティー<br><b>700円</b></p>
    </li>
    <li>
      <img src="img/ph_menu04.jpg" alt="">
      <p class="menu-text">プレーンワッフル<br><b>400円</b></p>
    </li>
    <li>
      <img src="img/ph_menu05.jpg" alt="">
      <p class="menu-text">アップルパイ<br><b>550円</b></p>
    </li>
    <li>
      <img src="img/ph_menu06.jpg" alt="">
      <p class="menu-text">マドレーヌ<br><b>300円</b></p>
    </li>
    </ul>
  </section><!-- /.menu -->

  <div class="wrapper">
  <section class="info">
    <div class="heading">
      <h2>Information</h2><p class="more"><a href="#">more</a></p>
    </div><!-- /.heading -->
    <dl>
      <dt>2019-02-28</dt>
      <dd><a href="#">臨時休業のお知らせ</a></dd>
      <dt>2019-02-11</dt>
      <dd><a href="#">紅茶教室(6月開催分)の受付を開始しました</a></dd>
      <dt>2019-02-03</dt>
      <dd><a href="#">消費税率変更に伴う料金改定について</a></dd>
    </dl>
  </section><!-- /.info -->

  <section class="staff">
    <p class="staff-photo"><img src="img/ph_staff.jpg" alt="スタッフ近影"></p>
    <div class="comment">
      <h2>スタッフから一言</h2>
      <p class="say">ティーインストラクターの資格を持つスタッフが、一杯ずつ丁寧にお入れします。</p>
    </div>
  </section><!-- /.staff -->
  </div><!-- /.wrapper -->
  
  <aside class="aside">
    <ul class="banner">
      <li><a href="#"><img src="img/bnr_blog.jpg" alt="ブログ始めました"></a></li>
      <li><a href="#"><img src="img/bnr_lesson.jpg" alt="紅茶教室のご案内"></a></li>
      <li><a href="#"><img src="img/bnr_recipe.jpg" alt="焼き菓子レシピ"></a></li>
    </ul>
  </aside><!-- /.aside -->

</main><!-- /.main container -->
footer
<footer class="footer">
  <div class="footer-container">
  
  <div class="footer-wrap">
  
    <p class="footer-photo"><img src="img/ph_shop.jpg" alt="店舗外観"></p><!-- /.footer-photo -->
    
    <div class="footer-info">
      <p class="footer-info-title"><img src="img/logo_footer.png" alt="CafeLeaf ロゴ"></p>
      <dl class="footer-info-list">
      <dt>【営業時間】</dt>
      <dd>10:00〜19:00(火曜定休)</dd>
      <dt>【電話番号】</dt>
      <dd>03-0000-0000</dd>
      <dt>【住  所】</dt>
      <dd>東京都豊島区南池袋2丁目X−X プリモプラートビル4F</dd>
      <dt>【最寄り駅】</dt>
      <dd>東京メトロ・有楽町線東池袋駅 徒歩6分</dd>
      </dl>
    </div><!-- .footer-info -->

  </div><!-- /.footer-wrap -->

  <ul class="sns">
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  </ul>
  <p class="copy"><small>(c) Cafe Leaf.</small></p>
  
  </div><!-- /.footer-container -->
</footer><!-- /.footer -->
マークアップ完成例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おいしい紅茶と手作り焼き菓子の店 CafeLeaf</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700|Noto+Sans+JP:400,500,700,900&amp;subset=japanese" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
  <div class="container">
    <h1 class="top-logo"><a href="index.html"><img src="img/logo_header.png" alt="おいしい紅茶と手作り焼き菓子の店 CafeLeaf"></a></h1>
  </div><!-- /.container -->
</header><!-- /.header -->

<nav class="gnav">
  <ul class="container">
  <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><!-- /.gnav -->

<main class="main container">

<div class="intro">
  <div class="intro-text">
    <p>Cafe Leafは、豊島南池袋2丁目にある紅茶専門カフェです。<br>
    オーナー自らが目利きして買い付けた厳選された茶葉を、ポットでお出ししています。<br>
    都会の隠れ家カフェで、くつろぎのティータイムをごゆっくりお楽しみください。</p>
  </div><!-- /.intro-text -->
  <div class="intro-map">
    <div class="map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.035299273462!2d139.71349231526!3d35.72535038018395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6be1f35c5b%3A0xa9e4a5e1f39e8d31!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yW4oiS77yR77yQIOODl-ODquODouODl-ODqeODvOODiOODk-ODqw!5e0!3m2!1sja!2sjp!4v1535272099021" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div><!-- /.map -->
    <div class="address">
      <p>東京都豊島区南池袋2丁目X−X プリモプラートビル4F</p>
      <p class="btn_tel"><a href="tel:03-1234-5678">03-1234-5678</a></p>
    </div><!-- /.address --> 
  </div><!-- /.intro-map -->
</div><!-- /.intro -->

<section class="menu">
 
  <div class="heading">
  <h2>Pickup Menu</h2><p class="more"><a href="#">more</a></p>
  </div><!-- /.heading -->
   
    <ul class="menu_list">
    <li>
      <img src="img/ph_menu01.jpg" alt="">
      <p class="menu_text">ダージリン<br><span class="price">800円</span></p>
    </li>
    <li>
      <img src="img/ph_menu02.jpg" alt="">
      <p class="menu_text">ロイヤルミルクティー<br><span class="price">850円</span></p>
    </li>
    <li>
      <img src="img/ph_menu03.jpg" alt="">
      <p class="menu_text">ハーブティー<br><span class="price">700円</span></p>
    </li>
    <li>
      <img src="img/ph_menu04.jpg" alt="">
      <p class="menu_text">プレーンワッフル<br><span class="price">400円</span></p>
    </li>
    <li>
      <img src="img/ph_menu05.jpg" alt="">
      <p class="menu_text">アップルパイ<br><span class="price">550円</span></p>
    </li>
    <li>
    <img src="img/ph_menu06.jpg" alt="">
    <p class="menu_text">マドレーヌ<br><span class="price">300円</span></p>
    </li>
    </ul>
  </section><!-- /.menu -->


  <div class="wrapper">
  <section class="info">
    <div class="heading">
      <h2>Information</h2><p class="more"><a href="#">more</a></p>
    </div><!-- /.heading -->
    <dl class="news">
      <dt>2019-02-28</dt>
      <dd><a href="#">臨時休業のお知らせ</a></dd>
      <dt>2019-02-11</dt>
      <dd><a href="#">紅茶教室(6月開催分)の受付を開始しました</a></dd>
      <dt>2019-02-03</dt>
      <dd><a href="#">消費税率変更に伴う料金改定について</a></dd>
    </dl>
  </section><!-- /.info -->

  <section class="staff">
    <p class="staff-photo"><img src="img/ph_staff.jpg" alt="スタッフ近影"></p>
    <div class="comment">
      <h2>スタッフから一言</h2>
      <p class="say">ティーインストラクターの資格を持つスタッフが、一杯ずつ丁寧にお入れします。</p>
    </div>
  </section><!-- /.staff -->
  </div><!-- /.wrapper -->
  
  <aside class="aside">
    <ul class="banner">
      <li><a href="#"><img src="img/bnr_blog.jpg" alt="ブログ始めました"></a></li>
      <li><a href="#"><img src="img/bnr_lesson.jpg" alt="紅茶教室のご案内"></a></li>
      <li><a href="#"><img src="img/bnr_recipe.jpg" alt="焼き菓子レシピ"></a></li>
    </ul>
  </aside><!-- /.aside -->

</main><!-- /.main container -->

<footer class="footer">
  <div class="footer-container">
  
  <div class="footer-wrap">
  
    <p class="footer-photo"><img src="img/ph_shop.jpg" alt="店舗外観"></p><!-- /.footer-photo -->
    
    <div class="footer-info">
      <p class="footer-info-title"><img src="img/logo_footer.png" alt="CafeLeaf ロゴ"></p>
      <dl class="footer-info-list">
      <dt>【営業時間】</dt>
      <dd>10:00〜19:00(火曜定休)</dd>
      <dt>【電話番号】</dt>
      <dd>03-0000-0000</dd>
      <dt>【住  所】</dt>
      <dd>東京都豊島区南池袋2丁目X−X プリモプラートビル4F</dd>
      <dt>【最寄り駅】</dt>
      <dd>東京メトロ・有楽町線東池袋駅 徒歩6分</dd>
      </dl>
    </div><!-- .footer-info -->

  </div><!-- /.footer-wrap -->

  <ul class="sns">
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  </ul>
  <p class="copy"><small>(c) Cafe Leaf.</small></p>
  
  </div><!-- /.footer-container -->
</footer><!-- /.footer -->
</body>
</html>