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-image10% oを固定します。次に、bottom 40pxは、要素の下からbackground-image40pxを設定します。

変更を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のスタイルを設定する方法の他のチュートリアルを試してください。

CSSを使用してHTML要素に背景スタイルを適用する方法

序章

前提条件

初期HTMLとCSSの設定

要素でbackground-colorおよびbackground-imageを使用する

background-repeatプロパティを使用した画像のタイリング

background-positionで背景画像の配置を調整する

background-sizeプロパティを使用した背景画像のサイズ変更

background-attachmentプロパティを使用した背景画像の貼り付け

プロパティをbackgroundプロパティに結合する

linear-gradient関数を使用してグラデーションを作成する

マルチバックグラウンド法を使用して画像とグラデーションを混合する

結論

要素で`background-color`および`background-image`を使用する

`background-repeat`プロパティを使用した画像のタイリング

`background-position`で背景画像の配置を調整する

`background-size`プロパティを使用した背景画像のサイズ変更

`background-attachment`プロパティを使用した背景画像の貼り付け

プロパティを`background`プロパティに結合する

`linear-gradient`関数を使用してグラデーションを作成する