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-sizeTechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。運営及び開発費用ご支援のお願い当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。※ご決済時はPayPal様の決済画面へ遷移します。background-size背景画像の大きさを指定できます。値に『auto』とだけ取った場合は背景画像そのままの大きさで描画されます。2つ目の値に『auto』と取った場合は1つ目の値に合わせて背景画像の縦横比を維持したまま拡大縮小されます。背景画像の縦横比を保持した状態で、背景が描画される領域を覆うサイズの大きさで描画されます。背景画像の縦横比を保持した状態で、背景が描画される領域に収まる最小サイズの大きさで描画されます。背景画像の大きさを数値で指定できます。使用可能な単位は『px』、『%』などです。『%』を使用した場合は背景描画領域の大きさに対する割合で描画されます。以下を使用しています。デフォルトの画像の大きさは横『100px』縦『100px』です。確認を容易にする為、背景画像の繰り返しは無効にしています。auto;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。cover;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。contain;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。50%;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。100px;">高さ100px、パディング10pxのdiv要素です。0.5)』を指定しています。背景画像の大きさを指定できます。キーワードならば1つの値、1つ目の値が数値で指定された場合のみ最大2つの値を取ることができます。数値で2つの値を取った場合、1つ目の値は横のサイズ、2つ目の値は縦のサイズの指定になります。数値で1つの値のみを指定した場合、2つ目の値は『auto』が指定されたと認識されますので背景画像の縦横比を維持したまま拡大縮小されて描画されます。数値で値を取る場合で『%』を使用した場合は背景描画領域に対する割合で描画されます。背景画像の大きさに対する割合ではないのでご注意下さい。背景画像の大きさに合わせて描画させたい場合は背景画像の大きさから算出した数値を直接『px』などで指定する必要があります。背景画像の大きさから自動で大きさを決定させることはCSSのみではできません。背景描画領域の大きさを変更するには『width』プロパティや『height』プロパティなどで要素の大きさを変更するか、『background-clip』プロパティで背景の適応範囲を変更してください。記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。TechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。トップページへTweetシェアIntroduction当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。有料会員になるとこれら全ての記事が読み放題となります。ご購入下されば幸いです。有料会員権はまとめ買いがお得です。