忍者CODE

ログイン

1
背景の画像を固定しよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
今回の問題は、背景の画像を固定してスクロールしても画像の位置を変えないというものです。

言葉では伝わりずらいかも知れませんので見本参照してください。

背景の画像を固定しつつ、テキストレイヤーを最上部に持ってきて
背景画像は動かさず、スクロールした際にテキストとグレーエリアだけ動くよう
CSSファイルの指定の3つのセクターを使用して見本どおりに実装してください。

※スクロールできるようにbodyタグにheightで高さとって大丈夫です。
例: body{height: 2000px;}
自分の環境に書くコード
            <section class="block">
    <div class="block__text">
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
    </div>
    <div class="block__layer"></div>
</section>
¥HTML¥
          
            .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
}
.block__layer {
}
.block__text {
}
¥CSS¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <section class="block">
  <div class="block__text">
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div class="block__layer"></div>
</section>
¥HTML¥
          
            .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
    position: relative;
    background-attachment: fixed;
    width: 100%;
    height: 1000px;
}
.block__layer {
    width: 100%;
    height: 1000px;
    background-color: #000;
    opacity: .6;
}
.block__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 20px;
    color: #fff;
    z-index: 1;
}
¥CSS¥
          
答えのアイコン

解説

まずこのデザインのレイヤー(重なり)ですが
下から「画像エリア」「グレーレイヤー」「テキストエリア」の順になっております。

ですので、まず画像エリアにposition: relative;をかけ
テキストエリアには、position: absoluteをかけます。

画像エリアとグレーエリアの幅と高さは共通でOKです。
HTMLは基本、上から下にソースコードを読んでいきますので何もしなければ
テキストエリアがグレーレイヤーの下になり文字が隠れてしまいます。

ですので、文字を囲っているblock要素(.block__text)に対し、z-indexを1付与します。z-indexの値は高ければ高いほど、z軸の最上階になります。

画像を動かさないようにする方法は、画像エリアに対してbackground-attachment: fixed;をかけると背景画像が固定されます。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET