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

div#ufoタグのhtml・cssコーディング

div#ufoタグのhtmlコーディング

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

1. div#cloudタグの終了タグとscriptタグの開始タグの間(17行目・18行目の間)を改行する。
2. ハイライトされている18行目の内容を記述する。

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 {〜}」(14行目～29行目)の下を改行する。
2. ハイライトされている31〜39行目の内容の記述を行いましょう。

main.css

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

#cloud {
  width: 100%;
  height: 1400px; /* -- アニメーションのためにコンテンツの高さを確保 -- */
  position: relative; /* -- 子要素が基準点を左上に設定できるように指定 -- */
  div {
    position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
    &.cloud01,
    &.cloud03 {right: 50%;} /* -- 画面右端から画面半分の位置 -- */
    &.cloud02,
    &.cloud04 {left: 50%;} /* -- 画面左端から画面半分の位置 -- */
    &.cloud01 {top: 300px}; /* -- 画面上端から400pxの位置に指定 -- */
    &.cloud02 {top: 500px;} /* -- 画面上端から600pxの位置に指定 -- */
    &.cloud03 {top: 700px;} /* -- 画面上端から800pxの位置に指定 -- */
    &.cloud04 {top: 900px;} /* -- 画面上端から1000pxの位置に指定 -- */
  }
}

#ufo {
  position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
  left: 50%; /* -- 画面左端から50%に配置 -- */
  bottom: 0; /* -- 画面下端に配置 -- */
  z-index: 2; /* -- Z方向(奥行き)の下から2番目 -- */
  img {
    display: block; /* -- インライン要素をブロック要素に変更して画像の下の不自然なスペースを消す -- */
  }
}

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

z-indexは「重なり順の指定」です。数値が大きいほど手前に表示されます。

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

(中略)

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

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

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

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

UFOはimgタグの画像で表示されています。
imgタグはインライン要素ですが、実はインライン要素にはやっかいな性質があり、画像の周りに不自然なスペースを生むことがあります。
今回はインライン要素のimgタグをブロック要素にして、どうしても発生してしまう変なスペースを消してしまおう、という実装ですね。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存Ctrl + Sし、ブラウザで「index.html」を開いてページを更新F5キーしてみましょう。
うっかりUFOさんがページの一番下、画面中央のやや右に表示されましたか?
表示されたら「position: absolute;(32行目)left: 50%(33行目);bottom: 0;(34行目)」が効いている証拠ですね。

div#groundタグのhtml・cssコーディング

div#groundタグのhtmlコーディング

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

1. div#ufoタグとscriptタグの開始タグの間(18行目・19行目の間)を改行する。
2. ハイライトされている19行目の内容を記述する。

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 {～}」(31行目～39行目)の記述の下を改行する。
2. ハイライトされている41〜49行目の内容の記述を行いましょう。

main.css

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

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

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

ブラウザで確認する

書き換えができたら「main.css」を上書き保存Ctrl + Sし、ブラウザで「index.html」を開いてページを更新F5キーしてみましょう。
UFOより奥に地面が表示されましたか?最後に「カスタムデータ属性」を使用したアニメーションを実装しましょう。

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