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

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

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

編集画面を「index.html」に切り替えてください。
<div id=”ufo”></div>タグの指定を行います。

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

index.html

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

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
左下にうっかりUFOさんが表示されましたか?

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

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

1. 「#cloud .cloud06 {〜}」の下を改行する。
2. ハイライトされている56〜61・63〜65行目の内容の記述を行いましょう。

main.css

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

#cloud .cloud06 {
  top: 1400px;
}

#ufo {
  position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
  left: 50%; /* -- 画面左端から50%に配置 -- */
  bottom: 0; /* -- 画面下端に配置 -- */
  z-index: 2; /* -- Z方向(奥行き)の下から2番目にして#groundより手前に表示する -- */
}

#ufo img {
  display: block; /* -- インライン要素をブロック要素に変更して画像の下の不自然なスペースを消す -- */
}

z-index: 2;(60行目) = Z方向(奥行き)の下から2番目にして#groundより手前に表示する

背景動画のコーディングの際に「Z方向のコーディングの意識」をレクチャーしました。

z-indexプロパティは、要素の重なり順、つまり奥行きの順番の指定をするプロパティです。
Webサイトではコーディング上、先に記述した要素から重なり順が下(奥)になり、
後に記述するにつれ要素の重なり順が上(手前)になる、という性質を持っています。

(中略)

そんな時に活躍してくれるのが「z-index」プロパティです。
z-indexを使って要素の重なり順を意図的に変更することができます。

z-indexで要素の重なり順を指定。 – Webサイトコーディング[NORMAL – Web movie – ] 02 レイアウト配置固定編

今回は後に記述する地面部分の<div id=”ground”></div>よりもUFOを手間に表示させるために、
「z-index: 2;」の指定によってZ方向の重なり順の操作を行っています。

display: block;(64行目) = インライン要素をブロック要素に変更して画像の下の不自然なスペースを消す

UFOは<img />タグの画像で表示されています。
<img />タグはインライン要素というのはレクチャーしましたが、
実はインライン要素にはやっかいな性質があり、画像の周りに不自然なスペースを生むことがあります。

今回はインライン要素の<img />タグをブロック要素にして、
どうしても発生してしまう変なスペースを消してしまおう、という実装ですね。

ブラウザで確認する

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

うっかりUFOさんがページの一番下、画面中央のやや右に表示されましたか?
表示されたら「position: absolute;left: 50%;bottom: 0;」が効いている証拠ですね。

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

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

編集画面を「index.html」に切り替えてください。
<div id=”ground”></div>タグの指定を行います。

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

index.html

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

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
この時点では何も表示されていませんね。

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

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

1. 「#ufo img {〜}」の下を改行する。
2. ハイライトされている67〜75行目の内容の記述を行いましょう。

main.css

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

#ufo img {
  display: block;
}

#ground {
  width: 100%;
  height: 60px;
  position: absolute; /* -- 地面を絶対配置に指定 -- */
  left: 0; /* -- 画面左端に配置 -- */
  bottom: 0; /* -- 画面下端に配置 -- */
  background: url(../img/ground.png) repeat-x left bottom; /* -- 背景画像の指定 描画をX方向(横方向)に繰り返す 左下から描画 -- */
  z-index: 1; /* -- Z方向(奥行き)の1番下 -- */
}

z-index: 1;(74行目) = Z方向(奥行き)の下から1番目にして#ufoより奥に表示する

先ほどUFOを手前にしましたが、地面には「z-index: 1;」を設定し奥に配置しました。

ブラウザで確認する

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

UFOより奥に地面が表示されましたか?
では最後に「カスタムデータ属性」を使用したアニメーションを実装しましょう。

Webサイトコーディング[HARD] 04 #cloud・#ufoアニメーション編