序章

CSSを使用してWebページの画像をスタイリングする場合、覚えておくべき重要なアイデアがたくさんあります。 デフォルトでは、Webブラウザはデフォルトのサイズで未加工の形式で画像を表示します。 これにより、画像が他のコンテンツよりも大きくなったり、ページレイアウトに予期しない間隔の問題が発生したりする可能性があります。 このチュートリアルでは、Webページの画像スタイリングの例を紹介し、状況に合わせて画像を表示および変更する方法について情報に基づいた決定を下せるようにします。

このチュートリアルでは、コンテンツと3つの画像で構成されるWebページを作成します。 最初の画像は次のように読み込まれます <img /> 要素自体、2番目はにラップされます <figure> 適切な要素 <figcaption>、および3番目はを使用します <picture> さまざまな画面サイズでさまざまな画像をロードし、 object-fit と object-position 画像のサイズを変更するためのプロパティ。 また、レスポンシブWebデザインの基本のいくつかを探求し、画像のアクセシビリティを確保します。

前提条件

  • タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
  • CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
  • での作業経験 background-size プロパティ。詳細については、CSSチュートリアルを使用してHTML要素に背景スタイルを適用する方法を参照してください。
  • ローカルマシンに次のように保存された空のHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

このセクションでは、チュートリアル全体で作成するすべてのビジュアルスタイルのベースHTMLを設定します。 また、 styles.css ファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。

開くことから始めます index.html テキストエディタで。 次に、次のHTMLをファイルに追加します。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>City Night</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  </body>
</html>

内部で定義されたいくつかのページの側面があります <head> エレメント。 最初 <meta> elementは、テキストに使用する文字セットを指定します。 このように、アクセント記号などの特殊文字は、特別なHTMLコードなしでレンダリングされます。 二番目 <meta> elementは、ブラウザ（特にモバイルブラウザ）にコンテンツの幅の処理方法を指示します。 それ以外の場合、ブラウザは960pxのデスクトップ幅をシミュレートします。 次に、 <title> elementは、ブラウザにページのタイトルを提供します。 The <link> 要素はページスタイルで読み込まれます。 最初の3つはGoogleFonts からフォントInconsolataをロードし、最後の3つはこのチュートリアルで作成するスタイルをロードします。

次に、ページのスタイルを設定するコンテンツが必要になります。 Cupcake Ipsum のサンプルコンテンツを、スタイルで使用するフィラーテキストとして使用します。 チュートリアル全体を通して、前のステップからのコードへの追加が強調表示されます。 戻る index.html テキストエディタで、次のコードブロックから強調表示されたHTMLを追加します。

index.html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <main>
      <h2>City Night</h2>
      <p> Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
      <p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>
      <p>Danish gummies oat cake marzipan shortbread pudding chocolate cake. Donut biscuit danish chocolate cake marzipan. Bonbon cheesecake gingerbread sesame snaps brownie ice cream caramels halvah.</p>
    </main>
  </body>
</html>

The <main> 要素には、ページの主要なコンテンツが含まれ、 <h2> のテキスト見出し City Night 続いて3つ <p> コンテンツの要素。 チュートリアルを進めながら、コンテンツ間のページに画像を追加します。

変更をに保存します index.html、次に同じディレクトリにファイルを作成します。 styles.css. このファイルをテキストエディタで開きます。 あなたの中で styles.css ファイルに、次のコードブロックからCSSを追加します。

styles.css
body {
  margin: 0;
  font: 100% / 1.5 Inconsolata, monospace;
  color: hsl(230, 100%, 95%);
  background-color: hsl(230, 40%, 10%);
}

h2 {
  font-size: 3.5rem;
  font-weight: 300;
  text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
    0 0 0.125em hsla(320, 100%, 60%, 0.5),
    -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.125),
    0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.25);
}

main {
  margin: 2rem auto 4rem;
  width: 90%;
  max-width: 70rem;
}

