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

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

なおこの記事では、Emmet記法によるコーディングを行い、随所にFlexboxによるレイアウトを行っています。
そのためますので最低限Emmet記法、そしてFlexboxの仕組みの理解が必要です。

より深い理解のために、以下のEmmetについて解説した記事、
またFlexboxについて解説した記事を参照しつつ進めてください。

HTML・CSSはEmmetで爆速コーディングを行おう!

[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!Flexbox

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

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

LEVEL NORMAL

完成予想図:PC

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

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

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

そしてスマートフォンなどに表示最適化対応を行なった状態が以下。
左が初期表示状態で、右がナビゲーションを表示させた状態です。

コーディングのポイント

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

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

今回のコーディングの目的は「1つのコードで複数パターンの見た目を作る」ことです。
また、JavaScriptを使用してリアルタイムで変化のあるメニュー開閉の仕組み(ドロワーメニュー)の実装、
そしてWebサイトのトップページで目にすることが多いスライドショーの実装もポイントです。

サンプルファイルのダウンロード

今回は以下の圧縮ファイル「html02.zip」をダウンロードして展開して使用してください。

html02圧縮ファイル:ダウンロードリンク

手順は以下。

1. 「右クリック→すべて展開→展開」で展開しておく。
2. USBメモリなど次回以降データを失わない場所に移動する。
   ※紛失した場合最初からやり直しになります

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

ではVisual Studio Codeを起動し、「ファイル >フォルダーを開くCtrl + K → Ctrl + O」で展開した「html02」フォルダを選択して開き、
エクスプローラーパネルにある「index.html」をダブルクリックして編集モードで開いてください。
また、ブラウザ確認のためindex.htmlをブラウザの別タブにドロップして開いておきましょう。
(不明の場合・・・起動とフォルダ準備手順)

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