WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの実践:HARD] 02 body・#cloud編
実践編

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

2023年12月25日 ／最終更新：2024年11月14日

スクロールアニメーションのコーディング練習02 body・#cloud編

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

この記事の目次

jQueryプラグインの導入ためのhtmlコーディング

さっそくjQueryプラグインの導入ためのhtmlコーディングを行いましょう。
index.htmlとmain.cssへの記述をしながらコード上で説明します。

今回はスクロールアニメーションを簡単に実装することができる、
jQueryプラグイン「skrollr」を導入してみましょう。

skrollr – parallax scrolling for the masses (prinzhorn.github.io)

画面を「index.html」のタブに切り替えましょう。
また、「html04」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。

またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう

スクロールアニメーション実装のためのhtmlコーディング

まずは「index.html」のコーディングですので、編集画面を「index.html」に切り替えてください。

  1. 6行目の<link rel=”stylesheet” href=”css/main.css”>の下を改行する
  2. ハイライトされている7・8行目の内容を記述する。

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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js" integrity="sha512-A2+khatRDWHUE2VUtN4xUTkr1nc4YfDBw9Sg3ea6x0aRPfpcYieDZji4D2edDHy/yF5NsYzP7kL8sSM8s5EqCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>LEVEL HARD - Scroll Animation - </title>
</head>
<body>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

変化はありませんが使用する準備はできました。
早速コンテンツを書いていきましょう。

<body></body>タグのhtml・cssコーディング

<body></body>タグのhtmlコーディング

編集画面を「index.html」に切り替えてください。
以前まではJavaScriptの発動指示は最後にしていましたが、
今回はアニメーション自体がメインになるため最初に記述してしましょう。

  1. <body></body>タグの終了タグの上を改行する。
  2. ハイライトされている12～14行目の内容を記述する。

index.html

<!-- 上部省略 -->
<body>
<script>
  skrollr.init();
</script>
</body>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

「body {}」のcssコーディング

「body {}」のCSSコーディングを行いましょう。
編集画面を「main.css」に切り替えてください。

  1. 「* {～}」の下を改行する。
  2. ハイライトされている9〜12行目のコードの追記を行いましょう。

main.css

@charset "UTF-8";

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

body {
  position: relative; /* -- 子要素が基準点を親要素に設定できるように指定 -- */
  background: linear-gradient(to bottom, rgb(52,152,219) 0%,rgb(255,255,255) 100%); /* -- body {} の背景に空の上(青)から下(白)のグラデーションを生成 -- */
}

position: relative;(10行目)= 子要素が基準点を親要素に設定できるように指定。

まず10行目の「position: relative;(以下:基準点指定)」は、
子要素のためのアニメーションの基準となる座標(親要素の左上0,0)を指定しています。

これは子要素に「position: absolute;(以下:絶対配置指定)」の指定がある場合は必須の指定で、
理由として、絶対配置指定をする要素には必ず「基準点」が必要になるのですが、
基準点は「親要素」以外の祖先要素(もっと上の階層のブロック要素)にも指定できてしまうためです。

指定がない場合、子要素は「基準点指定がある祖先要素」をさかのぼって探し、
見つけ出した基準点指定のあるブロック要素を基準点に設定します。

そうなると意図しない位置からのアニメーションになってしまう可能性があるため、
親要素には必ず基準点指定が必要です。

background: linear-gradient(～);(11行目)= body {} の背景に空の上(青)から下(白)のグラデーションを生成。

次に「body {}」の背景に対してグラデーションを実装しているのが、
11行目の「background: linear-gradient(to bottom, rgb(52,152,219) 0%,rgb(255,255,255) 100%);」です。

値「linear-gradient」の括弧の中に向きとポイントと色を指定しており、
今回の場合、「to bottom」は「上から下へ向かって」、
「rgb(52,152,219) 0%」は「0%地点(上)はrgb(52,152,219)の色(青)」、
「rgb(255,255,255) 100%)」は「100%地点(下)はrgb(255,255,255)の色(白)」
という指定になります。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
上から下に向けて空のようなグラデーションが発生していますか?

