こんにちは、yutaです。
今回は、WEBサイト作成時のテクニックに関する記事なんですが、記事のタイトルの語彙力・・・笑 とりあえず、↑のGIFのようにする方法です。このやり方を解説します！
1.追加するのは4行だけ！！
2.ビフォー&アフター(GIF)
3.コード(HTML/CSS)
1.追加するのは4行だけ！！
やり方は簡単です。たった4行追加するだけです。
まずは、追加する前のWEBサイトとコードを見てみましょう。
↓のHTMLでは、<div class=”top”>に<h1>を入れて、ヘッダー画像的なもの(画像じゃないですが)を作っています。あとは、<div class=”photo”>に<img>を使ってたくさん画像を貼り付けているだけです。
↓のCSSでは、隙間を無くす処理をしています。でも、今回の内容に直接的な関係はありません。ただ、見た目を良くしているだけです。
さて、↑のGIFを見てお気づきだとは思いますが、スクロールすると要素全体がスクロールされます。
今回目指しているのは、「ヘッダー画像だけはトップに固定されたままで、その他の全要素をスクロール」です。
で、それを実現するために追加する4行は以下。
1行: position: fixed;
これは、CSSの.top{}内に記述します。.topはヘッダーを記述しているエリア(div/↑のHTMLで10行目)の表示設定を行うクラスです。
positionをfixed指定することにより、その要素を画面上のある位置に固定することができます。(absoluteとの違いは、スクロールしても常に画面上の指定位置に固定されることです。)
2行: z-index: -1;
これは、↑のfixedの下の行に記述します。z-indexは要素の重なり順を決める値です。マイナス値にすると他の要素の下に重なるので画面上では見えなくなります。
3行: position: absolute;
これは、CSSの.photo{}内に記述します。.photoは<img>で画像をたくさん貼り付けているエリア(div/↑のHTMLで15行目)の表示設定を行うクラスです。
positionをabsolute指定することにより、要素の表示位置を親要素を基準に指定できます。今回、親要素はbodyですね。
↓だとdivの親要素はbody
<body>
<div>
</div>
</body>
↓だとdiv2の親要素はdiv1
<body>
<div class=”div1″>
<div class=”div2″>
</div>
</div>
</body>
4行: top: 300px;
これは、↑のabsoluteの下の行に記述します。top:○pxで画面の上から○px下に要素を表示することができます。300pxとしているのは、ヘッダーの高さが300pxなのでそれに合わせています。fixedとは異なり、スクロールするとabsolute指定された要素も移動します。
2.ビフォー&アフター(GIF)
では、上記4行を追加した後のWEBサイトを確認して見ます。
一応、4行追加する前のWEBサイトももう一度載せますね。
3.コード(HTML/CSS)
プログラミングの解説をしているサイトがたくさんあるんですが、多くのサイトでは、コードの一部しか載せていない場合が多いです。
一部だけコードが分かっても「結局どう書けば動くんだ〜！」と頭を抱えた経験がたくさんあります・・・。なので僕は、そういう人を減らすために全コードを公開しています。
HTML: 1で表示したコードと全く同じです。
CSS: 1で表示したコードに4行追加しています。
今回はこれで以上となります。少しCSSを工夫するだけでWEBサイトが一段とかっこ良くなりますね！
ブログランキングに参加しています。↓のバナーをクリックしていただけると嬉しいです。では、また！
