【独学で学ぶHTML5/CSS3】body要素に記述していこう！ 2日目【初心者】
WEBページをレイアウトするためのタグを入力していこう！
実際に見える部分を記述していきます。
WEBページを
…ヘッダー
…メインコンテンツ
…独立した記事
…セクション
…補足・注釈
…ナビゲーション
…フッター
などのタグを使って、それぞれのBOXを作っていきます。
タグの種類はとてもたくさんあるので、全て一度に覚えるよりもなんとなくそんなタグがあるんだなーくらいの感覚でどんどん進んでいきましょう！！
実際に僕も最初に暗記から入って失敗しました。
これから練習でコーディングしていったり、調べていきながら自分のものにしていきましょう！
なのでまずはとにかくコーディングしてみる！！
ページができてくる楽しさから一緒に学んでいきましょう！
話が少し脱線してしまいましたが…
基本的にタグはのように<開始タグ></終了タグ>で囲みます。
中には</終了タグ>が必要ないタグも存在しますので注意です！
①全体を囲むBOXをタグで囲み、id属性を”wrapper”とします。id属性については後ほど記載しますので、今はそうなんだーくらいで記述してください。
②ページの上部、ヘッダーのBOXを作ります。
③メインイメージを記載するBOXをで作ります。
④トップページに戻ったり、店舗紹介のページに移るためのリンクのBOXをで作ります。
⑤お知らせを表示する表のBOXはを使って作ります。
⑥ページ下部のフッターをでBOXを作成したら完了です。
実際にコードを入力するとこのようになります。
では、これをWEBページで表すと…
このようになります。
これで各項目のBOXを分けることができました！
コメントアウトでBOXをわかりやすくしよう！
コメントアウトを利用することで、それぞれのBOXがどこからどこまでなのかをわかりやすくしておきます。
記述の仕方は<!–>〇〇〇〇<–>でBOXを囲むだけ！
このようになります。
これで、それぞれのBOXがどこまでなのかがわかりやすくなりました！
次回はCSSも使ってページを構築していきます！
どんどんWEBページらしくなってきますのでお楽しみに♪