【独学で学ぶHTML5/CSS3】body要素に記述していこう! 2日目【初心者】

2020年5月8日WEB

WEBページをレイアウトするためのタグを入力していこう!

実際に見える部分を記述していきます。
WEBページを
…ヘッダー
…メインコンテンツ
…独立した記事
…セクション
…補足・注釈
…ナビゲーション
…フッター
などのタグを使って、それぞれのBOXを作っていきます。
タグの種類はとてもたくさんあるので、全て一度に覚えるよりもなんとなくそんなタグがあるんだなーくらいの感覚でどんどん進んでいきましょう!!
実際に僕も最初に暗記から入って失敗しました。
これから練習でコーディングしていったり、調べていきながら自分のものにしていきましょう!
なのでまずはとにかくコーディングしてみる!!
ページができてくる楽しさから一緒に学んでいきましょう!
話が少し脱線してしまいましたが…

基本的にタグはのように<開始タグ></終了タグ>で囲みます。
中には</終了タグ>が必要ないタグも存在しますので注意です!

①全体を囲むBOXをタグで囲み、id属性を”wrapper”とします。id属性については後ほど記載しますので、今はそうなんだーくらいで記述してください。
②ページの上部、ヘッダーのBOXを作ります。
③メインイメージを記載するBOXをで作ります。
④トップページに戻ったり、店舗紹介のページに移るためのリンクのBOXをで作ります。
⑤お知らせを表示する表のBOXはを使って作ります。
⑥ページ下部のフッターをでBOXを作成したら完了です。

実際にコードを入力するとこのようになります。
では、これをWEBページで表すと…

このようになります。
これで各項目のBOXを分けることができました!

コメントアウトでBOXをわかりやすくしよう!

コメントアウトを利用することで、それぞれのBOXがどこからどこまでなのかをわかりやすくしておきます。
記述の仕方は<!–>〇〇〇〇<–>でBOXを囲むだけ!
このようになります。

これで、それぞれのBOXがどこまでなのかがわかりやすくなりました!

次回はCSSも使ってページを構築していきます!
どんどんWEBページらしくなってきますのでお楽しみに♪

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya