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

背景の表示領域

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景の表示領域を指定するには、background-clipプロパティを使います。ここでは、background-clipプロパティの使い方について紹介します。
講師:
05:09

字幕

背景の表示領域を指定するときはbackground-clip プロパティを使います。このレッスンでは background-clipプロパティの使い方について紹介します。background-clip プロパティに使える値は「 border-box 」「 padding-box 」「 content-box 」の各キーワードです。その他の仕様はご覧の表の通りです。まずそれぞれのキーワードがどのような意味を持つか図で確認してみましょう。background-clip プロパティで指定できる背景の表示領域とは背景色や背景画像が表示される領域のことです。デフォルトの border-box を指定すると CSSの基本概念であるボックスモデルで元々規定されているcontent padding border の領域に対して背景が表示されます。この図では背景が深緑色になっている領域のことを指します。さらにその外側にある margin の背景は常に透明として扱われます。そのため親要素に背景色や背景画像を指定している要素がある場合はその要素が継承されその背景色や背景画像がmargin の領域に表示されます。 次に padding ボックスキーワードを指定すると border の領域は除いてcontent padding の領域に対してだけ背景が表示されます。そして content-box キーワードを指定するとpadding の領域も除かれcontent の領域のみ、内側のこの点線の領域のみに対して背景が表示されます。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見ると冒頭のヘッダーの部分に背景色や背景画像が設定されていることが分かります。詳しく CSS をチェックしてみましょう。header 要素に対してまず背景画像が設定されています。この背景画像は斜めにラインが入っているテクスチャのような画像です。そして background-color プロパティでrgba 形式で背景色が設定されています。ここでは深緑の不透明度が 50% の色を表示しています。そしてその外側、外側にはボーダー、枠線が表示されています。ボーダーは 20px の幅で実線、そして色は rgba 形式で赤の 50% の不透明度で表示されています。ボーダーの色を半透明にしているのはボーダーの後ろに背景画像が表示されたときにどの領域まで背景画像が表示されているかを分かりやすくするためです。 そして padding の領域が分かりやすくなるようにここでは 10px を指定しています。さて実際に CSS を書いてみましょう。background-clip プロパティを使って背景の表示領域を指定します。現在はデフォルトの border ボックス、border の領域まで含む領域に対して背景が設定されていますのでその内側、 border の領域を除いて content と padding の領域のみに対して背景が表示されるように padding-box を指定してみましょう。「 padding-box 」です。ウェブブラウザを見ると border の領域からは背景画像が取り除かれたことが分かります。さらに padding の領域のも覗いて content の領域のみに背景を表示してみます。padding-box と書いた部分を今度はcontent-box に変更します。すると先ほど背景画像が表示されていたpadding の部分からも背景画像が消えました。現在 padding の部分には何の背景色や背景画像も指定されておらずかつ親要素にも背景色や背景画像も指定されていないため色は transparent 透過・透明になっています。 このように background-clip プロパティを使うことで背景の表示領域を自在にコントロールすることができます。このレッスンでは背景の表示領域を指定するbackground-clip プロパティの使い方について学びました。

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

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

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

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

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

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