p {
  font-size: 1.25rem;
  max-width: 75ch;
}

これらのスタイルは、視覚的な美学とレイアウトをページに追加します。 The body ルールセットは、デフォルトを調整してInconsolataフォントをロードしてから、色を水色に変更し、背景色を濃い青紫に変更します。 次に、 h2 ヘッダーのサイズが変更され、フォントの太さが薄くなり、 text-shadow 財産。 The main 要素は、ページの中央に留まり、サイズに達すると幅の拡大を停止するように設定されています 70rem、約1120pxです。 最後に、 p セレクターは font-size 少し大きい 1.25rem と別のを設定します max-width に 75ch、現在のフォントサイズで75文字です。

変更をに保存します styles.css 次に、Webブラウザを開きます。 ファイルメニュー項目を選択し、開くオプションを選択して、 index.html ブラウザのファイル。 次の画像は、このHTMLがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、このチュートリアルの初期HTMLとCSSを作成しました。 ページにカスタムフォントをロードし、を使用して独特の見出しを作成しました text-shadow 財産。 次のセクションでは、を使用して最初の画像をページに追加します <img /> 要素、デフォルトのブラウザスタイルについて学び、レスポンシブになるようにページ上の画像を設定します。

で流体幅を設定する <img /> エレメント

Web上の画像を操作する際には、注意すべき点がいくつかあります。 まず、画像はデフォルトでピクセル単位のページに表示されます。 これは、画像の高さと幅が2048ピクセルの場合、ブラウザ上でそのスペースを占有し、水平方向と垂直方向のスクロールが発生することが多いことを意味します。 次に、画像はインラインフローコンテンツと見なされます。つまり、画像はブラウザではテキストのように扱われ、インラインで配置できます。 これは、画像の周りにテキストをラップするときに役立ちます。 float プロパティですが、それ以外の場合は、最終的なレイアウトを改善するために、テキストコンテンツから画像を分離するのが最善です。

Webページの画像の操作を開始するには、という名前の新しいディレクトリを作成します images コマンドプロンプトで次を実行します。

  1. mkdir images

次に、 LukeStackpooleによる明るい色のドアのある建物の写真をダウンロードします。 この画像は、ストックフォトのウェブサイトUnsplashからのものです。 次を実行します curl 写真を新しいものにダウンロードするコマンド images ディレクトリ：

  1. curl -sL https://assets.digitalocean.com/articles/68128/night-doors.jpg -o images/night-doors.jpg

コンピュータで使用できる画像ができたので、開きます index.html テキストエディタで。 コンテンツの最初の段落の後に、 <img /> 自己閉鎖要素 src 次のコードブロックで強調表示されている属性：

index.html
...
<main>
  <h2>City Nights</h2>
  <p>Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
  <img src="images/night-doors.jpg" />
  ...
</main>
...

The src 属性は、Unsplashからダウンロードした画像にブラウザを誘導します。

画像を操作する上で非常に重要な側面は、 alt 画像の説明を含む属性。 これは、Webサイトのさまざまなユーザー、特にスクリーンリーダーを使用しているユーザーが画像コンテンツを知るのに役立ちます。 特に残りのテキストコンテンツに関連するため、画像のコンテキストに関する詳細を提供すると便利です。 画像が純粋に装飾目的である場合、 alt 空の文字列に設定された属性は許容されます。そうでない場合、スクリーンリーダーがファイル名を読み取ります。

次のコードブロックで強調表示されているHTMLは、 alt この画像のテキスト説明：

index.html
...
<img src="images/night-doors.jpg" alt="Three floors of several brightly-colored doors with a person walking on the second floor" />
...

画像の追加をに保存します index.html、次にファイルをWebブラウザで開きます。 画像は最初の段落と2番目の段落の間に読み込まれます。 次のアニメーションに示すように、ブラウザのサイズを変更しても画像には影響しません。

