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

背景のショートハンドプロパティ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3で追加された背景関連のプロパティは、backgroundプロパティで一括して指定することができます。ここでは、backgroundプロパティの使い方について紹介します。
講師:
04:23

字幕

CSS3 で追加された背景関連のプロパティもbackground プロパティを使うことで一括で指定できます。このレッスンでは CSS3 における background プロパティの使い方について紹介します。background プロパティは背景関連のプロパティの値を一括で指定できるプロパティです。このような特殊のプロパティをショートハンドプロパティと呼びます。使える値は各プロパティに依存します。各プロパティは半角スペース区切りで指定します。省略も可能ですがその場合はデフォルト値が適用されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここではウェブページ全体に背景画像などの背景関連のプロパティをまとめて指定します。body 要素に対して CSS を書いてみましょう。なおここではサンプルファイルとして背景画像に使える photo.jpgというファイルを用意しています。ダウンロードしてお使いください。ここではすでにダウンロードしているこの photo.jpg という写真を背景画像に指定してみたいと思います。それでは body 要素に CSS を書いていきましょう。 body 要素に対して background プロパティを使います。値の順番はまず background-image 背景画像を指定します。ここではサンプルファイルの photo.jpg を指定します。このときちょっと文字が見にくくなりますので文字色を別途 color プロパティで設定しておきます。これで文字が読みやすくなりました。次に background プロパティの2つ目の値を指定していきます。2つ目は background-position です。ここでは左上をそのまま基準にしますのでleft top と入力しておきます。そして次が background-size背景画像の表示サイズです。photo.jpg は非常に大きい画像ファイルですのでそのすべてがウェブページの背景として表示されるようにここでは contain キーワードを指定してみましょう。なお background-size を指定する前には/ を入力します。そしてここで指定する contain を入力すると背景の写真がウェブページ全体に表示できたことが確認できます。続けましょう。次は background-repeat です。 背景画像の繰り返しを指定します。ここでは1回だけ背景写真が1枚だけを表示するように no-repeat を指定します。そして次は background-attachment 背景画像の移動や固定を指定します。ここでは fixed を指定しておきましょう。そして次が background-origin背景画像の配置起点です。ここでは border-box を指定します。次は background-clip 背景画像の表示領域ですがこれを省略するとbackground-origin と同じ値つまりここでは border-box が適用されます。そして最後に background-color 背景色を指定します。ここでは深緑を設定しましょう。すると背景画像が表示されない余っている領域に対しては背景色が表示されました。ウェブブラウザを見ると指定した背景色や背景画像、その表示方法など一括して適用されていることを確認できます。このレッスンでは CSS3 で追加された背景関連のプロパティも一括して指定できる background プロパティの使い方について学びました。

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

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

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

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

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

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