スタート!CSS入門

背景画像

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景に画像を指定するには、background-imageプロパティを使います。ここでは、背景画像とともに、その繰り返し方やスクロールに合わせた固定の有無、初期位置などの指定方法をまとめて紹介します。
講師:
09:05

字幕

このレッスンでは背景に画像を指定するときに使う関連プロパティをまとめて紹介します。まずはbackground-image プロパティです。背景に画像を指定するには background-imageプロパティを使います。background-image プロパティに使える値は URL とnone キーワードです。URL は URL 関数で指定します。none キーワードは背景画像を使わないという指定です。background-color プロパティのデフォルト値にも指定されています。そのほかの仕様は御覧の標の通りです。なお、背景画像を指定する場合背景色との関係に注意が必要になります。ウェブページの背景のベースとなるのは背景色です。背景画像はその上に表示されます。ウェブページの内容はさらにその上に表示されます。そのため背景画像を指定するときは画像を表示できない環境も考慮して背景色を合わせて指定しておくとよいでしょう。では、実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここではウェブページ全体に背景画像を指定してみましょう。あらかじめ背景に指定するためのbj.jpgという画像ファイルを用意していますのでダウンロードしてお使いください。 body 要素に対して背景画像に bg.jpgを指定するよう CSS を書いてみます。body 要素に対してbackground-color プロパティを使ってURL 関数の中にbg.jpg を設定します。ウェブブラウザを見るとウェブページ全体に背景画像が設定されてることがわかります。なお、背景画像が適用される領域はCSS のbox model という概念に基づいて決められています。続いて背景画像の繰り返しについて紹介します。背景画像の繰り返しを指定するにはbackground-repeat プロパティを作ります。background-repeat プロパティに使える値は repeatrepeat-x repeat-y no-repeat の各キーワードです。repeat は背景画像を要素全体に繰り返して表示します。repeat-x と repeat-y は水平方向または垂直方向にのみ繰り返す指定です。no-repeat は背景画像を繰り返さず1つだけ表示します。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。先ほどウェブページ全体に指定した背景画像に繰り返しを指定してみましょう。 水平方向にのみ繰り返すrepeat-x を使ってみます。body 要素に対して background-repeatプロパティをrepeat-x に設定します。ウェブブラウザを見ると背景画像が水平方向にのみ繰り返されてることが確認できます。同様に repeat-y も試してみましょう。repeat-y です。今度は画像が垂直方向に繰り返されました。今度は no-repeat です。no-repeatこちらでは画像が繰り返されず1つだけ表示されました。続いて背景画像の移動固定について紹介します。背景画像の移動、固定を指定するにはbackground-attachmentプロパティを使います。background-attachmentプロパティに使える値はスクロールfixed の各キーワードです。ウェブページのスクロールとともに背景画像を移動します。fixed はその逆で固定します。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。background-attachment プロパティはデフォルト値はスクロールですので通常はウェブページのスクロールに対しても背景画像は一緒に移動します。 それでは fixed を使って固定にしてみましょう。body 要素に対してbackground-attachmentプロパティを使って fixed固定に設定します。ウェブページをスクロールしてみると背景画像がその場に固定されていますね。続いて背景画像の初期位置について紹介します。背景画像の初期位置を指定するにはbackground-position プロパティを使います。background-position プロパティに使える値はパーセント値長さ、各種キーワードです。パーセント値長さにはマイナスの値も指定できます。また、値は二つ指定することができひとつ目は水平二つ目は垂直に対する値です。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。もう一度編集画面とウェブブラウザに戻ります。body 要素に対して background-positionプロパティを使って水平方向にセンター垂直方向にセンターを指定します。body 要素に対してbackground-position プロパティを使って水平方向に center垂直方向にもcenter を設定します。値と値の間は半角スペースで区切ります。 ウェブブラウザを見ると背景画像がウェブページの中央に表示されていますね。現在は background-attachment がfixed 固定に指定されているのでウェブページをスクロールしても背景は動かず表示されている領域に対して中央に表示されています。background-attachment プロパティを一旦 comment アウトするとスクロール分を含むウェブページ全体に対して中央に表示されるようになります。他にもライトトップとして右上にしてみたり右上になっていますね20 % 10 ピクセルというような長さで指定をしてみたりと様々な指定ができます。このレッスンでは背景に画像を指定するときに使う関連プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

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

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

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

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