セクションの冒頭で述べたように、画像は画面サイズに関係なく、ネイティブサイズで表示されます。 この画像をより多くの画面サイズに合わせるために、次に画像の流動的な寸法を指定します。 流動的な画像メディアは、レスポンシブウェブデザインの重要な信条です。これは、画面やブラウザのサイズの制約に適応するコードを強調するウェブ開発の方法です。

流体画像を定義するには、 styles.css テキストエディタで。 作成する img 要素セレクター、次に追加します max-width の値を持つプロパティ 100%、次のコードブロックで強調表示されているように：

styles.css
..
p {
  font-size: 1.25rem;
  max-width: 75ch;
}

img {
  max-width: 100%;
}

The max-width プロパティは、スペースに合わせて縮小できる画像を示します。 また、ネイティブのピクセルサイズに達するまで画像を拡大することもできます。 これは、 width プロパティをに設定 100%、コンテナが画像よりも大きい場合、画像がネイティブサイズを超えて大きくなる可能性があります。 さらに、ブラウザのデフォルトの動作は、画像を比例して拡大縮小することであるため、 height プロパティが必要です。

変更をに保存します styles.css その後、ブラウザに戻って更新します index.html. ブラウザのサイズを変更して、画像がフルピクセルサイズに達するまで縮小および拡大します。 次のアニメーションは、このサイズ変更操作がブラウザーでどのようにレンダリングされるかを示しています。

このセクションでは、 <img /> タグを付けて、ページに画像を正常にロードしました。 あなたは alt 画像に属性を付け、画像の十分な説明を適用しました。 最後に、使用可能なスペースに合わせてすべての画像のサイズを変更する方法を試しました。 次のセクションでは、 <figure> と <figcaption> 要素を変更し、デフォルトのスタイル値を変更します。

キャプションに <figure> と <figcaption>

多くの場合、画像には、画像内の人物や画像の出所など、画像に関するより多くのコンテキストを読者に提供するために、説明テキストを添付する必要があります。 このような状況では、 <img /> 中 <figure> 要素と <figcaption> 説明テキストを保持する要素。 このセクションでは、これらの要素を使用し、デフォルトのスタイルを調整して、 JezaelMelgozaによる東京の街路の写真にテキストをオーバーレイします。

まず、これを実行します curl 次のコードブロックでコマンドを実行して、イメージをにダウンロードします。 images ディレクトリ：

  1. curl -sL https://assets.digitalocean.com/articles/68128/tokyo-street.jpg -o images/tokyo-street.jpg

次に、開く index.html テキストエディタで。 2番目と3番目の段落の間に、 <figure> エレメント。 以内 <figure>、を追加します <img /> 要素と src ダウンロードした画像を指す属性。 それから加えて alt 写真の内容を説明するテキスト。 これらの更新は、次のコードブロックで強調表示されています。

index.html
...
<p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>

<figure>
  <img src="images/tokyo-street.jpg" alt="A motion blurred street with an in-focus taxi." />
</figure>

<p>Danish gummies oat cake marzipan shortbread pudding chocolate cake. Donut biscuit danish chocolate cake marzipan. Bonbon cheesecake gingerbread sesame snaps brownie ice cream caramels halvah.</p>
...

これらの更新を保存してから、ブラウザに戻って読み込みます index.html. 画像は2番目と3番目の段落の間に表示されますが、デフォルトのスタイルのため、次の画像に示すように、いくつかのはめ込み間隔が適用されます。

の余分な間隔 <figure> で適用されます margin 要素の左側と右側のプロパティ。 これは、ほとんどのブラウザに見られるデフォルトのスタイルであり、 40px 左右のマージンと 1em 上下のマージン。

このデフォルトのスタイルを調整するには、に戻ります。 styles.css テキストエディタで。 新しいを作成します figure 要素セレクターと内部に追加 margin プロパティをに設定 2rem 0、次のコードブロックで強調表示されているように：