<div id=”cloud”></div>タグのhtml・cssコーディング

<div id=”cloud”></div>タグのhtmlコーディング

編集画面を「index.html」に切り替えてください。
次に雲のアニメーションのベースとなる親要素のブロック、
<div id=”cloud”></div>タグの指定を行います。

  1. <body></body>タグの開始タグと<script></script>タグの開始タグの間を改行する。
  2. ハイライトされている12・13行目の内容を記述する。

index.html

<!-- 上部省略 -->
<body>
<div id="cloud">
<!-- / #cloud --></div>
<script>
  skrollr.init();
</script>
</body>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
変化はありませんね。

<div class=”cloud01″></div>～<div class=”cloud06″></div>タグのhtmlコーディング

次にアニメーションする雲を追加しましょう。

  1. <div id=”cloud”></div>タグの開始タグと終了タグの間を改行する。
  2. ハイライトされている13～18行目の内容を記述する。

index.html

<!-- 上部省略 -->
<body>
<div id="cloud">
  <div class="cloud01"><img src="./img/cloud01.png" alt="" /></div>
  <div class="cloud02"><img src="./img/cloud02.png" alt="" /></div>
  <div class="cloud03"><img src="./img/cloud03.png" alt="" /></div>
  <div class="cloud04"><img src="./img/cloud04.png" alt="" /></div>
  <div class="cloud05"><img src="./img/cloud05.png" alt="" /></div>
  <div class="cloud06"><img src="./img/cloud06.png" alt="" /></div>
<!-- / #cloud --></div>
<script>
  skrollr.init();
</script>
</body>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
上から順番に雲が規則正しく並んでいますね。

「#cloud {}」のcssコーディング

編集画面を「main.css」に切り替えてください。

  1. 先ほど記述した「body{〜}」の下を改行する。
  2. ハイライトされている14〜18行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

body {
  position: relative;
  background: linear-gradient(to bottom, rgb(52,152,219) 0%,rgb(255,255,255) 100%);
}

#cloud {
  width: 100%;
  height: 2000px; /* -- アニメーションのためにコンテンツの高さを確保 -- */
  position: relative; /* -- 子要素が基準点を左上に設定できるように指定 -- */
}

height: 2000px;(16行目) = アニメーションのためにコンテンツの高さを確保

16行目で「height: 2000px;」として高さを指定していますね。
指定理由として、子要素を絶対配置指定した場合の親要素は高さを保つことができず、
アニメーションを問題なく行うためにキャンバスに確実に高さを持たせている状態です。

position: relative;(17行目)= 子要素が基準点を親要素に設定できるように指定。

「body {}」の際にも行いましたが、子要素である雲「<div class=”cloud01～cloud06″>」は、
後ほどそれぞれに個別でアニメーションをさせるため絶対配置指定を行います。
親要素である「#cloud {}」に基準点指定を行うことでアニメーションに対応します。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
コンテンツがない状態でもアニメーションキャンバス分の高さ(2000px)を保っていますね。

「#cloud .div {}」のcssコーディング

編集画面を「main.css」に切り替えてください。

  1. 先ほど記述した「#cloud {〜}」の下を改行する。
  2. ハイライトされている20〜22行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud {
  width: 100%;
  height: 2000px;
  position: relative;
}

#cloud div {
  position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
}

セレクタ「#cloud div 」(20行目) = アニメーションさせる雲の要素をまとめて絶対配置に指定

21行目の絶対配置指定は説明不要だと思いますが、
問題は20行目の「#cloud div 」としたセレクタのほうですね。

一言で言えば「<div id=”cloud”>の子要素の<div></div>タグに適用」という指定ですので、
すなわち対象は「<div class=”cloud01″>」から「</div>～<div class=”cloud06″></div>」まで、
「内側のすべての<div></div>タグ」ということになります。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

左上に雲がすべて重なってしまいました。
絶対配置(position: absolute;)により他の要素に影響を受けないため、
すべて初期値である左上に配置されるからです。

ここからそれぞれの位置に移動してあげましょう。

