開発者ツールの使い方について
前回から大分時間が空いちゃいましたね。年末はあれこれしてると時間が経つのがあっという間ですね！今まで下記のチャートに沿ってHTMLとCSSを勉強してきたわけですが、今日は次のステップである「開発者ツール」についてまとめていきたいと思います。
開発者ツールでできること
Googole Chromeには「開発者ツール」と呼ばれるものがあります。chromeをブラウザ用途だけて使っている場合はあまり馴染みがない言葉ですね！私もそうです。そんなchromeの開発者ツールとやらを使うと何ができるかというと
- ページのHTML（ソース）が見れる
- ページのCSS設定がどうなっているかが見れる
- CSSの設定やソースをその場で変更し、変更結果ページがどう表示されるのかをその場ですぐ確認できる
- コピーができるため、変更後のソースをそのままコピーした使ったり、ソースを参考にしながらサイト作りができる
といった使い方ができるようです！他にもJavaの設定変更や追加、ネットワークがどうなってるか、etcetc...とできることがいっぱいあるようなのですが、私のような初心者は一先ずHTMLとCSSを簡単に確認でき、変更検証出来て、コピーも簡単！って覚えておけばよさそうですね。
開発者ツールの出し方
ツールの出し方はいたって簡単で、chromeで気になるページを開き、ページ内で右クリック
ページのソースだけ見たい場合は「ページのソースを表示」、ソース含めてCSSやそのほかの設定などもろもろ確認したい場合は「検証」をクリックします。
すると見慣れないコードだらけのウィンドウがchrome内に開きますが、ようはそれが「開発者ツール」と呼ばれるもののようです。
開発者ツールの使い方
このままでは何が何だかさっぱりなので、ツールの見方と主な使い方をみていきます。まずはツールを自分の見やすい配置にします。
右上にある点々をクリックすると、開発者ツールを別ウィンドウでだすか、ページの右側に出すか、左側に出すかなどが選べます。ここは好みで選べばいいんじゃないかなと思いますが、動画では別窓がおすすめされていたので私はとりあえずその設定しておきました。
次にタブがいっぱいで意味がわからないので、主要タブだけでも把握していきます。
- ①Elements … ここにでるのがページのHTML（ソース）です。たまにこじんまりしてることがありますが、 内容が格納されているだけですので、▼をクリックして展開すると中身が全部見れるようになります。
- ②Style … ここがCSSの記述になります。各セレクタ名の右にある文はCSSのファイル名と記載されている行になります。
- ③要素の選択 … ページのここの部分気になるな。どうやって書かれてるんだろう？って思ったら③の選択ツールをクリックしてから、ページ内の気になる場所をクリックすると、開発者ツールでその部分をハイライトしてくれます。いちいちどこに書かれているか自分で探す手間が省ける便利ツール。
- ④画面検証 … パソコンでは今こう見えてるけど、別のデバイスではどう見えてるんだろう？って確認・検証したい場合にクリックするところ。
私のような初心者さんが使う場所は主にこの4つです。このページのここはどんなCSSなんだろう？って思ったら検証ツール開いて、クリックして、開発ツールでふむふむなるほど！ってやればOKみたいです。
各ツールの補足。
要素の選択についてのですが、例えば画面の「ああああ」って場所を選択した場合。HTML画面ではその場所がハイライトされ、Styleタブでは「ここのCSSはこう書かれてるよ！」と教えてくれます。
セレクタ右側に書いてある「style.css」が私がつけた外部CSSの「フィアル名」で、4というのはその外部CSSファイルの4行目に書かれているよ！と丁寧に教えてくれます。自分で修正する場合、どこだっけなーって探さなくて済むので楽ですね！その下の「user agent stylesheet」ですが、これはブラウザごとに定義されたデフォルトのCSS設定のこと。つまり私が用意したCSSではないことを示しています。
画面の検証方法
④の画面検証ですが、ボタンを押すとページの表示が少し切り替わります。上部にある▼を押すと、「ipadで見た場合」「iphone 5で見た場合」「iphone Xで見た場合」など、他デバイスで見た場合そのページがどう見えるか？？という検証ができるようになっています。一番右にあるボタンを押せば画面を回転させた場合の表示も確認することができます。
開発者ツールでできること
さて、主なツールの場所などを確認できたので次はツールの大まかな使い方を見ていきます。先ほども使った画像で見ていきましょう。
まず気になる場所の確認方法は前述の通りですが、更に詳しく見ていきます。
まず今回「h1」セレクタには背景色に青、文字色黒、テキストに白い影をつけているのがわかりますね。開発者ツールのメリットである「CSSを変更した場合どうなるか？」を見てみたい場合。
例えば青色を変えたい場合、青い■をクリックするだけでカラーチャートが現れ、好きな色をクリックするだけで簡単にその色に変えることができます。開発者ツール内の記載を書き換えて食えるだけでなく、それを即時にページにも反映してくれます。文字色、影色も同様に変えることができます。要は色のついた■があれば、そこをクリックするだけで簡単に別色に変えた場合の表示を確認することができるわけですね！
ではここに新しく何かプロパティを追加したい場合は？それも簡単で、追加したいセレクタ内で適当にクリックするだけで新しい行を追加してくれます。あとはそこにプロパティと値をいれてあげるだけで画面に反映させてくれます。
プロパティを消したい場合はプロパティ左側にあるチェックボックスのチェックを外すだけで簡単に非表示することもできます。
勿論これらは全て一時的なものなので、元の状態に戻したい場合はページをリロードするだけでOKです！リロードする際は、変更後の設定を保存する必要がある場合はコピペで保存することを忘れずにしましょう。
CSSに黄色い三角の看板マークが付いている場合
プロパティの左側に黄色い三角に！が描かれたものが表示されている場合、その記述がエラーを起こしていることになります。綴りが違っていたり、値が間違っていたりしている可能性あり。黄色い三角マークが出ている場合そのCSSはうまく適応されていないことになりますので、見付けたら必ず修正しておきましょう。
CSSの記述に打ち消し線がある場合
CSSの記述を見ていると、プロパティと値の部分に打ち消し線がはいっていることがあります。これは下の方に書かれているCSSが適応されているため、上の方に書かれてるこの部分のCSSは適応されてないよ！という意味です。CSSは「より下に書いた記述のほうが優先される」という性質があるのでそのせいですね。
これもCSSがうまく適応されていないサインですが、エラーというわけではないので直すかは人によると思います。外部CSSをいくつも参照してると被ったりページによっては設定が重複してしまうこともあるかもしれませんしね。
開発者ツールを使えば、他サイトのデザインなどの確認だけでなく、編集と確認を同時並行できることがわかりました。他にもいろいろできるみたいですが全部一気に覚えるのはきつそうなので、一先ず今日まとめたことだけでも覚えておこうかと思います！詳細な使い方などは参照サイトを見ていただいたほうが分かりやすいのでそちらも是非どうぞ～！
CSS 勉強まとめ
さてさて、CSSを勉強し始めて4か月。のろのろながらも教材の全動画を勉強し終えたました。HTMLの時同様遅すぎでは？？？という感が否めませんが、途中でやめずコツコツ続けてるだけいいとしよう！
今まで勉強してきたことを記事にまとめてきたわけですが、1回で物になったとは思っていないので、今後の（自分の）見直し用に下記に簡易リンクを設置しておきます。
CSS 勉強まとめ
基礎編
セレクタ編
値編
文字とリスト編
ボックス編
ボックスの配置編
背景編
ボーダー編
以上がいままで勉強したCSSの内容です。フローの通り進めると、次の勉強は「Google Chromeの開発者ツールでCSSを思いのままに操る」と「ブラウザデベロッパーツールの使い方」を覚える事のようです。なんだかちょっと難しそうですが…こちらも勉強次第メモとして記事にまとめていきたいと思います。
影をつける方法について
本日の教材動画はこちら
今回はボックスに影（ドロップシャドウ）をつける方法です。色々なものにつけれるようですが、基本的な使い方は同じとのこと。
box-shadow の使い方について
ボックスに影をつけるには box-shadow プロパティを使います。6つの値があります。
- 水平方向の影のオフセット値（必須）
- 垂直方向の影のオフセット値（必須）
- ぼかしの距離（強さ）
- 広がりの距離
- 影の色
- insetの有無（内側の影にするか）
では順番に見ていきましょう。
水平と垂直方向の影を指定する
まずこの2つはセットです。水平だけ、垂直だけ指定しても影はできませんので注意。使い方としては box-shadow：数値 数値； という風に使います。
またいつものように何の変哲もないページを用意しました。背景を薄い黄色、ボックス内の色を青色にしています。（前回のページを使いまわしてるのでクラス名がradiusになってますが気にしないでください）
ここに影をつけてみましょう。
水平と垂直方向それぞれに20pxの影指定をかけました。それぞれの方向20px分黒い影ができたことがわかります。
次にこの影をぼかしてみましょう。
影のぼかしとして 10px を追加しました（初期値は0で、0の場合は先ほどのようにくっきりした影になります）。box-shadowの値は続けて書かなければいけないためわかりにくいですが、文字化すると「水平に20px、垂直に20px、ぼかしを10pxかける」という設定に現在なっています。
次に影の広がりを設定してみましょう。ついでに影の色も付けてみます。
先ほどと同じような感じで続けて書きます。今回は影の広がりを20px、色を濃い青色になるようにしました。影が20px分広がり、左と上側にまで影がはみ出ているのが分かりますね。
最後に影をボックスの外側ではなく、内側にかけてみましょう。
最後に「inset」を追加しました。これだけで外側についていた影が内側につくようになります。現在範囲をかなり広くとっているため不格好ですが、数値を整えれば窪んだ見た目や隆起させた見た目など色々使えると思います。
また、このようにカンマで区切って書くことにより、一つのプロパティでいくつもの値を指定することができます。あと今回RGBで書いてますがrgbaの利用も可能です。
値を各順番ですが、「①水平値、②垂直値、③ぼかし、④広がり」の順番さえ変えなければOKだそう（色やinsetは前に持ってきたりしてもOK）。あと必須なのは①②だけで、ぼかしや広がりが不要な場合は勿論記載不要で問題ありません。
文字に影をつけるには？
これは動画では紹介していませんでしたが、文字にも影をつけることが可能です。その場合のプロパティは box-shadow ではなく text-shadow となります。
使用感はこんな感じでした。今回はいれてませんが、boxと同じようにぼかしたり複数の値を設定できます。まあプロパティを全部説明してたらきりがなさそうなので今回は割愛されたんでしょうね。
以上！CSSにおける影の付け方でした！一応これで動画テキストは全て勉強したことになります。次回は今まで勉強したCSSのまとめと、今後の勉強方針について確認したいと思います。
【参考サイト】
角丸プロパティのあれこれについて
本日の教材動画はこちら
今回は引き続きボーダー関連について。前回はボーダー線のあれこれでしたが、今回はボーダーの角についてお勉強していきます。
border-radius について
ボックスには必ず左上、右上、右下、左下と四隅がありますよね。border-radiusはその四隅のコーナー部分をどうするかを指定できるプロパティになります。何もしなければただの四角形のボックスになりますが、手を加えることで角丸にしたり、円形にしたりなどできます。
それぞれ指定したり、一括指定できたりするのですが、文字で説明するより実際に見てもらったほうが早いので早速書きながら見ていきましょう。
いつも通り何の変哲もないページを用意します。コーナー部分が分かるように、今回は正方形のボックスを用意し、背景をピンク色にしてみました。ここにborder-radiusを追加してみます。
border-radius の指定は時計回りに左上、右上、右下、左下となります。省略して書くことが可能で、①～④が各箇所の数値と場所になります。若干数字を変えていますので、数字が大きければ大きいほど角丸が強くなる（？）ことがお判りいただけるかと思います。
数値を1個だけ指定した場合は四方全て同じ値になります。逆に数値を2個書いた場合は点対称の位置と同じ指定になります（50,30と書いた場合は①と③が50、②と④が30になるといった具合です）
今回は省略して書きましたが、勿論各方面省略せずに書くことも可能です。その場合はborder-top-left-radius（左上）、border-bottom-right-radius（右下）... という風に書いてから数値を記載すればOKです。
半径を上下左右に分けて指定することも可能
上記の指定の仕方は上下50pxずつ半径から削る、みたいな指定の仕方ですが、これを水平方向、垂直方法それぞれの値を指定することも可能です。書き方としては「水平方向の各半径／垂直方向の各半径」で書きます。これも実際に見たほうが早いです。
若干が分かりにくいですが、スラッシュから左の値が水平（左右）方面の半径、右側の値が垂直（上下）方面の半径指定となります。
値だけでなく％でも指定することが可能です。
ちなみに全ての値と50%にしたら上記のように円形に見せることも可能です。上下左右の半径って？？っていまいちイメージしにくいですが、HTMLクイックリファレンス様の数が分かりやすかったので紹介します。
HTMLクイックリファレンス 様より引用
他に色々と便利な使い方もできるようですので、よかったら参考サイト様などもご確認くださいませ。
【参考サイト】
borderプロパティについて
本日の教材動画はこちら
今回はちょくちょく利用してきたborderについて掘り下げてみていきましょう。今までは黒色の実線を使う事が多かったかと思いますが、borderプロパティでより細かく姿勢ができるようです。
border について
そもそもボーダーの範囲ってどこぞ？って思いますが、「ボックスの外側の線」「マージンの内側であり、パティングの外側」という範囲のようです。前回で勉強したbackground-clipを参照するとちょっとわかりやすいかもですね。では順番でborderの細かいプロパティを見ていきましょう。
border-style ボーダーの種類を決める
border-styleでは実線や点線など、ボーダー線の種類を決めることができます。
- none → なし
- hidden → 表示させない（他の線と重なる場合に優先される）
- solid → 実線
- double → 二重線
- groove → 立体的で窪んだような線
- ridge → 立体的で隆起したような線
- inset → 上と左が暗く、下と右が明るい、立体的で窪んで見える線
- outset → 上と左が明るく、下と右が暗い、立体出来で隆起して見える線
- deshed → 破線（四角い点線）
- dotted → 点線（丸い点線）
普段よく目にするのは実線と二重線、あと破線や点線でしょうかね？その他にも色々な種類があったんですねー。
border-widht ボーダー線の太さを決める
次にボーダー線の太さについてです。太さを決める方法は「値」で決めるか「キーワード」で決めるかの2種類です。値は〇pxなど今までさんざん見てきたので割愛するとして、キーワードについてみていきましょう。
太さをキーワードで指定する場合は、thin（細い）、medium（普通）、thick（太い）の3種類から選びます。キーワードで指定する場合、実際に表示される太さはブラウザ依存の為見え方が若干違う可能性があることに注意です。
border-color ボーダー線の色を決める
これも今までさんざん使ってきたので今更という感じですが、色名や10進数、または16進数で色を指定することによってボーダー線に色をつけれます。今までなかった新要素として「transparent（透明）」値が新たに増えたことくらいでしょうか。
では実際に書いていきましょう。いつも通り適当なページとCSSを用意します。
ダミー文章と、文章範囲は背景黒、文字色白になるよう指定しました。
出来上がるのは上記のような何の変哲もないページです。ではここをボーダーで装飾していきましょう！
ボーダー線の種類を破線、太さは10px、色はトマト色にしてみました。すると何の変哲もなかったボックスを取り囲むように点線ができたことがわかります。
borderの指定は上下左右に出来るだけでなく、実はショートハンドを使う事もできます。なので…
border-〇〇と、〇〇に上下左右を指定してあげれば好きな方角だけボーダーを指定することができます。また、「線の種類、太さ、色」という風につなげて書くことによって記載の省略が可能です。
普段あまりridgeやoutset、insetといった種類を使わないため、どんなのかな？と思って試しに作って来ました。他の線種も載せたなかったですがきりがないので、気になる方は参照サイトをご覧くださいませ。
【参考サイト】
背景のサイズと適応範囲について
本日の教材動画はこちら
引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。
background-size で指定できる値について
background-sizeは文字通り背景の大きさを指定できるプロパティです。指定できる値は以下の5つです。
- auto → 自動的に大きさを調節（初期値）
- contain → 縦横比を保持したまま、背景領域に収まる最大サイズになるよう拡大縮小する
- cover → 縦横比は保持したまま、背景領域を完全に覆う最小サイズになるよう拡大縮小する
- 値指定 → 〇pxという形で、背景画像の幅、高さを直接指定する
- ％指定 → 〇％という形で、背景画像の幅、高さを直接指定する
値指定と％指定はなんとなくもうわかるかと思いますので、今回はcontainとcoverの表示についてみていきましょう。
まずいつも通り適当なページとCSSを用意します。
文字色を白、背景画像の指定、表示は繰り返し表示なしの中央表示。HTMLの高さ表示を100％で表示（指定しないと表示する背景画像のサイズ調節がうまくいかないようです）。あとはdivのマージンを少し設けています。
ちなみに背景画像の全体像はこんな感じです。
上記のソースとCSSで出来上がったページがこちらです。背景画像に何も指定をしていないので、原寸大で表示されており、そのせいで画像の一部分だけが見えている状態になっているのわかると思います。
cover の指定をしてみる
上記のbodyに background-size：cover； の指定を追加します。
すると上記のように、画像の縦横比はそのままに、背景領域（今回であればページいっぱい）に画像が拡大・縮小されたのがわかると思います。
ウィンドウサイズを変えても同じ表示です。「背景領域いっぱいに拡大・縮小」ですので、ウィンドウサイズが小さくなれば画像を縮小して全体を表示し、ウィンドウサイズが大きければ画像を拡大して全体を表示させます。
contain の指定をしてみる
では次に先ほどのcover部分をcontainに変えてみましょう。 background-size：contain； の指定にします。
縦横比を保持したまま「背景領域に収まるように表示」させる指定の為、画像サイズ＝ウィンドウサイズの場合は上記のように背景画像の全体がきれいに見れます。
「縦横比を保持したまま」背景画像をページに収めようとするため、ウィンドウサイズによっては上記のように横に余白ができます（わかりやすいように、ページ外に黄色の色をつけてみました）
逆に縦が余る場合はこのように縦側に余白ができます。ちょっと言葉で説明するのが難しいため、この辺りは動画を見るとわかりやすいです。
background-clip について
次に背景の適応範囲の指定についてみていきましょう。使うのはbackground-clipというプロパティで、使える値は以下の3つです。
- border-box → 背景をボーダーボックスに適応する（初期値）
- padding-box → 背景をパディングボックスに適応する
- content-box → 背景をコンテントボックスに適応する
実際に画像で見てみましょう。
ページソースはそのままで、外部CSSの指定を上記のように変えました。boxクラスの高さを400px、横幅はページの70％、内側の余白を10px、ボーダーをつけ、背景画像も指定しました。
上記の指定で出来上がったページがこちらです。背景画像に何も指定をかけていないので、box内に表示されている背景画像は原寸大となり見切れています。ではまずここに、背景画像が全部表示されるようsizeプロパティをまた指定してみましょう。
background-size：cover；をboxクラスに追加しました。するとどうでしょう、box全体に画像が収まるよう表示されましたね。ここで大事なのは上下のボーダー部分まで画像が表示されている点です（画像の縦横比とウィンドウサイズによっては横ボーダーに表示されます）。
これは何もしていない場合、初期値である「background-clip:border-box」が指定されていることになります。内容としてはご覧の様にボーダー範囲にまで適応するという意味です。
padding-box を指定してみる。
ではborder範囲ではなく、padding範囲を指定したらどうなるでしょうか？boxクラスに「background-clip:padding-box;」を追加します。
すると今まで「border範囲まで」あった背景が、「padding範囲まで」表示に切り替わったのがわかるかと思います。画像では少しわかりにくいですが、現在paddingエリアを10pxに指定しています。文字の上下左右にちょっと余白があるかと思いますがこの範囲ですね！現在そこまで背景画像が表示されているのがわかります。
content-box を指定してみる
では次はpadding範囲ではなく、content範囲に指定を変えたらどうなるでしょうか？boxクラスの指定を「background-clip:content-box;」に変更してみます。
すると今まで「paddingr範囲まで」あった背景が、「content範囲まで」の表示に切り替わったのがわかります。要は要素、コンテンツの中身の部分にのみ背景を適応しますよ～～という意味ですね！現在paddingエリアを10pxに指定していますので、そのさらに内側にのみ背景が表示されているのが分かるかと思います。
このように、いくつかのプロパティを組み合わせることによって、背景画像を好きな大きさ、好きな表示範囲で表示させることができるようになります。clipについては使いどころを考えなきゃいけなさそうですが、sizeについては背景画像の指定における基本設定な感じがするので、すぐ慣れそうですね！
【参考サイト】
background-size …… 背景画像のサイズを指定する
CSSのbackground-sizeで背景画像サイズを設定する方法を徹底解説!!
背景の繰り返し・表示位置・固定表示の指定について
本日の教材動画はこちら
前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。
背景の繰り返し設定について
前回一瞬だけ触れた背景画像の繰り返し設定のプロパティについて、より詳細に見ていきましょう。まず背景の繰り返し設定は background-repeat プロパティを使用します。設定できる値は下記の4つ。
- no-repeat → 繰り返さない
- repeat → 縦横に繰り返す
- repeat-x → 横に繰り返す
- repeat-y → 縦に繰り返す
実際に使ってみましょう。まずは適当に背景が表示されるようdivにboxというクラス名をつけてページを作ります。
divの縦横幅を指定、背景色グレー、背景画像に猫画像を指定しました。繰り返し設定については現在何もしていないため、初期値である「repeat（繰り返す）」で表示されていることがわかります。
縦にだけ、横ににだけ背景を繰り返させる方法
では値部分を「repeat-x」「repeat-y」にしてみましょう。ｘは横軸、yは縦軸のことですので、表示もまんま横のみ繰り返す、縦のみ繰り返すになったことがわかります。
背景の表示開始位置を指定する。
こちらも前回ちらっと触れましたが、背景の表示位置の詳しい指定の仕方をみてみましょう。背景位置の指定には「background-position」のプロパティを利用します。指定できる値は下記の3つとなります。
- キーワードで指定 → center / top / bottom / left …などの位置で指定（※）
- ％ → 左上を基準に、そのBOX内の〇％の位置から開始するという指定
- 数値 → 数字+単位で明確に開始位置を指定する方法
※ この方法はそれぞれ0% 50% 100%指定しているのと同じ効果が得られる。
こちらも実践で見てみましょう。何もしなかった場合は「左上に表示・繰り返し表示」となりますので、分かりやすいよう no-repeat に設定したうえで位置を指定してみます。
上側は「center」のみの指定の為「ど真ん中」に表示されます。％表現だと縦50%横50%と同じ位置に表示される形になります。
対して下側は「center right」の指定で、「真ん中の右より」という指定をかけました。％表現だと縦50%、右0%の位置に表示になります。bottom、leftであれば下100%、左0%という感じです。わかりやすいですね！
自分で微調節をしたい場合は勿論「35%、70%」や「100px、500px」など、％指定や数値指定を使えばOKです。凝ったサイトを作る場合はこちらのほうを使う事が多いかもしれませんね。
スクロールした際の背景表示の指定をする
次にスクロールバーがある場合、背景をどのように表示するかの指定をしてみましょう。使うプロパティは「background-attachment」…なんですが、まずここで冒頭で言っていた「動画が死ぬほど説明不足」だった部分を先に説明しておきましょう。
動画は軽くソースとCSSを見せた後「〇〇の場合はこんな感じで表示されてー...」と説明が続くのですが…。実際にやってみるとわかるのですが、動画通りにCSSを組んでも同じようには表示されません。何故なら
なんか知らない間に外部CSS読み込みが1個増えてるから…。誰だよお前！！今までいなかっただろ！！急に出てくんな！！
どうやらこの外部CSSでページの背景色やら表示幅やら果ては背景URLの指定まで行っているようなのですが、動画ではこの外部CSSの説明は一切されないため最初かなり「？？？？」となります。明らかにCSS指定少ないけどなに…？どういうこと…みたいな。
というわけで、謎の外部CSSをいつも使うCSSにまとめて記載し、自分なりにページを作りました。動画と中身一緒かはわかりませんがある程度同じ見た目になっているはずです。初心者向けの説明動画のはずなんですが、たまにいきなり謎仕様ぶっこんでくるので混乱してしまう…。
気を取り直して、スクロール表示時の背景について見ていきましょう。
background-attachment の表示の違い
まず使える値は下記の3つとなります。
- fixed → 背景画像の位置を固定、スクロールしても動かない。
- scroll → スクロールに伴って背景画像も移動する
- local → そのBOXのスクロール一に合わせて移動する
まずは動画の通り画像を表示させるためのボックス枠を3つ作ります。（冒頭brがたくさん入ってますが、検証画像をわかりやすくするためにいれたものです。無視してください）
動画では4行くらいしかない外部CSSもきちんと全部記載しました。ページの背景を黒色、DIVの幅を設定し、文字色は白、背景画像の指定とスクロール設定はオートにしてます。
fixed の表示について
値をfixedにした場合の表示です。fixedは「ページ全体の背景を固定」するため、スクロールバーを動かしても背景は動きません。（赤い矢印がスクロールバーの位置です）
もちろんページごとスクロールしても背景画像の位置はかわりません。上記はまるで表示位置がかわったように見えますが、ページ全体を下にスクロールしたことによりBOXから見える背景の位置がかわっただけです（冒頭にbrをいれるなどしてスクロール量を増やすとわかりやすいです）。
scroll の表示について
次に設定を scroll にします。これは「ページ全体のスクロールに伴って背景画像を動かす」設定です。上記のようにページ全体ではなく、BOX内のスクロールがある場合、BOX内スクロールを動かしても文字が動くのみで背景画像は動きません。
上記のように「ページをスクロール」させた場合は、スクロールと一緒に背景の位置が動きます。
local の表示について
最後にlocal表示です。こちらは「BOX内のスクロールにあわせて背景画像を移動させる」という内容です。ページ全体をスクロールした場合はscrollと同じ動きをしますが、BOX内でスクロールした場合は上記のように画像も一緒にスクロールし、見える範囲がかわります。
この辺りは文字や画像だと少々分かりにくいので、動画を参照しながら勉強するとわかりやすいです（私の説明が下手で申し訳ない）。
【参考サイト】
background-position …… 背景画像の表示開始位置を指定する
