こんにちは、コンスキです。
今回は、4ページ目のHTMLを書く作業をやっていきます。
HTMLファイルを作る
4ページ目のHTMLファイルとして「lunch.html」を作成します。
ここからは、このファイルにHTMLを書いていきます。
ヘッダーとフッターの部分をコピーする
これまでの3ページと同様に、ヘッダーとフッターの部分をコピーして使い回します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="destyle.css">
<link rel="stylesheet" href="top.css">
<title>いろくふ幼稚園｜TOPページ</title>
</head>
<body>
<header>
<div id="header_other">
<div id="branding_container">
<p id="tagline">地域とつながる幼稚園</p>
<h1 id="branding"><a href="#">いろくふ幼稚園</a></h1>
</div>
<ul id="menu">
<li><img src="./img/guid_map.png" width="26" height="26"><a href="#">園内マップ</a></li>
<li><img src="./img/FAQ.png" width="26" height="26"><a href="#">よくある質問</a></li>
<li><img src="./img/twitter.png" width="18" height="15"><a href="#">ツイッター</a></li>
<li><img src="./img/home.png" width="26" height="26"><a href="#">ホーム</a></li>
</ul>
<div id="tel_container">
<p id="tel">00 - 0000 - 0000</p>
<p id="open">開園時間：土日・平日8:00 ~ 19:00</p>
<p id="extra"> （延長 〜20:00）</p>
</div>
</div>
<nav id="nav_container">
<ul id="navigation">
<li><a href="#"><img src="./img/about.png" width="66" height="66"><p>園について</p></a></li>
<li><a href="#"><img src="./img/how_to_spend.png" width="66" height="66"><p>１日の過ごし方</p></a></li>
<li><a href="#"><img src="./img/lunch_menu.png" width="66" height="66"><p>給食のこんだて</p></a></li>
<li><a href="#"><img src="./img/ annual_schedule.png" width="66" height="66"><p>年間予定</p></a></li>
<li><a href="#"><img src="./img/contact.png" width="66" height="66"><p>お問い合わせ</p></a></li>
</ul>
</nav>
<div id="mv_container">
<img src="./img/daytime_mv.jpg">
</div>
</header>
<main>
</main>
<hr>
<footer>
<div id="footer_other">
<div id="footer_branding_container">
<p id="footer_tagline">地域とつながる</p>
<h1 id="footer_branding">いろくふ幼稚園</h1>
</div>
<div>
<nav id="footer_nav_container">
<ul>
<p>園について</p>
<hr>
<li><a href="#">きほん情報</a></li>
<li><a href="#">教育方針</a></li>
<li><a href="#">いろくふ幼稚園の特徴</a></li>
</ul>
<ul>
<p>1日の過ごし方</p>
<hr>
<li><a href="#">3歳未満</a></li>
<li><a href="#">3歳以上</a></li>
</ul>
<ul>
<p>給食のこんだて</p>
<hr>
<li><a href="#">今日のこんだて</a></li>
<li><a href="#">給食について</a></li>
<li><a href="#">おやつについて</a></li>
</ul>
<ul>
<p>年間予定</p>
<hr>
<li><a href="#">年間カレンダー</a></li>
</ul>
<ul>
<p>お問い合わせ</p>
<hr>
<li><a href="">よくある質問</a></li>
<li><a href="">お問い合わせフォーム</a></li>
</ul>
</nav>
<div id="footer_tel_container">
<p id="footer_tel">00 - 0000 - 0000</p>
<p id="footer_open">開園時間：土日・平日8:00 ~ 19:00</p>
<p id="footer_extra">（延長 〜20:00）</p>
</div>
</div>
</div>
<div id="ladybug_container">
<img src="./img/ladybug.png" id="ladybug">
</div>
<div id="dragonfly_container">
<img src="./img/dragonfly.png" id="dragonfly">
</div>
<div id="omoiyari_container">
<img src="./img/omoiyari.png" id="omoiyari">
</div>
<div id="sasaeai_container">
<img src="./img/sasaeai.png" id="sasaeai">
</div>
<div id="locust_container">
<img src="./img/locust.png" id="locust">
</div>
<hr>
<p id="copyright">©︎2021 いろくふ幼稚園.</p>
</footer>
</body>
</html> ヘッダーとフッターの見た目を整えておくために、このHTMLファイルでも「top.css」を読み込んであります。
HTMLの構成を考える
デザインカンプを見て、どのようにHTMLを書いたら後からCSSで同じ見た目にできるのかを考えます。
例えば、次のような感じの構成にします。
CSSを使ってもデザインカンプの見た目と同じ感じにすることができないと後からわかる時があります。
そんな時は後からHTMLを変更します。
そのため、ここでHTMLの構成を考えることにあまり時間を使わなくても大丈夫だと僕は思います。
HTMLを書く
HTMLの構成を考えられたので、実際にHTMLを書いていきます。
main要素の部分だけを下に示します。
<main>
<div id="lunch_menu">
<div id="todays_menu">
<h2><img src="" alt="今日のこんだて"></h2>
<svg viewBox="10 0 763 2">
<line x1="0" y1="0" x2="763" y2="0">
</svg>
<p id="todays_date">2021.06.25</p>
<div id="todays_lunch_content">
<img src="" alt="">
<div id="lunch_menu_container">
<ul id="lunch_menu_list">
<li>わかめご飯</li>
<li>さわらの西京焼き</li>
<li>肉じゃがカレー風味</li>
<li>キュウリと大根とにんじんの浅漬け</li>
</ul>
<p id="total_calories">総カロリー：376kcal</p>
</div>
</div>
</div>
<div id="previous_menu">
<h2>これまでのこんだて</h2>
<p>2021年5月</p>
<hr>
<p>2021年4月</p>
<hr>
<p>2021年3月</p>
<hr>
<p>2021年2月</p>
<hr>
<p>2021年1月</p>
<hr>
<p>2020年12月</p>
<hr>
<p>2020年11月</p>
<hr>
<p>2020年10月</p>
</div>
</div>
<div id="about_lunch">
<h2 id="about_luch_heading"><span>01</span>給食について</h2>
<div class="about_lunch_row">
<div class="about_luch_text">
<h3>①完全給食の制度</h3>
<p>お昼ごはんは当園が提供する<span>完全給食</span>です。完全給食とは白いご飯やパン、飲みものまで含んでいる給食のことで、お昼ご飯をご家庭で各自用意していただく必要はありません。また、「週4日が給食、週1日がお弁当」というような、曜日によってお弁当が必要になることもなく毎日給食が提供される制度になっています。以前まで、お弁当を用意していただいていましたが、保護者の方の負担が大きいと判断して、今の完全給食の制度に改善されました。しかし、お子さんがご家庭の味を味わうことも大切であるため、不定期で「お母さん・お父さんのお弁当の日」を設けています。</p>
</div>
<img src="">
</div>
</div>
<div class="about_lunch_row">
<img src="">
<div class="about_lunch_text">
<h3>地元の食材</h3>
<p>給食には口浮市内の野菜、お肉、魚などの食材がたくさん使われています。週に2度月曜日と金曜日には、地元の野菜だけを使った給食が提供されます。地元の方が作っている食材を使っているのには、お子さんの地元について知るきっかけになってほしいという願いが込められています。給食について栄養いっぱい、まごころいっぱいの食材を食べて元気に健やかな毎日を過ごしてもらいたいです。</p>
</div>
</div>
</div>
<div class="about_lunch_row">
<div class="about_lunch_text">
<h3>管理栄養士による栄養の管理</h3>
<p>当園には給食の栄養管理を行ってくださる専属管理栄養士が2名います。常に成長し続ける園児の身体には、それに見合ったバランスの取れた栄養やたくさんのエネルギーが必要です。管理栄養士の主な役割は、そのよう栄養やエネルギーを考えた毎日の献立を作成することです。他にも4歳以上の園児に対する、食育教育も担当していただいています。この年齢からの食育教育は、難しい内容を取り扱った教育ではありません。紙芝居や絵本を通して栄養の大切さを学んでもらい、嫌いになりがちな野菜に対する意識を少しでも変えることを目的にしています。</p>
</div>
<img src="">
</div>
</div>
<div id="about_snack_time">
<h2 id="snack_time_heading"></h2>
<div id="snack_time_img_container">
<div class="snack_time_img">
<img src="" alt="栄養を補う">
<img src="" alt="">
</div>
<div class="snack_time_img">
<img src="" alt="お腹を満たす">
<img src="" alt="">
</div>
<div class="snack_time_img">
<img src="" alt="笑顔をつくる">
<img src="" alt="">
</div>
</div>
<div id="snack_time_text">
<p> 幼稚園でのおやつには3つの役割があります。1つ目は「栄養を補う」役割です。身体が小さい間は、朝昼晩の3度の食事では栄養が不足することがあります。子供の成長が速いものですが、幼稚児の間は特に成長速度が速いです。成長が伴っていると、単純に大人との体の大きさを比較して考えた栄養では、不足してしまいます。このようなことから、おやつには「栄養を補う」役割があります。おやつと言っても、アイスクリームやチョコレートではなく、ナッツ類や果物などの栄養の取れるおやつが出されます。</p>
<p> 2つ目の役割は「お腹を満たす」ことです。食事と食事の間に、お腹が空いてしまうことがあります。お腹が空いてしまうと、午後の活動に集中することができないこともあるため、おやつには、お腹を満たして集中力を上げるというような役割もあります。</p>
<p> 3つ目は「笑顔を作る」役割です。美味しいおやつを食べると、機嫌が悪くても自然と笑顔が生まれます。幼稚園にいる時間を少しでも楽しい時間にするためにも、笑顔を生んでくれるおやつは大切な習慣の1つです。</p>
</div>
</div>
</main>ブラウザには次のように表示されますブラウザには次のように表示されます。
コメント