制作初歩編3です。
前回までの流れは上↑のウェブビー公式チャンネルからどうぞ。
<body>タグの中身を分割しよう
<body>タグの中身を
- <header>
- <footer>
- <main>
に分けましょう！
まずは、BracketsとAdobe XDを立ち上げましょう！
<header>タグ
- ページのヘッダーを意味するタグ
- ウェブサイトのロゴや、グローバルナビゲーションなどが含まれたりする
- ウェブ全体に共通して表示される内容を入れる場合が多いタグ
<footer>タグ
- ページのフッターを意味するタグ
- ウェブ文章全体に共通する情報が含まれたりします。
- ウェブページ全体に共通して表示される内容をいれる場合が多いタイプ
<main>タグ
- ページのメインコンテンツを意味するタグ
- そのページ特有の内容を入れるタグ
- 同じページに1回だけ使えます。
3つの要素
<header>
ロゴマークとキャッチコピー説明文をひとまとめにした部分です。
<footer>
お問い合わせと、しろくま（赤クマ？）アイコンを想定します。
<main>
<main>タグはクマのプロフィールの部分になります。
それぞれの役割に合わせて<
<body>タグを分割します。
ウェブビー流
基本にそって、使うこと、必要なことから覚えていこう！
Bracketsのコードを書こう
HTMLに<header>タグを追加。
<body>タグの後ろにカーソルを入れてエンターキーを押す。
空行ができたので半角で「header」と入れます。
そして、tabキーを押してください。
開始タグと終了タグができました。
<main>タグを追加します。
</header>のあとにカーソルを入れ、エンターを押す。
次は「main」と入力してtabキーを押します。
<main></main>の中にh1とpを入れ子で入れていきます。
<main></main>にカーソルを入れ、エンターキーを押します。
空行が出来ます。
<h1>から</p>までを選択します。
編集メニューから、行を上に移動を選択します。
（行を下げたい時は「行を下に移動」です。）
選択した範囲が1行上がって<main></main>タグの間に入りました。
この機能は割と便利なのでショートカットキーを覚えておくといいです。
Macの場合：control+comｍand+↑
Windowsの場合：Ctrl+shift+↑
最後にHTMLに<footer>を追加します。
</main>の後ろににカーソルを入れて、エンターキーを押します。
1行空いたところに「footer」と入れてtabキーを押してください。
ここまで出来たら保存をします。
保存の時にインデントの乱れが見えるので、整えてから、保存をするといいです。
Beautifyで整えてもいいし、編集メニューから「保存時にBeautifyする」を選んで置くと便利ですね。
と言っても、タグを追加しただけでは、前回のデザインと何も変わって見えません。
そこで、スタイルシートで<main>タグの背景色を変えましょう！
cssの画面でエンターキーを2回押して行を移動します。
mainの背景を白くしていきます。
main→スペース→｛｝でエンター→background-color→(カラーコードで統一）＃FFFFFF(（白）を入力→;
保存すると、クマのプロフィール部分の背景が白になりました。
この白の範囲が、mainタグで囲まれた範囲となります。
次回はheaderタグの中身を作り込んでいきます。
お楽しみに〜！