styles.css
...
img {
  max-with: 100%;
}

figure {
  margin: 2rem 0;
}

の設定 margin に 2rem 0 適用されます 2rem 上部と下部の間隔 figure 側面の間隔を削除します。 これにより、画像のテキスト間のスペースが増えますが、より多くのスペースを占めることができます。

変更をに保存します styles.css ブラウザに戻ってページを更新します。 次の画像は、 figure 間隔がレンダリングされるようになりました。

次に、画像のキャプションを追加するには、に戻ります。 index.html テキストエディタで。 内部 <figure> 要素とその下 <img /> 要素、追加 <figcaption> 鬼ごっこ。 次のコードブロックで強調表示されているHTMLは、キャプションテキストを使用してこの設定を示しています。

index.html
...
<figure>
  <img src="images/tokyo-street.jpg" alt="A motion blurred street with an in focus taxi." />
  <figcaption>Taxi in Tokyo, Japan</figcaption>
</figure>
...

キャプションの内容は、はっきりとはわからない画像に関する詳細情報を提供するのに役立ちます。 これは、 alt 画像の内容を言葉で説明するテキスト。 この場合、有用なキャプションは写真が撮影された場所です。

HTMLの順序により、 <figcaption> コンテンツは画像の下に表示されますが、次に、テキストを読みやすくするために暗いグラデーションで画像をオーバーレイするようにスタイルを設定します。

戻る styles.css テキストエディタで。 オーバーレイを作成するには、 position: relative プロパティ値をに追加する必要があります figure セレクタ。 次に、を作成します figcaption 要素セレクターを追加し、次の強調表示されたCSSを追加します。

styles.css
...
figure {
  margin: 2rem 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5rem 1rem 1rem;
  background: linear-gradient(to top, hsla(230, 40%, 5%, 0.95), hsla(230, 40%, 5%, 0));
}

The figcaption スタイルは、画像の下部をオーバーレイするようにコンテナを設定します position, bottom, right、 と left プロパティ。 次に、 padding プロパティは、上面が大きく、 5rem グラデーションがテキストコンテンツの上に広がるための十分なスペースを提供し、左側、右側、および下部のスペースを小さくします。 1rem 間隔。 最後に、グラデーションを作成します background プロパティの linear-gradient() 遷移が95% opacityのダークブルーから0% opacityの同じ色までの値。 一緒に、これはキャプションを含むために下部に影付きのエッジを作成します。

変更をに保存します styles.css ブラウザに戻ってページを更新します。 のグラデーションの背景 <figcaption> 画像の下部に表示されますが、下部と右側の画像をオーバーシュートします。 次の画像は、画像とグラデーションの違いの拡大図を示しています。

このミスアライメントの原因となる2つの異なる問題があり、スタイルを調整して問題を修正するには2つの方法が必要です。

最初はどのように対処します <img /> デフォルトでは、要素はインラインテキストとして扱われます。 下部のこの余分なスペースは line-height テキストの行の間にスペースを作る間隔。 これを調整するには、次のいずれかを変更する2つの方法があります。 line-height の <figure> 要素または設定 <img> 持っている display プロパティをに設定 block.

2番目の問題は、画像のピクセル間のサイズと max-width の <main> エレメント。 以来 <figure> は block 要素と <figcaption> は左端から右端にまたがるように設定されており、画像よりも大きなスペースを埋めるように拡大します。 この問題を修正する最初の方法は、 <img /> 持っている width に設定 100%. これを設定することで width 画像は無視します max-width: 100% デフォルトで、代わりにスペース全体を埋めます。 このアプローチは、サイズの違いによっては画像の歪みを引き起こす可能性があることに注意してください。 これを修正するための2番目の戦略は、 <figure> 持っている display プロパティをに設定 inline-block. このアプローチにより、 <figure> 内容に合わせて縮小する要素のサイズ。

