CSSプロパティ辞典WebProgrammingPortalウェブプログラミングポータルログインまたはアカウント作成Cautionお使いのブラウザはJavaScriptが実行できない状態になっております。当サイトはWebプログラミングの情報サイトの為、JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。F【CSSセレクタ】E[foo]【CSSセレクタ】E[foo="bar"]【CSSセレクタ】E[foo~="bar"]【CSSセレクタ】E[foo|="bar"]【CSSセレクタ】E[foo^="bar"]【CSSセレクタ】E[foo$="bar"]【CSSセレクタ】E[foo*="bar"]トップページCSSプロパティ辞典background-positionTechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。運営及び開発費用ご支援のお願い当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。※ご決済時はPayPal様の決済画面へ遷移します。background-position背景画像の描画開始位置を指定できます。位置を数値で指定できます。使用可能な単位は『%』や『px』などです。マイナスの値も取ることができます。水平位置0%と等価です。水平位置100%と等価です。垂直位置0%と等価です。垂直位置100%と等価です。水平位置50%、及び垂直位置50%と等価です。以下を使用しています。確認を容易にする為、背景画像の繰り返しは無効にしています。top;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。center;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。bottom;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。bottom;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。『background-position』プロパティは背景画像の描画開始位置を指定できるプロパティです。背景画像を繰り返し描写するよう指定してある場合は『background-position』プロパティで設定した位置からの繰り返しが行われます。bottom;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。</div>背景画像として指定されている画像そのものを基準とした描画開始位置ではなく、『background-origin』プロパティで設定された基準となる範囲を基準とした描画開始位置の設定となりますのでご注意下さい。『background-position』プロパティは1つ、または2つの値を取ることができます。最初の値は左からの水平位置を表し、2つめの値は垂直位置を表します。30%;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。</div>水平位置を決定する値を1つだけ指定した場合、2つ目の値は『center』を指定したと仮定されます。left;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。</div>垂直位置を決定するキーワード(『top』か『bottom』)を1つだけ指定した場合、1つ目の値は『center』を指定したものと仮定されます。top』といったように2つの値を記述した方が良いかもしれません。top;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。bottom;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。</div>『background-position』プロパティで背景画像の一部だけを表示するようにすると1枚の画像にも関わらず、まるで画像切り替えが行われたような表現を構築することができます。これは『CSSスプライト』と呼ばれている技術で、画像のリクエスト数を削減できる為ウェブサイトの高速化につなげることができます。以下のサンプルで使用している画像は以下です。bottom;}</style><div></div>記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。TechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。トップページへTweetシェアIntroduction当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。有料会員になるとこれら全ての記事が読み放題となります。ご購入下されば幸いです。有料会員権はまとめ買いがお得です。