CSS3の基本 - レベルアップCSS

背景画像の表示位置

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景画像の表示位置を指定するbackground-positionプロパティでは、表示位置の基点を左上以外に指定することや、複数の背景画像の基点を別々に指定することができます。ここでは、その指定方法について紹介します。
講師:
03:24

字幕

背景画像の表示位置を指定するbackground-position プロパティでは表示位置の起点を左上以外に指定することや複数の背景画像の起点を別々に指定することができるようになりました。ここではその指定方法について紹介します。画面では左側に HTML と CSS の編集画面を。右側にそれを表示するためのウェブブラウザを開いています。ウェブページを見ると緑色の背景画像が1枚適用されていることが分かります。CSS を確認してみましょう。この緑色の背景画像を指定するbackground-image プロパティ。そして繰り返しを規定するbackground-repeat プロパティに「 no-repeat 」繰り返しを行わない指定。そしてさらに背景画像の表示位置を指定するbackground-position プロパティに対して0 と 0 これは左上を起点として左から 0px上から 0px という指定が行われていることが分かります。このときこの数値に対して例えば 100px200px などと入力をする左上を起点に左から 100px上から 200pxというように常に左上を起点に背景画像の表示位置を指定することができていました。 CSS3 ではこれに加えて左上以外の起点を指定できるようになりました。具体的な指定方法としてはこのような形です。例えば現状指定している左上を指定するにはleft top というキーワードをそれぞれ数値の前に指定します。ここで右上を起点にしたい場合その場合はleft と書かれている部分をright に変更すると右上を起点に右から 100px上から 200px という指定ができるようになりました。top の部分を bottom に変更すると今度はウェブページの右下ここを起点に右から 100px 下から 200pxという指定が可能になっています。また背景画像にカンマ区切りで複数の背景画像が指定されている場合はbackground-position プロパティでも同様にbackground-image プロパティの値の順番と合わせてカンマ区切りで値を指定することで複数の背景画像にそれぞれ別々の表示位置を指定することができます。このレッスンでは背景画像の表示位置を指定する background-position プロパティでCSS3 から新しく使えるようになった表示位置の起点を左上以外に指定する点や複数の背景画像の起点を別々に指定する方法について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。