【HTML&CSS】background-attachmentの使い方をわかりやすく説明


こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、background-attachment プロパティの使い方についてわかりやすく解説します。

このプロパティを使うことで、スクロールしたときの背景画像の挙動について設定することができます。

background-attachmentプロパティを使って自分好みのwebサイトを目指しましょう。

基礎知識

background-attachmentプロパティは、CSSで使用される言語です。

CSSとは、webサイトのデザインを担当する言語です。

詳しくはこちらの記事をどうぞ。

CSSとは?書き方を簡単にわかりやすく説明(漫画付)
記事のポイント CSSはWEB上のデザインを担当する言語である プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』 こんにちは、AWAKOJIです。 今日も薬剤師をしながらプログラミングの勉...

CSSの基本構造は以下の通りです。


そして今回、background-attachmentプロパティを使うので、以下の構造となります。

“background”(背景)

“attachment”(取り付け)

という意味です。

background-positionのセレクタ

background-attachmentのセレクタにはすべての要素を書くことができます。

つまり、

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

など、どの場所にも設定できるというわけです。

background-attachmentの値

値に書けるのは

  • scroll(初期値)
  • fixed
  • local

の3つです。

それぞれ見ていきます。

今回はこのsample.htmlファイルを読み込みます。

本文が長くなっていてスクロールが必要な状態です。

CSSファイルは以下の状態です。

background-imageプロパティで水玉の画像を読み込んでいます。

background-repeatプロパティで繰り返し表示はなしにしています。

background-positionプロパティで中央表示にしています。

※ブラウザ表示(クリックで拡大表示されます)

scroll

値にscrollを指定します。

※ブラウザ表示(クリックで拡大表示されます)

スクロールしたとき背景画像も一緒に動きます。

scrollは初期値なので、値を設定しなくても同じ動きをします。

fixed

値にfixedを指定します。

※ブラウザ表示(クリックで拡大表示されます)

スクロールしても背景画像は固定されたままです。

local

localはページの一部がスクロール表示だったとき、その中の背景画像の挙動を設定するための値です。

こんなページがあったとします。

※ブラウザ表示(クリックで拡大表示されます)

500px四方のdivタグの中にテキストを入力しました。

そして、入りきらないテキストはスクロールすれば見ることができます。

divタグの背景に水玉画像を設定してあります。

スクロール時の背景画像は、固定されています。

このときに、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ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

おすすめ記事

フォローする