こんにちは、コンスキです。
今回は3ページのHTMLを書いてきます。
ヘッダーとフッダーを複製する
3ページ目のHTMLファイルとして新しく「daytime.html」を作成します。
ヘッダーとフッダーはどのページにも使い回す部分なので、HTMLを丸々コピーしておきます。
<!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/about_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> ヘッダーとフッターの見た目は、「top.css」で整えてあるので、「daytime.html」で「top.css」を読み込んでおきます。
この状態で、一度ブラウザに表示してみます。
main要素の中には何も書いていないため、表示されるのはヘッダーとフッターだけですね。
要素の構成を決める
3ページ目のデザインカンプを見て、どういう要素を書いていくべきかを決めていきます。
このページの場合、線の部分はHTMLで表現するが難しそうです。
この部分は、背景に画像を設定する方が良さそうです。
要素の背景に画像を使うためにCSSを設定します。
「daytime.html」のCSSファイルとして「daytime.css」を作ります。
次のようにして、main要素の背景に線の画像を設定します。
main {
background-image:url("./img/background.png");
background-repeat: no-repeat;
background-position: center center;
width: auto;
height: 3220px;
}すると次のようになります。
要素を作る
あとは普通にHTMLを書いていきます。
main要素だけを下に示しておきます。
<main>
<div>
<div id="going_to">
<h2>8:00<span>登園開始</span></h2>
<p>基本的には保護者同伴の徒歩での登園、または、自動車で送っていただく形の登園をしていただきます。4歳以上であれば、2人以上の団体で登園していただくこともできます。</p>
<img src="" alt="">
</div>
<div>
<div id="balloon_over_row">
<div class="balloon_over">
<h2>9:00<span>自由遊び</span></h2>
<p>朝のお集まり時間まで、子どもたちが自由に考えて遊ぶ時間です。雨の日は室内遊びになりますが、毎日体を動かせるようにほとんどの場合外遊びになります。</p>
<img src="" alt="">
</div>
<div class="balloon_over">
<h2>10:00<span>お集まり・主活動</span></h2>
<p>5分間くらいで朝の集会を行います。1人1人の体調を確認したり、お歌を歌ったりします。その後、お絵描きや楽器の演奏、数字のお勉強などの主活動をします。</p>
<img src="" alt="">
</div>
<div class="balloon_over">
<h2>12:00<span>給食</span></h2>
<p>楽しい給食の時間です。お友達とゆっくりおしゃべりをする時間でもあります。小学校入学の準備のために、配膳と食器のお片付けは子どもたちが自分たちで行います。</p>
<img src="" alt="">
</div>
<div class="balloon_over">
<h2>13:00<span></span></h2>
<p>1時間のお昼寝の時間です。午前中の活動で使った頭や身体を休めます。家で使っているタオルや毛布を持ってきてもらいます。5歳児以上は午睡の時間がありません。</p>
<img src="" alt="">
</div>
<div class="balloon_over">
<h2>14:00<span>自由遊び</span></h2>
<p>2度目の自由に遊ぶ時間です。午前中と同様、外で体を動かす遊びが基本になっています。この時間は熱中症を防ぐ意味合いで、季節関係なく帽子をつけます。</p>
<img src="" alt="">
</div>
<div class="balloon_over">
<h2>15:00<span>おやつ</span></h2>
<p>3時のおやつタイムです。おやつには果物やナッツ類、ヨーグルトというような栄養のあるものが出ます。おやつを食べた後は歯磨きを忘れずに行います。</p>
<img src="" alt="">
</div>
</div>
<div>
<div class="balloon_under">
<h2>9:00<span>朝のおやつ</span></h2>
<p>未満児は一度に食べられる量が少ないため、3時のおやつ加えて朝にもおやつの時間を設けています。牛乳・豆乳・ヨーグルトをメインに消化の良い食べ物を食べてもらいます。
<img src="" alt="">
</div>
</div>
<div id="balloon_under_row">
<div class="balloon_under">
<h2>10:00<span>主活動</span></h2>
<p>1日の中で一番体を動かす時間です。成長に合わせて、さまざまな遊びを先生と一緒にします。基本は室内での遊びが多く、いい天気の時はベランダに出て日光を浴びます。</p>
<img src="" alt="">
</div>
</div>
<div>
<div class="balloon_under">
<h2>12:00<span>給食</span></h2>
<p>ご飯の時間です。離乳食の完了未完了に応じて食事メニューが異なります。事前にご報告いただいたお子さんに関しては、完全アレルギー対応の食事が提供されます。</p>
<img src="" alt="">
</div>
</div>
<div>
<div class="balloon_under">
<h2>12:30<span>午睡</span></h2>
<p>お昼寝の時間です。1時間半のお昼寝の時間を目安にしています。午前中の様子や連絡帳によるお子さんの入眠の状況から判断して、時間を長くしたり短くしたりします。</p>
<img src="" alt="">
</div>
<div class="balloon_under">
<h2>14:00<span>体操</span></h2>
<p>比較的軽めの体操を行います。1歳未満のお子さんに関しては、ハイハイやつかまり立ち、歩行の練習をします。怪我のないように床が柔らかくなっている部屋で行います。</p>
<img src="" alt="">
</div>
<div class="balloon_under">
<h2>15:00<span>おやつ</span></h2>
<p>3時のおやつの時間です。朝のおやつとは違うメニューを取ることで、栄養のバランスを保ちます。バナナやりんご加えた少しエネルギー多めのおやつになっています。</p>
<img src="" alt="">
</div>
</div>
<div id="coming_from">
<h2>8:00<span>登園開始</span></h2>
<p>お迎えが来る子はその時間まで、室内で遊んだり睡眠を取ったりします。安全面の配慮から、2人以上であってもお子さんだけでの降園はご遠慮いただいています。</p>
<img src="" alt="">
</div>
</div>
</div>
</main>ブラウザに表示すると次のようになります。
ここから本当にデザインカンプのような見た目にできるか不安です。
コメント