[実践編] [コーディングの実践:NORMAL] 01 準備・確認編 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

Webサイトのコーディング練習を行いましょう。
今回の難易度は「★★☆(NORMAL)」前回より少し難易度を上げたコーディングになります。

この記事の目次

ALL INDEX

まずは完成したコーディングはこちら。

LEVEL NORMAL

PC版の初期表示状態は以下。

そしてナビゲーション表示状態は以下。

PC版の初期表示状態は以下。

そしてナビゲーション表示状態は以下。

コーディングのポイントは以下。

行う作業は「JavaScriptで三本線ボタンをクリック(タップ)したら開閉するメニュー、通称:ドロワーメニュー」の実装、そして「レスポンシブWebデザインによって端末ごとの表示を最適化」する2工程。
ドロワーメニューでは<header></header>タグの中の<nav></nav>タグの文字列のグローバルナビゲーションを削除し、三本線ボタン、通称:ハンバーガーメニューに変更。
レスポンシブWebデザインでは閲覧が困難なブロックを部分的に調整していく。

今回のコーディングの目的は「1つのコードで複数パターンの見た目を作る」ことです。
また、JavaScriptを使用してリアルタイムで変化のあるメニュー開閉の仕組み(ドロワーメニュー)もポイントの一つです。

前回までにコーディングを行った「html01」を使用してコーディング練習を行います。
そのため「html01」フォルダを複製(コピー&ペースト)しましょう。
さらに、複製すると「html01 – コピー」などのフォルダ名になっているはずですので、
「html02」にリネームしましょう。

手順は以下。

次に、Visual Studio Codeを開き、Visual Studio Codeのウィンドウ内に「html02」フォルダをドラッグ&ドロップして、
「index.html」「main.css」のファイルを開いておきましょう。

このデータの<head></head>タグ内に外部のCSSファイルやJavaScriptファイルを読み込んだり、
読み込んだJavaScriptを発動させてハンバーガーメニューを表示させる準備をしましょう。

[コーディングの実践:NORMAL] 02 JavaScriptでドロワーメニュー実装編