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

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


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


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


これで、それぞれのBOXがどこまでなのかがわかりやすくなりました!
次回はCSSも使ってページを構築していきます!
どんどんWEBページらしくなってきますのでお楽しみに♪
ディスカッション
コメント一覧
まだ、コメントがありません