|Liberty自由に生きる。【CSS】画面スクロールでヘッダー画像の上にコンテンツを表示する方法HTML・CSS|プログラミングこんにちは、yutaです。↑のGIFのようにする方法です。このやり方を解説します!1.追加するのは4行だけ!!2.ビフォー&アフター(GIF)3.コード(HTML/CSS)1.追加するのは4行だけ!!やり方は簡単です。4行追加するだけです。追加する前のWEBサイトとコードを見てみましょう。class=”top”>に<h1>を入れて、ヘッダー画像的なもの(画像じゃないですが)を作っています。class=”photo”>に<img>を使ってたくさん画像を貼り付けているだけです。↓のCSSでは、隙間を無くす処理をしています。今回の内容に直接的な関係はありません。見た目を良くしているだけです。↑のGIFを見てお気づきだとは思いますが、スクロールすると要素全体がスクロールされます。今回目指しているのは、「ヘッダー画像だけはトップに固定されたままで、その他の全要素をスクロール」です。それを実現するために追加する4行は以下。fixed;これは、CSSの.top{}内に記述します。.topはヘッダーを記述しているエリア(div/↑のHTMLで10行目)の表示設定を行うクラスです。positionをfixed指定することにより、その要素を画面上のある位置に固定することができます。(absoluteとの違いは、スクロールしても常に画面上の指定位置に固定されることです。-1;これは、↑のfixedの下の行に記述します。z-indexは要素の重なり順を決める値です。マイナス値にすると他の要素の下に重なるので画面上では見えなくなります。absolute;これは、CSSの.photo{}内に記述します。.photoは<img>で画像をたくさん貼り付けているエリア(div/↑のHTMLで15行目)の表示設定を行うクラスです。positionをabsolute指定することにより、要素の表示位置を親要素を基準に指定できます。今回、親要素はbodyですね。300px;これは、↑のabsoluteの下の行に記述します。top:○pxで画面の上から○px下に要素を表示することができます。300pxとしているのは、ヘッダーの高さが300pxなのでそれに合わせています。fixedとは異なり、スクロールするとabsolute指定された要素も移動します。2.ビフォー&アフター(GIF)では、上記4行を追加した後のWEBサイトを確認して見ます。スクロールするとヘッダーの上を画像が通過する一応、4行追加する前のWEBサイトももう一度載せますね。スクロールすると全体が移動3.コード(HTML/CSS)プログラミングの解説をしているサイトがたくさんあるんですが、多くのサイトでは、コードの一部しか載せていない場合が多いです。一部だけコードが分かっても「結局どう書けば動くんだ〜!」と頭を抱えた経験がたくさんあります・・・。僕は、そういう人を減らすために全コードを公開しています。1で表示したコードと全く同じです。1で表示したコードに4行追加しています。今回はこれで以上となります。CSSを工夫するだけでWEBサイトが一段とかっこ良くなりますね!ブログランキングに参加しています。↓のバナーをクリックしていただけると嬉しいです。!関連記事はこちらから【スタックコンテキスト】z-index:2が100よりも手前に表示される理由が分からないなら読まないとまずいです。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。