Part３ - ２カラムページ（マークアップ）
- マークアップ
- HTMLで文書構造を作成
- テキスト内容のアウトラインを見ると以下のようになります
- aside部内のnav要素内の「h2」は「h3」として判断されています
※asideにnavタグ使用は適切ではないため、divタグに変更します。
構造をマークアップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>FARM CAPYZOU</title> </head> <body> <header> <nav> </nav> </header> <main> </main> <aside> </aside> <footer> </footer> </body> </html>
header部
<header> <h1><img src="images/logo.png" alt="FARM CAPYZOU"></h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">SHOP</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header>
main部
<!-- .main-content --> <main class="main-content"> <article> <h2>ファームの1日</h2> <p class="postdate"> <time datetime="2022-07-08T12:03" class="datetime"> 2021年7月8日12時3分 </time> </p> <p class="eyecatch"> <img src="img/eyecatch.png" alt="カピぞうが農園にいる絵"> </p> <section class="timeline"> <h3>6:00～<br>にんじんの収穫と朝ごはん</h3> <p>朝は6時ごろに起きています。いつまでも布団にくるまっていたいけれど、えいや！と頑張って起きます。<br>外に出て、まずはおひさまに「おはようございます」とご挨拶。</p> <p> その後、育ったにんじんを収穫します。<br> 形が悪いものは、ぼくが朝食として食べています。<br> 収穫しながら朝ごはんを済ませられるので、とても効率的なのです！<br> </p> <figure> <img src="img/carrots.png" alt="形の悪いにんじんの絵"> <figcaption>形が悪くてぼくが食べたにんじんさんたち</figcaption> </figure> </section class="timeline"> <section class="timeline"> <h3>8:30～12:30<br>スーパーや道の駅への出荷</h3> <p>採ったにんじんを産直店へ運びます。ここが一番の労働かもしれません。<br>そろそろリヤカーではなく、電気で動く車を買おうかなと思っているところです。</p> </section> <section class="timeline"> <h3>12:30～18:00<br>畑作業と夜ごはん</h3> <p>にんじんの様子を見ながら、お水をあげたり、虫を駆除したり、カバーをかけたりします。<br>今はにんじんがメインですが、将来的にはたくさんの野菜を育てたいので今その準備もしています。</p> </section> <section class="timeline"> <h3>18:30～<br>お風呂・就寝</h3> <p>お風呂にゆっくり入った後、眠ります。お布団の中は天国です。</p> </section> </article> </main> <!-- /.main-content -->
aside部
- 「aside」直下には「nav」ではなく「div」を使用します。
<!-- .sidebar --> <aside class="sidebar"> <div class="category-nav"> <h2>Category</h2> <ul> <li><a href="#">農家の日常(4)</a></li> <li><a href="#">農家のノウハウ(5)</a></li> <li><a href="#">カピぞうレシピ(2)</a></li> <li><a href="#">農家の経営(2)</a></li> </ul> </div><!-- /.category-nav --> <div class="recent-nav"> <h2>Recent Articles</h2> <ul> <li><a href="#">温室栽培での注意トップ10</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> </div><!-- /.recent-nav --> <p class="banner"><a href="#"><img src="img/side_banner.png" alt="オンラインショップバナー"></a></p> </aside> <!-- /.sidebar -->
footer部
<!-- .footer --> <footer class="footer"> <p><small>© 3021 FARM CAPYZOU</small></p> </footer> <!-- /.footer -->
マークアップ完成プレビュー
