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

背景画像の配置基点

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景画像の配置基点をボーダーやコンテンツに変更したい場合は、background-originプロパティを使います。ここでは、background-originプロパティの使い方について紹介します。
講師:
04:04

字幕

背景画像の配置起点を指定するときはbackground-origin プロパティを使います。このレッスンでは background-origin プロパティの使い方について紹介します。background-origin プロパティに使える値は「 border-box 」「 padding-box 」「 content-box 」の各キーワードです。その他の仕様はご覧の表の通りです。まずそれぞれのキーワードがどのような意味を持つか図で確認してみましょう。background-origin プロパティで指定できる背景画像の配置起点とは背景画像が表示を始める位置のことです。デフォルトの padding-box を指定するとCSS の基本概念であるボックスモデルでいうところのcontent padding の領域の左上を起点として背景画像が表示されます。この図では背景が深緑に塗られている領域からborder の幅を除いた領域の左上が起点です。次に border-box キーワードを指定するとborder の幅も含めた領域に対して左上を起点として背景画像が表示されます。そして content-box キーワードを指定するとcontent の領域のみに対して左上を起点として背景画像が表示されます。 この図では内側の点線部分にあたる領域の左上が起点になります。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページの上部ヘッダー領域に背景色やボーダーそして背景画像が設定されていることが分かります。CSS で詳しく見ていきましょう。ヘッダー領域に対して背景画像 bg_line.pngというものがno-repeat 繰り返さず1枚だけ表示されています。このとき起点になるのは background-originプロパティのデフォルト値である padding ボックスです。padding ボックスでは content と padding の領域の左上を起点としますので内容が入っている content 領域さらに指定されている padding 10pxこの領域の左上を起点として背景画像が表示されています。この後のキーワードの変更によって表示が分かりやすいように背景とボーダーにはそれぞれ緑と赤の半透明の背景色を適用しています。それでは background-origin プロパティを使って背景画像の配置起点を変更してみましょう。background-origin プロパティを使ってここでは配置起点を border-box に変更してみます。 ウェブブラウザを見るとボーダーを含めたボックスの左上を起点に背景画像が表示され始めているのが分かります。次に同じように content-box に変更してみます。すると先ほどとは違って padding の 10px の領域を除く内側のコンテント領域の左上を基準に背景画像が表示され始めているのが分かります。このレッスンでは背景画像の配置起点を指定するbackground-origin プロパティの使い方について学びました。

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

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

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

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

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

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