こんにちは、@AWAKOJIです。
今日も、薬剤師をしながらプログラミングの勉強をしています。
この記事では、background-attachment プロパティの使い方についてわかりやすく解説します。
このプロパティを使うことで、スクロールしたときの背景画像の挙動について設定することができます。
background-attachmentプロパティを使って自分好みのwebサイトを目指しましょう。
基礎知識
background-attachmentプロパティは、CSSで使用される言語です。
CSSとは、webサイトのデザインを担当する言語です。
詳しくはこちらの記事をどうぞ。

CSSの基本構造は以下の通りです。
そして今回、background-attachmentプロパティを使うので、以下の構造となります。
“background”(背景)
“attachment”(取り付け)
という意味です。
background-positionのセレクタ
background-attachmentのセレクタにはすべての要素を書くことができます。
つまり、
body⇒サイト全体
h1⇒見出し
table⇒表
tr⇒表の行
div⇒ブロックレベル要素
span⇒インライン要素
など、どの場所にも設定できるというわけです。
background-attachmentの値
値に書けるのは
- scroll(初期値)
- fixed
- local
の3つです。
それぞれ見ていきます。
今回はこのsample.htmlファイルを読み込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>background-repeatサンプル</title> <link rel="stylesheet" href="./sample.css"> </head> <body> <div class="container"> <p>サンプルです。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> </div> </body> </html> |
本文が長くなっていてスクロールが必要な状態です。
CSSファイルは以下の状態です。
1 2 3 4 5 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:center; } |
background-imageプロパティで水玉の画像を読み込んでいます。
background-repeatプロパティで繰り返し表示はなしにしています。
background-positionプロパティで中央表示にしています。
※ブラウザ表示(クリックで拡大表示されます)
scroll
値にscrollを指定します。
1 2 3 4 5 6 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:center; background-attachment:scroll; } |
※ブラウザ表示(クリックで拡大表示されます)
スクロールしたとき背景画像も一緒に動きます。
scrollは初期値なので、値を設定しなくても同じ動きをします。
fixed
値にfixedを指定します。
1 2 3 4 5 6 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; } |
※ブラウザ表示(クリックで拡大表示されます)
スクロールしても背景画像は固定されたままです。
local
localはページの一部がスクロール表示だったとき、その中の背景画像の挙動を設定するための値です。
こんなページがあったとします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>background-attachmentサンプル</title> <link rel="stylesheet" href="./sample.css"> </head> <body> <div> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> <p>値の違いを見ていきます。</p> </div> </body> </html> |
1 2 3 4 5 6 |
div{ width:500px; height:500px; overflow:scroll; background-image:url(./waterball.png) } |
※ブラウザ表示(クリックで拡大表示されます)
500px四方のdivタグの中にテキストを入力しました。
そして、入りきらないテキストはスクロールすれば見ることができます。
divタグの背景に水玉画像を設定してあります。
スクロール時の背景画像は、固定されています。
このときに、localを設定します。
1 2 3 4 5 6 7 |
div{ width:500px; height:500px; overflow:scroll; background-image:url(./waterball.png); background-attachment:local; } |
※ブラウザ表示(クリックで拡大表示されます)
スクロールすると一緒に背景画像が動くようになります。
※ページの一部をスクロール表示にしているとき、その中の背景画像はscrollやfixedにしても固定されています。
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか?
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の2つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この2つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- 1コース申し込むと、もう1コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ:1件10万くらい
- 中小企業:1件30万くらい
- 大手企業:桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。