LESSON2:2カラムレイアウト(2)
LESSON2:2カラムレイアウト(2)
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 { padding-top: 30px; color: #222; font-size: 16px; font-family: 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; }