CSSを使用してHTML要素に背景スタイルを適用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
Webサイトを構築する場合、背景のスタイリングはデザインの視覚的美学に大きな役割を果たします。 ボタンを作成する場合でも、大きなインタラクティブエリアを作成する場合でも、背景スタイルは定義を提供し、特定の目的のためにエリアを区別できます。 CSSのプロパティのバックグラウンドファミリで何が可能かを理解すると、より効率的なコードと視覚的に興味深いデザインを作成するのに役立ちます。
このチュートリアルでは、要素のグリッドを作成し、それぞれが要素に背景を適用するさまざまな方法を示します。 グループ化された一連の例を作成することにより、参照ツールとさまざまな背景プロパティを試す場所ができあがります。 18の背景色、画像、グラデーションのバリエーションのシートを作成します。 各バリエーションは、特定の効果を実現するために背景関連のプロパティを使用します。 最後のバリエーションは、単一の要素で多くのアプローチを組み合わせて、複数の背景効果を作成します。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSで色の値を使用する方法にある、色の値に関する知識。
- ローカルマシンに
index.html
として保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
初期HTMLとCSSの設定
バックグラウンドスタイリングの操作を開始するには、最初に、チュートリアルの残りの部分で作業するHTMLおよびCSSコードを設定します。 このセクションでは、レイアウトを処理し、視覚的な美学の基礎を設定する、必要なすべてのHTMLといくつかの初期CSSスタイルを書き出します。
テキストエディタでindex.html
を開くことから始めます。 次に、次のHTMLをファイルに追加します。
index.html
<!doctype html> <html> <head> </head> <body> </body> </html>
次に、<head>
タグに移動し、<meta>
タグを追加して、HTMLファイルの文字セットを定義します。 ページのタイトルを設定し、モバイルデバイスがページをレンダリングする方法を定義する<meta>
タグを追加し、最後に<link>
タグを使用して後で作成するCSSファイルをロードします。
これらの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Background Styles Resource</title> <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html>
<head>
コンテンツを追加したら、<body>
要素に移動して、グリッドのタイトルとベース<div>
を追加します。 このコードブロックの強調表示されたセクションを、テキストエディタのindex.html
ファイルに追加します。
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Background Styles Resource</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Background Styles Resource</h1> <div class="grid"> </div> </body> </html>
<h1>
は、ページのコンテンツを説明する見出しを提供します。 grid
class
属性を持つ<div>
要素には、チュートリアル全体で追加された残りのHTMLがすべて含まれます。
変更をindex.html
に保存し、テキストエディタで開いたままにします。 次に、Webブラウザでindex.html
を開きます。 チュートリアルでは、テキストエディタとブラウザを切り替えて、コードに加えられた変更を確認します。
次に、テキストエディタに戻り、styles.css
というファイルを作成します。 これは、index.html
の<head>
要素で参照したファイルです。 styles.css
ファイルに、次のコードを追加します。
styles.css
body { font-family: system-ui, sans-serif; color: #333; } h1 { text-align: center; }
body
要素セレクターは、ページのフォントをデフォルトのセリフからオペレーティングシステムのフォント(サポートされている場合)に変更してから、サンセリフフォントにフォールバックします。 h1
セレクターは、テキストをページの中央に配置します。
次に、包括的なレイアウトプロパティのコレクションである CSSGridを.grid
クラスセレクターに追加します。 次のコードブロックで強調表示されているCSSは、styles.css
に何が追加されるかを示しています。
styles.css
... h1 { text-align: center; } .grid { width: 90%; max-width: 80rem; margin: 2rem auto; display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); grid-gap: 1.5rem; }
このセレクターのプロパティは、柔軟なwidth
とmax-width
を設定するため、ページのサイズを変更して幅を調整できます。 また、margin
プロパティを設定して、グリッドの上下にスペースを設定します。 次に、グリッドを定義するために必要なプロパティを適用します。
display
プロパティにより、要素はgrid
値のCSSグリッドを使用します。 これが設定されると、他の2つのプロパティgrid-template-columns
とgrid-gap
が、後で追加する.grid
要素の内容に影響を与えます。 grid-template-columns
は、3
列があり、最小幅が100px
、最大幅が1fr
(端数)である必要があることを示しています。全幅。 3つの列があるため、その割合は33.333%になります。 最後に、grid-gap
は、グリッドの各行と列の間に1.5rem
の間隔があることを定義します。
次に、後のセクションで作成するHTML用のクラスセレクターをさらに2つ追加します。 .item
クラスセレクターを追加します。これは、各バリエーションのグリッドアイテムに適用されます。 次に、.preview
クラスセレクターを追加します。これにはバックグラウンドスタイルのデモが含まれます。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。
styles.css
... .grid { ... } .item { border: 1px solid #999; background-color: white; } .preview { height: 16rem; border-bottom: 1px solid #999; }
これで、index.html
およびstyles.css
ファイルの開始点が設定されました。 続行する前に、必ず両方のファイルへの変更を保存してください。
このチュートリアルのセットアップの最後の部分では、index.html
およびstyles.css
ファイルの横にimages
という名前の新しいディレクトリ(またはフォルダ)を作成します。 次の各画像をダウンロードして、この新しく作成されたimages
ディレクトリに追加します。
- 繰り返し可能なパターン:
pattern.png
として保存します。 - X軸繰り返し可能パターン:
pattern-x.png
として保存します。 - Y軸繰り返しパターン:
pattern-y.png
として保存します。 - ハチドリの写真:
photo.jpg
として保存します。 (UnsplashのMarkOlsen による写真)
このセクションでは、チュートリアルの残りの部分でコードをサポートするHTMLとCSSを準備しました。 また、デモ画像をダウンロードして、index.html
およびstyles.css
ファイルと一緒にimages
ディレクトリに追加しました。 次のセクションでは、background-color
とbackground-image
を設定します。
要素でbackground-color
およびbackground-image
を使用する
HTML要素には、色または画像の2種類の背景のいずれかを入力できます。 CSSで生成されたグラデーションは一種の画像であり、チュートリアルの後半で説明します。 このセクションでは、要素に色付きの背景を適用してから、要素の背景として画像ファイルをロードします。
まず、テキストエディタでindex.html
を開き、<div class="grid">
要素内の次のコードブロックから強調表示されたHTMLを追加します。
index.html
... <div class="grid"> <div class="item"> <div class="preview style-01"></div> <div class="item-info"> <h2>Background Color</h2> </div> </div> </div> ...
チュートリアル全体で作成するバリエーションごとに、このHTML形式を使用します。 バリエーションごとに変わるのはclass
属性値で、これは各バリエーションの数を増やします。 <h2>
要素には、そのバリエーションに対応するタイトルがあります。
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
.preview
クラスセレクターの後に、.style-01
という新しいクラスセレクターを追加します。 次に、新しいセレクターブロックに、deeppink
という名前の値を持つbackground-color
プロパティを追加します。 次のコードブロックで強調表示されているCSSは、これがどのように表示されるかを示しています。
styles.css
... .preview { height: 16rem; } .style-01 { background-color: deeppink; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、最初のバリエーションでピンクの画像が表示されます。
background-color
プロパティは、RGBAやHSLAなどのアルファチャネルを持つ色を含む、有効なCSS色を受け入れます。 アルファチャネルを使用して、背景色に透明度を与えることができます。
次に、index.html
に戻り、新しいバリエーションを追加します。今回は、クラスをstyle-02
にインクリメントします。 また、<h2>
要素のテキストをBackground Image
に設定します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-02"></div> <div class="item-info"> <h2>Background Image</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-02
クラスセレクターを追加してから、background-image
プロパティを追加します。 photo.jpg
ファイルをバックグラウンドとしてロードするには、最初にurl()
関数を値として作成します。 次に、url()
関数の括弧内に、次のコードブロックで強調表示されているCSSが示すように、ファイルへのパスを追加します。
styles.css
... .style-01 { ... } .style-02 { background-image: url("./images/photo.jpg"); }
変更内容をstyles.css
に保存してから、Webブラウザでindex.html
を更新してください。 画像のサイズがプレビュー領域のサイズよりも大きいため、プレビュー領域にはphoto.jpg
画像の一部のみが表示されます。 デフォルトでは、背景画像は元のピクセルサイズで表示されるため、画像が完全に表示されません。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、最初の2つの背景バリエーションを設定します。 1つ目はbackground-color
プロパティを使用し、2つ目はbackground-image
プロパティを使用しました。 次に、background-repeat
プロパティに異なる値を使用する4つのバリエーションを作成します。
background-repeat
プロパティを使用した画像のタイリング
背景画像を要素にロードできるようになったので、繰り返しパターン画像を使用して画像をタイリングするさまざまな方法で作業します。 デフォルトでは、background-image
はx軸とy軸に沿ってタイルパターンとして繰り返されますが、その繰り返しを制御して、単一の軸に沿ってのみ繰り返すか、まったく繰り返さないようにすることができます。 このセクションでは、background-repeat
プロパティを使用して、4つの異なる繰り返しシナリオを制御します。
まず、テキストエディタでindex.html
を開き、style-03
クラスの新しいアイテムとBackground Repeat
の<h2>
をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-03"></div> <div class="item-info"> <h2>Background Repeat</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-03
のクラスセレクターを作成します。 次のコードブロックで強調表示されているように、セレクターブロック内に、images
フォルダーからpattern.png
イメージをロードするurl()
関数を使用してbackground-image
を追加します。
styles.css
... .style-02 { ... } .style-03 { background-image: url("./images/pattern.png"); }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 pattern.png
画像は、要素全体を埋め尽くす終わりのない画像のように見える繰り返し可能なタイルとして設定されます。 この要素のスタイルは、次の画像に示すようにブラウザに表示されます。
この画像は左上隅から繰り返され、右下に向かって連続的に拡大していることに注意してください。 これは、background-image
のデフォルトの状態であり、このようなシームレスなパターンまたはより厳密な繰り返しを作成できます。 このデフォルトを作成するプロパティは、background-repeat
がrepeat
の値に設定されています。
background-repeat
プロパティを使用すると、左から右にのみ繰り返すシームレスなパターンを作成することもできます。 この種のリピートを使用できるエフェクトには、穴の開いたエッジのようにコンテナの上部に沿ったギザギザの形状など、さまざまな種類があります。 これを使用して、下部に端から端まで定型化された二重線のグラフィックスパンを作成することもできます。 background-repeat
プロパティをrepeat-x
に設定すると、X軸のみに沿って背景を繰り返すようにブラウザに指示できます。
x軸に沿って作業を開始するには、テキストエディタでindex.html
に戻ります。 次に、style-04
クラスの新しいHTMLブロックとBackground Repeat X
の<h2>
をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-04"></div> <div class="item-info"> <h2>Background Repeat X</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 background-image
プロパティを使用して.style-04
クラスセレクターを作成し、images
ディレクトリにpattern-x.png
ファイルをロードします。 この画像は、要素の上部のx軸に沿って繰り返されるように設計されています。 次に、次のコードブロックで強調表示されているように、値がrepeat-x
に設定されたbackground-repeat
プロパティを追加します。
styles.css
... .style-03 { ... } .style-04 { background-image: url("./images/pattern-x.png"); background-repeat: repeat-x; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 デフォルトでは、背景画像の繰り返しは要素の左上隅から始まります。 したがって、次の画像に示すように、パターンはプレビュー要素の領域の上部に沿って左から右に繰り返されます。
背景を左から右に繰り返すように設定できるのと同じように、背景を上から下に繰り返すように設定することもできます。 これを行うには、background-repeat
プロパティをrepeat-y
に設定します。これにより、画像がy軸に沿って1列に繰り返されます。 これは、コンテナの左側または右側の端に沿って視覚効果を作成する場合に役立ちます。
y軸の使用を開始するには、テキストエディタでindex.html
を開き、style-05
クラスの新しいアイテムと[の<h2>
]をグリッドに追加します。 X145X]。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-05"></div> <div class="item-info"> <h2>Background Repeat Y</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 x軸の例と同様に、.style-05
のクラスセレクターを作成し、background-image
プロパティを追加します。 今回は、background-image
の値がpattern-y.png
の画像を指すように設定します。 次に、次のコードブロックで強調表示されているように、background-repeat
プロパティを追加し、値をrepeat-y
に設定します。
styles.css
... .style-04 { ... } .style-05 { background-image: url("./images/pattern-y.png"); background-repeat: repeat-y; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、パターンはプレビュー要素の左端に沿って繰り返されます。
多くの場合、背景画像をまったく繰り返さないようにすると便利です。 これは、ロゴやアイコンで行われることがあるなど、HTML<img />
ではなく背景としてビジュアルグラフィックが追加された場合に発生する可能性があります。 background-repeat
プロパティをno-repeat
値に設定することにより、繰り返しを完全に無効にすることができます。
まず、テキストエディタでindex.html
に戻り、style-06
クラスの<h2>
要素を含む別のアイテムをグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-06"></div> <div class="item-info"> <h2>Background No Repeat</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-06
クラスセレクターを追加し、セクションの最初のバリエーションと同様に、pattern.png
ファイルを背景画像としてロードするbackground-image
プロパティを作成します。 次に、値no-repeat
に設定されたbackground-repeat
プロパティを追加します。 画像は、連続したタイルの繰り返しではなく、1回だけ表示されます。 次のコードブロックの強調表示されたCSSは、これがstyles.css
ファイルにどのように表示されるかを示しています。
styles.css
... .style-05 { ... } .style-06 { background-image: url("./images/pattern.png"); background-repeat: no-repeat; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、プレビュー要素の左上隅にpattern.png
画像の単一のインスタンスが表示されます。
このセクションでは、background-repeat
プロパティのデフォルト値であるrepeat
を使用しました。 また、repeat-x
値を使用して水平方向に、repeat-y
値を使用して垂直方向にタイル画像を繰り返しました。 最後に、no-repeat
の値で画像がまったく繰り返されないようにしました。 次のセクションでは、background-position
プロパティを使用して、要素のどこに背景画像を固定するかを設定します。
background-position
で背景画像の配置を調整する
background-image
を使用する場合、画像はデフォルトで要素の左上隅に配置されることを知っておくことが重要です。 ただし、特に画像が繰り返されない場合は、要素内に背景画像を設定する場所ではない可能性があります。 このセクションでは、background-position
プロパティを使用して、画像の最初のインスタンスが要素のどこに固定されるかを変更します。
background-position
の操作を開始するには、テキストエディタでindex.html
を開き、style-07
のクラスと<h2>
の新しいアイテムをグリッドに追加します。 X147X]。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-07"></div> <div class="item-info"> <h2>Background Position</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
.stlye-07
のクラスセレクターを作成します。 このセクションのCSSブロックごとに、background-image
のpattern.png
ファイルをロードし、background-repeat
プロパティをno-repeat
に設定します。より識別可能。 最後に、background-position
プロパティを追加し、bottom right
の名前付き値を一緒に使用して、デフォルトから隣接するコーナーに画像を固定します。 次のコードブロックの強調表示されたCSSは、これがどのように記述されるかを示しています。
styles.css
... .style-06 { ... } .style-07 { background-image: url("./images/pattern.png"); background-repeat: no-repeat; background-position: bottom right; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、プレビュー要素の右下隅にpattern.png
ファイルの単一のインスタンスが表示されます。
background-position
プロパティは、軸ごとに1つずつ、2つの名前付き値を受け入れることができます。 x軸の場合、これらの値はleft
、center
、およびright
です。 y軸の値は、top
、center
、およびbottom
です。 center
という名前の値は両方の軸に存在し、要素の真ん中に背景画像を配置するために組み合わせることができます。
背景画像を中央に配置するには、テキストエディタでindex.html
を開き、style-08
クラスの新しいアイテムとBackground Position Center
。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-08"></div> <div class="item-info"> <h2>Background Position Center</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-08
クラスセレクターを作成し、background-image
プロパティを追加してpattern.png
をロードし、background-repeat
プロパティをno-repeat
に設定します。 background-position
プロパティをcenter
の単一の名前付き値に設定すると、ブラウザーはこの名前をx軸とy軸の両方の位置に使用することを理解します。 次のコードブロックの強調表示されたCSSは、これがどのように設定されているかを示しています。
styles.css
... .style-07 { ... } .style-08 { background-image: url("./images/pattern.png"); background-repeat: no-repeat; background-position: center; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、pattern.png
の単一インスタンスがプレビュー要素の中央に浮かんでいます。
名前付きの値とともに数値を使用して、background-image
の開始位置を定義することもできます。 これは、要素のエッジから背景画像を一定または相対的な量だけオフセットする場合に役立ちます。
まず、テキストエディタでindex.html
に戻り、style-09
のクラスとBackground Position Numeric
の<h2>
要素を持つ別のアイテムをグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-09"></div> <div class="item-info"> <h2>Background Position Numeric</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 次に、pattern.png
ファイルをロードするbackground-image
プロパティとno-repeat
値を持つbackground-repeat
プロパティを使用して.style-09
クラスセレクターを作成します。 次に、次のコードブロックで強調表示されているように、値がright 10% bottom 40px
のbackground-position
プロパティを追加します。
styles.css
... .style-08 { ... } .style-09 { background-image: url("./images/pattern.png"); background-repeat: no-repeat; background-position: right 10% bottom 40px; }
background-position
プロパティのright 10%
部分は、要素の右からの幅のbackground-image
10% oを固定します。 次に、bottom 40px
は、要素の下からbackground-image
40pxを設定します。
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、パターン画像は要素の右下部分に表示されますが、エッジからある程度の間隔があります。
このセクションでは、background-position
プロパティを使用して、bottom
やcenter
などの単語値、および数値と組み合わせた数値を使用して、背景画像をさまざまな位置に固定しました。単語の値。 次のセクションでは、background-size
プロパティを使用して、要素内の背景画像のサイズを変更します。
background-size
プロパティを使用した背景画像のサイズ変更
要素に背景として読み込まれた画像は、完全なピクセルサイズで配置されます。 たとえば、背景に使用される画像ファイルのピクセルサイズが800⨉600で、適用される要素が400⨉300の場合、背景画像の25% ofが表示されます。 このセクションでは、background-size
プロパティを使用して、background-image
ファイルのサイズを変更します。
background-image
のサイズ変更を開始するには、テキストエディタでindex.html
を開きます。 次に、クラスがstyle-10
の新しいアイテムと<h2>
のクラスがBackground Size Contain
のグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-10"></div> <div class="item-info"> <h2>Background Size Contain</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
.style-10
のクラスセレクターを作成します。 セレクターブロック内に、ハチドリのphoto.jpg
画像をbackground-image
としてロードします。 次に、background-repeat
プロパティをno-repeat
に設定し、background-position
をcenter
に設定して、要素の中央に画像の反復が1回だけあるようにします。 最後に、background-size
プロパティを追加し、次のコードブロックで強調表示されているように、名前付きの値contain
を使用します。
styles.css
... .style-09 { ... } .style-10 { background-image: url("./images/photo.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 contain
のbackground-size
という名前の値が示すように、画像は要素内に完全に含まれるように縮小されます。 ハチドリの画像が完全に表示されるようになりましたが、background-size
がない場合は一部しか表示されませんでした。 次の画像は、これがブラウザにどのように表示されるかを示しています。
次に、background-size
の値を設定してサイズを変更し、要素の背景スペースを完全にカバーするようにします。 テキストエディタでindex.html
を開くことから始め、style-11
のクラスとBackground Size Cover
の<h2>
要素を持つ別のアイテムをグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-11"></div> <div class="item-info"> <h2>Background Size Cover</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 次に、.style-11
クラスセレクターを作成し、.style-10
セレクターブロックから同じbackground-image
、background-repeat
、およびbackground-position
プロパティをコピーします。 次に、名前付きの値cover
を使用して、background-size
プロパティを追加します。 次のコードブロックで強調表示されているCSSは、テキストエディタでこれを記述する方法を示しています。
styles.css
... .style-10 { ... } .style-11 { background-image: url("./images/photo.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。
background-image
は要素全体を埋めますが、それに合わせて縮小されます。 cover
の値は、要素の方向に応じてbackground-image
のサイズを変更します。 要素が横向きの場合、つまり高さよりも幅が広い場合は、background-image
のサイズが変更され、幅が要素と同じになります。 これにより、この場合のbackground-image
の高さは要素よりも高くなるため、要素の境界によって切り取られます。 次の画像は、cover
のbackground-size
を持つbackground-image
がブラウザにどのように表示されるかを示しています。
最後に、background-size
値は数値も受け入れることができます。 数値を使用するには、テキストエディタでindex.html
に戻ります。 次に、style-12
のクラスを持つ新しいアイテムと、Background Size Numeric
を持つ<h2>
要素をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-12"></div> <div class="item-info"> <h2>Background Size Numeric</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-12
クラスセレクターを作成します。 もう一度、.style-10
および.style-11
で使用されているのと同じbackground-image
、background-repeat
、およびbackground-position
プロパティをコピーして、セレクターに追加します。 .style-12
のブロック。
次に、30%
の数値を使用してbackground-size
プロパティを追加します。 background-size
プロパティを単一の数値として指定すると、画像の高さと幅の両方に同じ値が適用されます。 画像のアスペクト比を維持するには、30%
の後にauto
という単語を追加します。これにより、画像の幅が30%に設定され、高さが比例して設定されます。 強調表示されたCSSは、.style-12
セレクターブロックとプロパティがテキストエディターにどのように表示されるかを示しています。
styles.css
... .style-11 { ... } .style-12 { background-image: url("./images/photo.jpg"); background-repeat: no-repeat; background-position: center; background-size: 30% auto; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、ハチドリの画像は、要素の中央でその幅の30% ofだけ比例して拡大縮小されます。
このセクションでは、backround-size
プロパティを使用して、contain
値で要素内に完全に表示されるように背景画像を拡大縮小しました。 cover
プロパティを使用して、背景画像を拡大縮小してサイズを変更し、要素全体をカバーしながら画像の多くを表示できるようにしました。 最後に、数値を使用して背景画像を設定されたサイズにスケーリングし、auto
値を使用してスケーリングの比例関係を維持しました。 次のセクションでは、background-attachment
プロパティを使用して、背景画像がその要素とともにスクロールしないようにします。
background-attachment
プロパティを使用した背景画像の貼り付け
background-attachement
プロパティは、background-image
を静止させます。 これにより、コンテンツが画像の上に浮かんでいるかのようにスライドする効果が作成されます。 このセクションでは、background-attachment
プロパティを使用してこの効果を作成します。
まず、テキストエディタでindex.html
を開き、style-13
クラスの新しいアイテムとBackground Attachment
の<h2>
をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-13"></div> <div class="item-info"> <h2>Background Attachment</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
.style-13
クラスセレクターを作成します。 セレクターブロックに、images
ディレクトリからpattern.png
ファイルをロードするbackground-image
プロパティを追加します。 この画像をデフォルトで使用して、画像が繰り返されて要素全体が塗りつぶされるようにします。 最後に、次のコードブロックで強調表示されているように、名前付きの値がfixed
のbackground-attachment
プロパティを追加します。
styles.css
... .style-12 { ... } .style-13 { background-image: url("./images/pattern.png"); background-attachment: fixed; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 ページを下にスクロールすると、このバリエーションのプレビュー領域は、背後の背景を見渡すウィンドウのように見える場合があります。 このプロパティを使用する際に考慮すべき重要なことは、画像が要素ではなくブラウザのビューポートに固定されていることです。 これは、位置を決定する原点を変更するため、background-position
に影響します。 次のアニメーションは、ブラウザでのこの効果を示しています。
このセクションでは、background-attachment
プロパティをfixed
値とともに使用して、背景画像がその要素とともにスクロールしないようにしました。 次のセクションでは、以前のすべてのプロパティをbackground
省略形プロパティに結合します。
プロパティをbackground
プロパティに結合する
これまでのすべてのCSSプロパティは、単一のbackground
省略形プロパティに組み合わせることができます。 このセクションでは、この省略形のプロパティを使用して2つのバリエーションを作成し、通常の使用法とbackground-size
値を適用する際の特別な考慮事項を理解します。
注: background
の省略形を使用すると、明示的に宣言されていない場合でも、一部のプロパティ値が上書きされる可能性があることに注意してください。 たとえば、background
は、省略形の値に画像が指定されていない場合でも、background-image
の値を上書きします。
省略形の使用を開始するには、テキストエディタでindex.html
を開き、style-14
クラスの新しいアイテムとBackground Shorthand
の<h2>
をグリッドに追加します。 。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-14"></div> <div class="item-info"> <h2>Background Shorthand</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-14
クラスセレクターを作成し、セレクターブロックにbackground
省略形プロパティを追加します。 値として、images
ディレクトリからpattern.png
をロードするurl()
関数を追加します。 関数の後にスペースを追加し、名前付きの値center
を追加します。これにより、background-position
の値が適用されます。 次に、名前付きの値repeat-x
で別のスペースを追加します。 最後に、gold
という名前の付いた色の値を追加し、次のコードブロックで強調表示されているように、行をセミコロンで終了します。
styles.css
... .style-13 { ... } .style-14 { background: url("./images/pattern.png") center repeat-x gold; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 pattern.png
画像が読み込まれ、center
とrepeat-x
の値により、プレビュー要素の垂直方向の中央で左から右にのみ繰り返されます。 さらに、次の画像に示すように、プレビュー要素はgold
の単色で塗りつぶされます。
background
の省略形の場合、値は任意の順序にすることができます。 画像が最初に来る必要はなく、色が最後に来る必要もありません。 ただし、background-size
を省略形に適用する場合、この規則には1つの例外があります。 この場合、background-size
の値は、background-position
の値の後にあり、スペースではなくスラッシュ記号(/
)で区切る必要があります。
テキストエディタでindex.html
ファイルに戻ります。 次に、クラスがstyle-15
の新しいアイテムと<h2>
のクラスがBackground Shorthand with Size
のグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-15"></div> <div class="item-info"> <h2>Background Shorthand with Size</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 次に、background
省略形プロパティを持つ.style-15
クラスセレクターを追加します。 同じurl('./images/pattern.png)
を画像に使用します。 次に、位置の値をcenter
に設定し、次にスペース、次にスラッシュ(/
)を設定します。 スラッシュの後に、別のスペースを追加し、background-size
の値として64px
を追加します。 background-size
の値には単一の値が使用されるため、背景画像の高さと幅の両方が64px
に設定されます。 最後に、スペースとダークグレーの短縮16進値#222
を追加します。 強調表示されたCSSは、これがstyles.css
ファイルにどのように表示されるかを示しています。
styles.css
... .style-14 { ... } .style-15 { background: url("./images/pattern.png") center / 64px #222; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 このバリエーションのプレビュー要素では、パターン画像がそのサイズの約半分に拡大縮小され、濃い灰色の背景色で繰り返されます。 次の画像は、このbackground
スタイルがブラウザでどのようにレンダリングされるかを示しています。
このセクションでは、background
プロパティを使用しました。これは、このチュートリアルで使用されるすべてのプロパティを組み合わせた省略形のプロパティです。 次のセクションでは、linear-gradient()
関数を使用してCSSグラデーションを試してみます。
linear-gradient
関数を使用してグラデーションを作成する
background-image
プロパティにurl()
画像ファイル以外の値を指定できます。 グラデーションを作成することもできます。 CSSには現在、linear-gradient()
、radial-gradient()
、およびconic-gradient()
の3つの異なるグラデーション関数があります。 このセクションでは、linear-gradient()
関数を使用して、2つの色の間の線形グラデーションと、複数の色と定義された角度を持つより複雑なグラデーションを作成します。
設計の観点から、グラデーションには多くの用途があります。 それらは、単色よりもダイナミックであるが、写真ほど複雑ではない視覚的美学を提供します。 グラデーションを不透明度とともに使用して、写真をより落ち着かせ、オーバーレイするテキストの読みやすさを向上させることもできます。
まず、テキストエディタでindex.html
を開き、style-16
クラスの新しいアイテムとLinear Gradient
の<h2>
をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-16"></div> <div class="item-info"> <h2>Linear Gradient</h2> </div> </div> </div> ...
変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 次に、background-image
プロパティを作成します。 値として、linear-gradient()
関数を追加します。 関数の括弧内に、to right
の単語値を使用できる方向を追加することから始めます。 この単語の値は、ブラウザに左から右へのグラデーションを描画するように指示します。 次に、コンマに続けて名前付きの色deeppink
を追加します。 その後、次のコードブロックで強調表示されているように、別のコンマと名前付きの色orange
を追加します。
styles.css
... .style-15 { ... } .style-16 { background-image: linear-gradient(to right, deeppink, orange); }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 次の画像に示すように、ブラウザは左側にdeeppink
のグラデーションを描画し、右側にorange
に色を移行します。
すべてのグラデーションは、固定値またはパーセンテージのいずれかである複数の色値と停止点を可能にします。 まず、テキストエディタでindex.html
に戻り、style-17
のクラスと<h2>
のクラスでLinear Gradient with Stops
のグリッドに別のアイテムを追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-17"></div> <div class="item-info"> <h2>Linear Gradient with Stops</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 background-image
プロパティをlinear-gradient()
値で追加します。 関数の括弧内に、175deg
の方向を追加します。 linear-gradient()
関数は、単語の方向に加えて数値の次数値を受け入れます。 最初の色はnavy
ですが、次の色にカンマを追加する前に、代わりにスペースを追加して、グラデーション上のこの色の位置を0%
に設定します。 次に、コンマを追加し、35%
の色dodgerblue
の後にコンマを追加します。 このプロセスをskyblue 50%
、次にgold 50%
で続行します。これにより、2つの色の間にハードラインが設定されます。 次に、次のコードブロックで強調表示されているCSSに示されているように、orange 51%
の後にsaddlebrown 100%
を付けてグラデーションを完成させます。
styles.css
... .style-16 { ... } .style-17 { background-image: linear-gradient(175deg, navy 0%, dodgerblue 35%, skyblue 50%, gold 50%, orange 51%, saddlebrown 100%); }
これらの変更をstyles.css
に保存してから、Webブラウザーでページを更新してください。 この色と停止点の進行により、砂漠の地平線の画像のように見える複雑なグラデーションが作成されます。 次の画像は、ブラウザでのこのグラデーションのレンダリングを示しています。
このセクションでは、linear-gradient()
CSS関数を使用して、2色のグラデーションと、複数の色とストップポイントで構成されるより複雑なグラデーションを作成しました。 最後のセクションでは、1つの要素に複数の背景を作成します。
マルチバックグラウンド法を使用して画像とグラデーションを混合する
この最後のセクションでは、このチュートリアルで使用したすべてのものを組み合わせて、単一のプレビュー要素に複数の背景を適用します。 複数の背景は、最小限のHTML要素を使用しながら、視覚的に複雑なスタイルを作成するのに役立ちます。
まず、テキストエディタでindex.html
を開き、style-18
のクラスの最後のアイテムとMultiple Backgrounds
の<h2>
をグリッドに追加します。 次のコードブロックで強調表示されているHTMLは、これがファイルにどのように表示されるかを示しています。
index.html
... <div class="grid"> ... <div class="item"> <div class="preview style-18"></div> <div class="item-info"> <h2>Multiple Backgrounds</h2> </div> </div> </div> ...
次に、変更内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。 .style-18
クラスセレクターを作成し、background
プロパティを追加します。 複数の背景が長くなる可能性があるため、プロパティ名とは別の独自の行にプロパティ値を配置すると便利な場合があります。 この最初の部分では、ハチドリの画像photo.jpg
を再度読み込みます。 次に、center / cover no-repeat
を追加します。これにより、画像が要素の中央に配置され、画像を繰り返さずにスペースを埋めるように画像が拡大縮小されます。 次のコードブロックで強調表示されているCSSは、テキストエディタでこれを記述する方法を示しています。
styles.css
... .style-17 { ... } .style-18 { background: url("./images/photo.jpg") center / cover no-repeat ; }
これらの変更をstyles.css
に保存してから、Webブラウザーに戻り、ページを更新してください。 次の画像に示すように、ハチドリの画像は要素の中央に配置され、収まるように拡大縮小されます。
複数の背景画像は、ブラウザで読み取られるときに階層化されます。 ハチドリの画像の上にグラデーションを追加するには、background
値の画像の前にグラデーションを付ける必要があります。 複数の背景の各レイヤーはコンマで区切られます。これにより、background
の短縮値の複数のセットが可能になります。
ハチドリの画像をオーバーレイするグラデーションを追加するには、styles.css
ファイルと.style-18
セレクターに戻ります。 background
プロパティとurl("./images/photo.jpg") center / cover no-repeat
の間に改行を追加します。 次に、括弧内にto top left
という単語方向のlinear-gradient()
を追加します。 カンマ、dodgerblue 10%
、transparent 80%
の順に追加します。 最後に、linear-gradient()
の閉じ括弧の後に、次の強調表示されたコードに示すように、複数の背景として区別するために別のコンマを追加します。
styles.css
... .style-18 { background: linear-gradient(to top left, dodgerblue 10%, transparent 80%), url("./images/photo.jpg") center / cover no-repeat ; }
変更内容をstyles.css
に保存してから、Webブラウザでindex.html
を更新してください。 グラデーションは、次の画像のブラウザでレンダリングされているように、右下隅の完全な青から左上隅の透明に進むハチドリの画像をオーバーレイします。
次に、プレビュー要素の左側に繰り返し画像の背景オーバーレイをもう1つ追加します。
テキストエディタでstyles.css
に戻り、background:
プロパティの後に新しい行を追加します。 url()
機能を使用して、images
ディレクトリからpattern-y.png
をロードします。 この後、背景の位置をcenter left
に設定し、スラッシュを追加して背景画像のサイズを64px
に設定します。 最後に、背景をrepeat-y
に設定して、垂直方向に繰り返し、背景セットをカンマで終了します。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。
styles.css
... .style-18 { background: url("./images/pattern-y.png") center left / 64px repeat-y, linear-gradient(to top left, dodgerblue 10%, transparent 80%), url("./images/photo.jpg") center / cover no-repeat ; }
変更をstyles.css
に保存してから、Webブラウザーに戻り、index.html
を更新します。 新しい最上層の背景は、要素の左側にあるピンクとオレンジのドットパターンです。 次の画像に示すように、パターンはグラデーションとハチドリの画像の両方をオーバーレイしています。
このセクションでは、前のセクションで開発したスキルを使用して、単一の要素に複数の背景を適用しました。 複数の背景は、余分なHTMLオーバーヘッドなしで複雑なスタイルを作成するための便利なツールです。 複数の背景がないこの同じ効果は、要素を互いに重ねて同じ寸法にするために、いくつかの追加のスタイリングプロパティを持つ少なくとも3つのHTML要素を取ります。
結論
このチュートリアルでは、HTML要素で背景を表示する方法を制御するために、多くのプロパティの例を実行しました。 単色を適用し、画像リソースをロードし、グラデーションを作成しました。 画像が要素上でどのように並べて繰り返されるかを調整し、背景画像のサイズを変更して、スペースに異なる形で収まるようにしました。 また、これらすべてのプロパティをbackground
の省略形に組み合わせて、複数の背景を作成しました。 このチュートリアルから、これらの多くの背景プロパティを操作および組み合わせて新しいものを作成する方法について何度も参照できるリソースを作成しました。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。