見出し画像

Webデザイン・マーケティング課 授業16日目

いしかわ

1〜2時間目 職業人講和
3時間目 HTML5・CSS3

オリジナル教材

今日は、HTMLの授業は3時間目の1時間分しかないので、ちょっと短めです。

■枠組みを作る

今回作るサイトのデザインは、以下の感じ。

chalon枠組み

この枠組みに沿って、HTMLを書いていきます。

<body>
   <header>
       <div class="inner">
           <h1>
               <a href="#">
                   <img src="img/logo.png" alt="洋菓子店CHALON">
               </a>
           </h1>
       </div>
   </header>
   <div class="key">

   </div>
   <div class="scroll">

   </div>
   <section class="top_about">
       <div class="inner">

       </div>
   </section>

   <section class="top_menu">
       <div class="inner">

       </div>
   </section>

   <section class="top_lesson">
       <div class="inner">

       </div>
   </section>

   <div class="bottom_contents">
       <div class="inner ">
           <section class="top_voice"></section>
           <section class="top_info"></section>
       </div>
   </div>

   <footer>
       <div class="inner">

       </div>
   </footer>
</body>


今日最後に、ロゴの画像をh1でマークアップ。

ポイントは、ちゃんとheaderの中のdivタグの中にh1を書くこと。これができないと、枠組みを最初に作った意味が無くなってしまう。


■まとめ

今日は、１、２時間目が講話だったので短めです。

枠組みの説明が、ぴったり1時間で終わってかなり切りが良い気がする。

明日から、ナビなど他のコンテンツ作成です。

この記事が気に入ったらサポートをしてみませんか？