ウェブデザインA 第14回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
また「Visual Studio Code」 を起動しておきましょう。

Webサイトコーディング[NORMAL]のhtml・cssコーディング

それでは今日のコーディングを始めていきましょう。

前回の続きの「LEVEL NORMAL」を完成させましょう、
引き続きのスマホ対応やjQueryプラグインを使用したスライドショーのコーディングになります。
なお可能な限り習得したばかりのEmmet機能を使ってコーディングを行ってみましょう。

今回は以下の最大2件の記事の学習を行います。

[コーディングの実践:NORMAL] 04 jQueryプラグインでスライドショー実装編

課題の提出

「LEVEL NORMAL」のコーディングを行った「html02」フォルダのデータを提出しましょう。
提出用に「html02」フォルダをまるごとzip形式で圧縮してください。

「html02」フォルダをzip形式で圧縮

まず、「html02」フォルダ圧縮の手順は以下。

1. 「html02」フォルダを右クリックして、「圧縮先」→「ZIPファイル」を選択してzipファイルを作る。
2. 圧縮したzipファイルのファイル名を「学籍番号_level_normal」に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。
zip形式以外のファイルだと送信の際にエラーが出て送信ができませんので、
必ず「html02」フォルダをまるごと圧縮してzip形式で提出してください。

ウェブデザインA 第13回 LEVEL NORMAL 課題提出フォーム

なお提出期限は、次回の授業開始前までとします。

Webサイトコーディング[HARD]のhtml・cssコーディング

それでは今日のコーディングを始めていきましょう。
「LEVEL HARD」であるスクロールアニメーション実装のコーディングになります。
今回は以下の最大3件を行いましょう。

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

[コーディングの実践:HARD] 02 body・#cloud編

[コーディングの実践:HARD] 03 #ufo・#ground編

最終回はスクロールアニメーション作品作り

今回はスクロールアニメーションの一通りの実装方法をレクチャーしました。
最終回はこの実装をベースに細かい動きや読み込む画像・背景などのカスタマイズをして、皆さんの最終的な作品を作り上げてもらいたいと思います。
最後に一緒にコーディングを楽しみましょう!