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

Webサイトのコーディング練習を行いましょう。
今回の難易度は「★★★(HARD)」です。

この記事の目次

1 ALL INDEX
2 完成予想図・ポイントの確認
- 2.1 完成予想図
- 2.2 コーディングのポイント
3 構成ファイルのダウンロード・解凍・確認
4 テンプレート部分のHTML・CSSコーディング
- 4.1 テンプレート部分のHTMLの確認
- 4.2 テンプレート部分のCSSの確認

ALL INDEX

01 準備・確認編

完成予想図・ポイントの確認
構成ファイルのダウンロード・解凍・確認
テンプレート部分のHTML・CSSコーディング

02 body・#cloud編

03 #ufo・#ground編

04 #cloud・#ufoアニメーション編

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

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

LEVEL HARD – Scroll Animation –

完成予想図

コーディングのポイント

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

行う作業は「スクロールアニメーションのためにjQueryプラグインの読み込み」、
そして「htmlの記述で雲とUFOにアニメーションを加える」実装の2工程。
雲に個別に違う動きをさせるために「カスタムデータ属性」を使ってアニメーションを実装する。

今回のコーディングの目的は、
「カスタムデータ属性を使ったスクロールアニメーション」を理解することです。
なお「カスタムデータ属性」については以下を参考に。

htmlのタグに固有の値を付与してcssやjavascriptでその値を取得して利用できるようにしたもの。

【備忘録】カスタムデータ属性(data-*)について #JavaScript – Qiita

今回の場合、雲の<img />を囲った<div></div>タグに対し、
「カスタムデータ属性」を付与してアニメーションさせています。

構成ファイルのダウンロード・解凍・確認

構成ファイルのダウンロード・解凍

今回は時短のためhtmlファイルやimgファイル、cssファイルなどの構成ファイルはすでに準備しています。
ひとまず構成ファイル「html04.zip(zip圧縮データ)」をダウンロードしておきましょう。
※IDとPASSは講義で伝えます。

https://webcre8tor.com/data/coding/html04.zip

ダウンロードが終わったら構成ファイルを解凍しましょう。

構成ファイルの確認

ダウンロードした圧縮ファイル「html04.zip」を解凍すると「html04」というフォルダがあり、そのファイル・フォルダ構成は以下の画像のようになっているはずです。

フォルダ・ファイルの確認ができたら、
自分で管理できる場所に「html04」フォルダごと移動してください。

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

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

テンプレート部分のHTML・CSSコーディング

今回、テンプレート部分は既に記述を行なっています。

テンプレート部分のHTMLの確認

まずはindex.htmlを開き、テンプレート部分のHTMLを確認しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<title>LEVEL HARD - Scroll Animation - </title>
</head>
<body>
</body>
</html>

問題ないですか??

テンプレート部分のCSSの確認

次にcss/main.cssを開き、テンプレート部分のCSSを確認しましょう。

main.css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

今回は前回よりも記述を省略しています。

続いて、<body></body>全体に対しての指定と、
雲である<div id=”cloud”></div>の指定を行いましょう。

Webサイトコーディング[HARD] 02 body・#cloud編

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

Sponsored Link