戻る styles.css テキストエディタで、を追加します display 各問題のアプローチ。 の中に figure セレクター、追加 display の値に設定されたプロパティ inline-block. 次に、を作成します figure img 子孫コンビネータセレクター display: block、次のコードブロックで強調表示されているように：

styles.css
...
figure {
  margin: 2rem 0;
  position: relatve;
  display: inline-block;
}

figure img {
  display: block;
}

figcaption {
  ...
}

変更をに保存します styles.css その後、更新します index.html Webブラウザで。 The <figure> 画像の自然なサイズに縮小され、画像はテキストとして扱われなくなります。 次の画像は、この調整がどのように行われるかを示しています。 display プロパティがレンダリングされます：

このセクションでは、 <figure> と <figcaption> 要素。 のデフォルトスタイルについて学びました <figure> と <img /> 要素と、より制御された結果を得るためにそれらを変更する方法。 最後に、写真に関するコンテキスト情報を画像にオーバーレイするキャプションを作成しました。 最後のセクションでは、スタイリングを使用します <picture> を使用する要素 object-fit と object-position プロパティ。

レスポンシブ画像スワッピングの使用 <picture>

さまざまな画面サイズの画像を操作する場合、画像が適切なサイズではなく、レイアウトに適応する必要がある場合があります。 The <picture> 要素は、さまざまな画面サイズで表示するさまざまな画像を定義することにより、このニーズを満たすために存在します。 その後、画像をより厳密に制御できます。 object-fit と object-position プロパティ。特定のサイズ間で画像を拡大縮小する方法を設定します。

での作業を開始するには <picture> 要素には、同じソース画像の一連の異なるサイズの画像が必要になります。 以下を使用してください curl Pawel Nolbertによる東京の同じ航空写真の3つの画像のzipアーカイブをダウンロードするコマンド：

  1. curl -sL https://assets.digitalocean.com/articles/68128/picture.zip -o images/picture.zip

zipファイルのダウンロードが完了したら、コンテンツを画像フォルダーに抽出します。 プロンプトで次のコマンドを実行して、ファイルを images ディレクトリ：

  1. unzip images/picture.zip -d ./images

開催中 index.html テキストエディタで。 まず、作成します <div> とともに class の属性 hero 開口部の間 <body> と <main> 要素。 次に、強調表示された残りを追加します <picture> 次のコードブロックの要素：

index.html
...
<body>
  <div class="hero">
    <picture>
      <source srcset="images/tokyo-large.jpg" media="(min-width:70rem)" />
      <source srcset="images/tokyo-medium.jpg" media="(min-width:40rem)" />
      <img class="hero-image" src="images/tokyo-small.jpg" alt="Time-lapse exposure of a city at night." />
    </picture>
  </div>
  <main>
...

The <picture> 要素には、同じ数の要素で構成される特定の構造が必要です <source /> 必要に応じて要素と1つ <img /> 内部の最後のアイテムとしての要素。 のすべてのアクセシビリティとスタイリング <picture> 要素はから来ます <img /> 要素、それが理由です <img /> があります class そしてその <picture> ではない。

The <img /> メディアクエリの要件がない場合に開始するために使用されるデフォルトのイメージです。 The <source /> 要素は2つのことを定義します：画像ファイルの場所と srcset 属性、および画面サイズのシナリオ media 属性。 次に、ブラウザは指定された画面サイズに適した画像にアクセスしてロードし、サイズが変更された場合は画像を交換します。

変更をに保存します index.html、次にファイルをWebブラウザで開きます。 次のアニメーションは、ウィンドウのサイズが大きくなるにつれてブラウザが画像を交換する様子を示しています。

画面サイズが変わると、画像サイズも変わり、下のテキストがページの下に押し出されます。 このヒーロー画像領域とコンテンツの間に一貫した間隔を作成するために、 height プロパティは、一貫したサイズを維持するように設定できます。