「#cloud .cloud01 ～ #cloud .cloud06 {}」をまとめてのcssコーディング

続いて「main.css」を編集していきます。

  1. 先ほど記述した「#cloud div {〜}」の下を改行する。
  2. ハイライトされている24〜26・28〜30行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud div {
  position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
}

#cloud .cloud01,
#cloud .cloud03,
#cloud .cloud05 {right: 50%;} /* -- 画面右端から画面半分の位置 -- */

#cloud .cloud02,
#cloud .cloud04,
#cloud .cloud06 {left: 50%;} /* -- 画面左端から画面半分の位置 -- */

right: 50%;(26行目)・left: 50%;(28行目) = 画面を中央から分けて左右のどちら側に置くかの指定

「#cloud .cloud01, #cloud .cloud03, #cloud .cloud05」に対して「right: 50%;」を
「#cloud .cloud02, #cloud .cloud04, #cloud .cloud06」に対して「left: 50%;」を指定しています。
ここで今一度サンプルの「LEVEL HARD」を見てみましょう。
左上から右下に向けて6つの雲がアニメーションで出現しています。

これらは上から出現順に「.cloud01」～「.cloud06」となっており、
「.cloud01」「.cloud03」「.cloud05」は画面の左側、
「.cloud02」「.cloud04」「.cloud06」は画面の右側にありますね。

つまり、画面左側の雲には「right: 50%;」を指定して、
画面右側の雲には「left: 50%;」を指定していることになります。

左側にあるのに「right?」右側にあるのに「left?」と疑問に思う事でしょう。
下の画像を見てみましょう。

まずこの場合の「50%」は画面半分のサイズであり、その上で考えると、
要素を画面の左側に置くためには、画面右端から画面半分の距離をとる必要があり、
要素を画面の右側に置くためには、画面左端から画面半分の距離をとる必要があります。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

今度は画面中央を基準にして左右に雲が分かれました。

「#cloud .cloud01 ～ #cloud .cloud06 {}」の個別のcssコーディング

続いて「main.css」を編集していきます。

  1. 先ほど記述した「#cloud .cloud02, #cloud .cloud04, #cloud .cloud06 {〜}」の下を改行する。
  2. ハイライトされている32〜34・36〜38・40〜42・44〜46・48〜50・52〜54・56〜58行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud .cloud02,
#cloud .cloud04,
#cloud .cloud06 {left: 50%;}

#cloud .cloud01 {
  top: 400px; /* -- 画面上端から400pxの位置に指定 -- */
}

#cloud .cloud02 {
  top: 600px; /* -- 画面上端から600pxの位置に指定 -- */
}

#cloud .cloud03 {
  top: 800px; /* -- 画面上端から800pxの位置に指定 -- */
}

#cloud .cloud04 {
  top: 1000px; /* -- 画面上端から1000pxの位置に指定 -- */
}

#cloud .cloud05 {
  top: 1200px; /* -- 画面上端から1200pxの位置に指定 -- */
}

#cloud .cloud06 {
  top: 1400px; /* -- 画面上端から1400pxの位置に指定 -- */
}

top: XXXpx; = 画面上端からXXXpxの距離を取る指定

今度は「.cloud01」から「.cloud06」までのそれぞれに「top」プロパティを使い、
画面上端からの距離を取る指定を行いました。

例えば「.cloud01」には「top: 400px;」と指定していますが、
画面上端から400px分の距離を取っている指定になりますし、
「.cloud06」の「top: 1400px;」は画面上端から1400px分の距離を取っている指定になります。

「top」プロパティにそれぞれ違う数値を指定して位置に差をつけたため、
空の上の雲を自由にレイアウトし実現した状態です。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
雲がそれぞれの位置につきましたか?

続いて、人違いをした<div id=”ufo”></div>に対しての指定と、
地面である<div id=”ground”></div>への指定を行いましょう。

Webサイトコーディング[HARD] 03 #ufo・#ground編

RELATED POST関連記事

© 2024 RYU-YA DESIGN.

PAGE TOP
offcanvas