[コーディングの実践:NORMAL] 01 準備・確認編

[コーディングの実践:NORMAL] 01 準備・確認編

2023年12月06日 /最終更新:2024年10月10日

少し発展的なコーディング練習01 準備・確認編

[コーディングの実践:NORMAL] 01 準備・確認編

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

ALL INDEX

01 準備・確認編

  • 完成予想図・ポイントの確認
  • 「html02」フォルダを編集可能な状態にする

02 JavaScriptでドロワーメニュー実装編

03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

04 jQueryプラグインでスライドショー実装編

完成予想図・ポイントの確認

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

LEVEL NORMAL

完成予想図:PC

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

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

完成予想図:スマートフォン

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

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

コーディングのポイント

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

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

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

「html02」フォルダを編集可能な状態にする

「html01」フォルダを複製し「html02」にリネームする

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

手順は以下。

  1. 作成した「html01」フォルダを「Ctrl + C」してコピーし「Ctrl + V」してペーストする。
  2. フォルダ名(おそらく「html01 – コピー」になっている)を「html02」にリネームする。

Visual Studio Codeで「html02」フォルダ・ファイルを開く

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

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

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