
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.04.20
背景に関するプロパティの中に、background-repeatプロパティとbackground-attachmentプロパティがあります。
今回は、このbackground-repeatプロパティとbackground-attachmentプロパティについてまとめたいと思います。
背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1 ~ 背景プロパティの種類とbackground-color
CSS【 background 】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background 】3 ~ background-repeat、background-attachment(本ページ)
CSS【 background 】4 ~ background-position
CSS【 background 】5 ~ background-size
CSS【 background 】6 ~ background-clip、background-origin
CSS【 background 】7 ~ 背景に関するショートハンドプロパティ
1.background-repeatプロパティ
2.background-attachmentプロパティ
background-repeatプロパティは、背景に画像をリピート表示させる際に、画像のリピート方法を指定するプロパティです。
background-repeatプロパティで指定する値には、次のようなものがあります。
repeat デフォルト値
縦横(x軸、y軸とも)にリピートする
background-repeatを指定していない場合は、画像は横方向・縦方向ともにリピートしますrepeat-x x方向(横)にだけリピートする repeat-y y方向(縦)にだけリピートする no-repeat リピートはせず、画像を1回だけ表示する space 領域内に収まるようにスペースを使って調整しながら、縦横(x軸、y軸とも)にリピートする round 領域内に収まるように画像のサイズを調整しながら、縦横(x軸、y軸とも)にリピートする
background-repeatプロパティの値は、継承されません。
また、background-repeatプロパティは、全ての要素で使用できます。
background-repeatプロパティにそれぞれ値を指定して 上の画像をリピートさせてみると、次のようになります。
リピートなし
横にリピート
縦にリピート
縦横にリピート
ソースは次の通りです。
<!-- CSSファイル --> div#d1 p {height:90px; color:white; background-color:mediumpurple; background-image:url(https://programmercollege.jp/wp/wp-content/uploads/2017/04/colmun_image4477_01.jpg);} div#d1 p#p1 {background-repeat: no-repeat;} div#d1 p#p2 {background-repeat: repeat-x;} div#d1 p#p3 {background-repeat: repeat-y;} div#d1 p#p4 {background-repeat: repeat;)}
<!-- HTMLファイル --> <div id="d1"> <p id="p1">リピートなし</p> <p id="p2">横にリピート</p> <p id="p3">縦にリピート</p> <p id="p4">縦横にリピート</p> </div>
background-repeatプロパティの値として、他に space と round もあります。
どちらも 表示領域に画像の収まりが良くなるように自動調整をする値ですが、spaceは スペースを空けることで自動調整を行い、roundは 画像サイズ自体を伸縮することで自動調整を行います。
space
round
CSSソースのリピート指定箇所は次の通りです。
background-repeat: space; background-repeat: round;
background-attachmentプロパティは、画面をスクロールする際に 背景の画像も一緒にスクロールさせるかどうかを指定するプロパティです。
background-attachmentプロパティで指定する値には、次のようなものがあります。
scroll デフォルト値
背景の画像も一緒にスクロールさせるfixed 背景の画像はスクロールさせない local 自身の要素内ではスクロールさせないが、親要素をスクロールする際には自身の要素内のテキスト等と共に背景の画像もスクロールさせる
background-attachmentプロパティの値は、継承されません。
また、background-attachmentプロパティは、全ての要素で使用できます。
先ほどの背景画像に スクロール時の動きを指定すると、次のような表示になります。
scroll
fixed
local
ソースは次の通りです。
<!-- CSSファイル --> div#d2 p {padding:50px; height:30px; color:white; overflow-y:scroll; background-image:url(https://programmercollege.jp/wp/wp-content/uploads/2017/04/colmun_image4477_01.jpg);} div#d2 p#p2_1 {background-attachment:scroll;} div#d2 p#p2_2 {background-attachment:fixed;} div#d2 p#p2_3 {background-attachment:local;}
<!-- HTMLファイル --> <div id="d2"> <p id="p2_1">scroll</p> <p id="p2_2">fixed</p> <p id="p2_3">local</p> </div>
それぞれスクロールしてみると、background-attachment を local に指定した下段のスクロールは、親要素が存在するため、背景画像が「 local 」というテキストと一緒にスクロールします。
background-attachment を fixed に指定した中段のスクロールは、背景の画像が動かずに「 fixed 」というテキストのみがスクロールします。
background-attachment を scroll に指定した上段のスクロールも、背景の画像が動かずに fixed 指定の中段と同じような動きをしますが、これは scroll 指定をした HTML 要素に親要素が存在する場合にこのような動きになります。
背景の画像を確実にスクロールさせたい場合は local 指定が無難です。
また、ページ自体をスクロールしてみると、fixed(中段)は、背景の画像が固定されたまま「 fixed 」というテキストだけが動きます。
scroll(上段)とlocal(下段)は、背景の画像もテキストと一緒に動きます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.