戻る styles.css テキストエディタで。 ページの下部で、次のクラスセレクターを作成します .hero. セレクターブロックで、次のコードブロックから強調表示されたCSSを追加します。

styles.css
...
.hero {
  height: 80vh;
  max-height: 40rem;
}

The height に設定された値 80vh つまり、 .hero コンテナは、少なくともブラウザの画面の高さの80% ofを占めます。 そうして max-height プロパティは、 .hero より大きくなることはありません 40rem、これは640ピクセルの高さに相当します。

変更をに保存します styles.css 更新します index.html ブラウザで。 次のアニメーションが示すように、テキストは一貫した位置を維持します。 一方、画像とコンテンツの間の視覚的な距離は、画像がテキストの後ろにスライドするポイントに調整されます。

このテキストと画像の重なりは、コンテンツが祖先のコンテナを超えたとしても、コンテンツの側面で誤ったブラウザが表示されたままになっている結果です。 これに対する簡単な修正は、 overflow: hidden に .hero 要素ですが、画像を小さく縮小した場合の余分なスペースには対応していません。 両方の問題の解決策を作成するには、 object-fit プロパティは、背景画像と同様のコントロールを画像に与えることで役立ちます。 background-size 財産。

で作業を開始するには object-fit、 戻る styles.css テキストエディタで。 以来 <img /> elementは、のスタイリングを制御する要素です。 <picture> 要素、クラスセレクターを作成します .hero-image 次のコードブロックから強調表示されたCSSを追加します。

styles.css
...
.hero {
  height: 80vh;
  max-height: 40rem;
}

.hero-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

で作業するために object-fit プロパティでは、画像は垂直方向と水平方向の両方で拡大できる必要があります。 を設定することにより height と width にプロパティ 100%、あなたは object-fit プロパティは、画像のサイズ変更を完全に制御します。 なし object-fit プロパティの場合、画像は親コンテナに合うように押しつぶされます。 The cover 値を指定すると、コンテナの向きに応じて、画像を垂直方向または水平方向に端から端まで表示できます。 The object-fit プロパティは、と同じ値を受け入れることができます background-size を含むプロパティ contain および寸法値。

この新しい追加を保存します styles.css 更新します index.html Webブラウザで。 次のアニメーションは、 object-fit プロパティを使用すると、画像を拡大して、 .hero コンテナであり、背景画像のように、コンテナの端を横切ると非表示になります。

最後に、 object-position 財産。 これは、 background-position 画像を特定の領域に固定できるようにするプロパティ。

戻る styles.css テキストエディタで、 object-position プロパティに .hero-image セレクタ。 プロパティの値をに設定します bottom right、サイズ変更時に画像を右下の領域に固定します。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
.hero-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom right;
}

この変更をに保存します styles.css、次にブラウザに戻って更新します index.html.

今回は、ブラウザの幅が変化し、画像が拡大縮小されると、次のアニメーションに示すように、拡大縮小はコンテナの中心から始まります。

このセクションでは、 <picture> メディア要素、 object-fit プロパティ、および object-position 財産。 この要素とプロパティの組み合わせを使用して、ページの上部に大きな画像のサイズ変更と調整を作成しました。

結論

このチュートリアル全体で実践したテクニックを使用して、デザインとレイアウトに合わせて画像をフォーマットするスタイルを作成する準備が整いました。 グローバルを設定してレスポンシブ画像を作成しました max-width: 100% すべてに <img /> ページ上の要素。 次に、画像のキャプションをフォーマットして、画像をオーバーレイし、画像とともに拡大および縮小します。 次に、 <picture> 要素と一緒に object-fit と object-position 画面サイズに最適になるように画像を交換および拡大縮小するプロパティ。 これらの戦略を使用すると、画像やページレイアウトを含むより複雑な状況を解決するのに役立ちます。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。