[コーディングの実践]LEVEL NORMAL

headセクションへのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。

titleタグのhtmlコーディング

まずは今回コーディングするhtmlファイルの名称を変更します。
名称はtitleタグに打ち込むことでブラウザのタブに表示されます。

文字列を変更する

まずは前回と同じようにtitleタグの文字列変更を行いましょう。
ハイライトされているtitleタグ内の文字「EASY」を「NORMAL」に書き換えておきましょう。

1. titleタグ内の「EASY」を「NORMAL」に書き換える。
2. index.htmlを上書き保存Ctrl + Sする。
3. コード記述・展開前および展開後を確認する。
4. ブラウザで確認する。

head内にコピペで外部ファイルをまとめて読み込む

まずは以下の作業を行ってください。

なお下記❷の際に表示が変わりますが、ペーストしたコードが長すぎて表示に収まりきらないためです。
下のスクロールバーを左に動かすか、キーボードのHome(場合によってはFn+Home)を押すと表示位置が戻ります。
❸を行う前に表示位置を戻しておきましょう。

1. Drawerのサイトの「Step 1: Link required files」の「CDN」にあるコードをコピーする。
2. 「style.css」を読み込んでいる次の行を改行して❶でコピーしたコードをペーストする。
3. ❷でペーストしたコードをドラッグで複数選択し、[Tab]キーで行頭を揃える。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。
6. ブラウザで確認する。

bodyセクションへのドロワーメニューのためのhtmlコーディング

bodyタグへclass属性と属性値を追加する

次にbodyタグへclass属性と属性値を追加しましょう。
これにより、ドロワーメニューが開く適用対象をbody全体にすることができます。

1. bodyタグの開始タグにclass属性を追加し、属性値に「drawer」「drawer–right」と複数指定する。
   ※「drawer–right」の「drawer」と「right」の間のハイフンは2つです!
2. index.htmlを上書き保存Ctrl + Sする。
3. コード記述位置・展開前および展開後を確認する。

bodyにコピペでボタン&メニューを記述する

今度はハンバーガーメニューのbuttonタグ、そして開閉するドロワーメニューのnavタグを新たに追加しましょう。
注意点として、この2点はdiv#footeタグの終了タグとbodyタグの終了タグの間に追記します。
追記場所を間違えないようにしましょう。

1. Drawerのサイトの「Step 2: Markup」の<button>〜</button>および<nav>〜</nav>のコードをコピーする。※他のコード部分は不要です!
2. div#footerタグの終了タグとbodyタグの終了タグの間を改行して❶でコピーしたコードをペーストする。
3. index.htmlを上書き保存Ctrl + Sする。
4. コード記述・展開前および展開後を確認する。
5. ブラウザで確認する。

コピペしたコードのうち、<button>〜</button>は3本線のボタンで「ハンバーガーメニュー」と呼ばれるもの、
<nav>〜</nav>はハンバーガーボタンをクリック(タップ)した時に表示されるドロワーメニューの本体の記述です。
この記述によって右上にハンバーガーメニューが現れましたか?クリックしてもドロワーメニューは動作しませんね。
実はもう動作自体は準備してあるんですが、発動命令を出してあげなければ動きません。

javascriptファイルを動かす命令のためにscriptタグを記述する

今度はクリックするハンバーガーメニューも開閉するドロワーメニューも準備は整ったので、あとは「発動命令」をだすだけです。
発動命令を出すにはscriptタグというhtmlタグを使用します。まずはhtmlファイルにscriptタグを追加しましょう。

1. 先ほど追記したnavタグの終了タグとbodyタグの終了タグの間を1行開け、
   以下の②の文字列を打ち込んで行末で[Tab]キーを押し、開始タグと終了タグの間を改行する。
2. script[Tab]
3. index.htmlを上書き保存Ctrl + Sする。
4. コード記述・展開前および展開後を確認する。
5. ブラウザで確認する。

scriptタグにコピペでjavascriptを動かす命令を記述する

では「buttonタグをクリック(タップ)したらnavタグのメニューが現れる」という動きを実装するために、
scriptタグ内に記述をコピーペーストしましょう。

1. Drawerのサイトの「Step 3: Call the Drawer」にあるコードをコピーする。
2. scriptタグの開始タグと終了タグの間に❶でコピーしたコードをペーストする。
3. ❷でペーストしたコードをドラッグで複数選択し、[Tab]キーで行頭を揃える。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。
6. ブラウザで確認する。

ハンバーガーメニューをクリックしてドロワーメニュー開閉は動作しましたか?

div#headerタグのhtmlコーディング

h1.logoタグを書き換え、div#headerタグ内のulを丸ごと削除する

titleタグの文字列は「LEVEL NORMAL」に変更しましたが、headerタグの中のh1タグはまだ「LEVEL EASY」のままでしたよね。
こちらを「LEVEL NORMAL」に書き換えましょう。
また、ハンバーガーメニューが現れたことによりheaderタグの中のnavタグは不要になったため削除しておきましょう。

1. h1.logoタグ内の「EASY」を「NORMAL」に書き換える。
2. コード記述・展開前および展開後を確認する。
3. div#headerタグ内の<ul>〜</ul>をドラッグして全て選択する。
4. キーボード[Delete]で削除する。
5. index.htmlを上書き保存Ctrl + Sする。
6. コード記述・展開前および展開後を確認する。
7. ブラウザで確認する。

左上のグレーのロゴの文字列が「LEVEL NORMAL」に変化していれば書き換え成功です。
また、右上にあった「TOP」「PROFILE」の文字列は消えているでしょうか?

div#headerタグのcssコーディング

編集画面を「style.css」のタブに切り替えましょう。

div#headerセレクタ内のulを丸ごと削除する

style.cssに記述したdiv#header内のulセレクタはhtmlファイルに要素が存在しなくなったため不要です。
ドロワーメニューとして追加したnavタブとの誤動作防止のためにも記述を削除しておきましょう。

1. div#header内のulセレクタの記述をドラッグして全て選択する。※宣言ブロックの{}を間違えないように!
2. キーボード[Delete]で削除する。
3. style.cssを上書き保存Ctrl + Sする。
4. コード記述・展開前および展開後を確認する。
5. ブラウザで確認する。

これで閲覧するのがPCでもスマホでも、ハンバーガーメニューをクリック(タップ)すればドロワーメニューが表示されます。
以上がドロワーメニュー開閉に必要な内容でした。