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

背景画像の表示サイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景画像の表示サイズを指定するには、background-sizeプロパティを使います。ここでは、background-sizeプロパティの使い方について紹介します。
講師:
04:52

字幕

背景画像の表示サイズを指定するときはbackground-size プロパティを使います。このレッスンでは background-sizeプロパティの使い方について紹介します。background-origin プロパティに使える値は「長さ」「パーセント値」「 auto 」「 cover 」「 contain 」の各キーワードです。値はカンマ区切りで幅と高さの2つを指定します。高さの値は省略することもできますがその場合は auto が指定されたことになります。長さは数値とその単位。パーセント値は数値とパーセントで指定します。マイナスの値は使えません。auto では画像自体のサイズが使われます。cover はボックス全体をカバーする大きさでcontain はボックスに収まる大きさでそれぞれリサイズされます。cover contain ではいずれの場合でも背景画像の縦横比はキープされます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを確認するとヘッダー部分の背景画像に写真が指定されていることが分かります。この写真はサンプルファイルとしてダウンロードできますので予めダウンロードしておくとよいでしょう。 ここではダウンロードしておいた photo.jpgという画像を開いてみます。photo.jpg はこのように幅 960px高さ 540px ある大きな写真です。この写真を背景画像に指定しています。ここでは背景の写真がヘッダー領域に対してぴったり 100% になるようにリサイズをかけてみましょう。背景画像の表示サイズをコントロールするにはbackground-size プロパティを使います。ここではパーセント値で 100% に設定してみましょう。このように指定することで幅は 100%2つ目の値は省略しましたのでauto が適用されヘッダーの領域に対して背景の写真は幅 100%にぴったり収まるようにリサイズされました。先ほどでは見えなかった写真の右側の領域も表示されていることが分かります。また2つ目の値は省略をしましたので写真のオリジナルの縦横比を保ったままなりゆきで表示されていることが分かります。次にキーワードを試してみましょう。今かいたこの指定をコメントアウトしておきます。キーワードを使うにはbackground-size プロパティでcover または contain を指定します。ここではまず cover を試してみましょう。 cover と指定すると先ほど幅 100%高さ auto と指定したようなときと同じように背景画像が幅 100% にリサイズされ高さはなりゆきで表示されています。このような状態を cover というキーワードで指定することができるのです。それではもう1つのキーワード contain を試してみましょう。値を書き換えます。contain を書くとウェブブラウザの表示が一気に変わりました。背景の写真はこのように小さくリサイズされています。contain を使うと背景画像がこの指定された領域に対して必ずすべて表示されるようにリサイズされます。現在 header 要素の領域は非常に横に細長い領域になっています。この領域に対して photo.jpg 背景写真を表示しようとするとこのように非常に小さいサイズにリサイズをしなければこの領域に入りきらないということになります。なお背景画像が表示しきれない余った領域については背景色が適用されています。このレッスンでは背景画像の表示サイズを指定するためのbackground-size プロパティの使い方について学びました。

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

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

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

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

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

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