CSSを使用して図と画像のHTML要素のスタイルを設定する方法
序章
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をファイルに追加します。
<!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を追加します。
<!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を追加します。
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
コマンドプロンプトで次を実行します。
- mkdir images
次に、 LukeStackpooleによる明るい色のドアのある建物の写真をダウンロードします。 この画像は、ストックフォトのウェブサイトUnsplashからのものです。 次を実行します curl
写真を新しいものにダウンロードするコマンド images
ディレクトリ:
- curl -sL https://assets.digitalocean.com/articles/68128/night-doors.jpg -o images/night-doors.jpg
コンピュータで使用できる画像ができたので、開きます index.html
テキストエディタで。 コンテンツの最初の段落の後に、 <img />
自己閉鎖要素 src
次のコードブロックで強調表示されている属性:
...
<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
この画像のテキスト説明:
...
<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%
、次のコードブロックで強調表示されているように:
..
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
ディレクトリ:
- 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
写真の内容を説明するテキスト。 これらの更新は、次のコードブロックで強調表示されています。
...
<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
、次のコードブロックで強調表示されているように:
...
img {
max-with: 100%;
}
figure {
margin: 2rem 0;
}
の設定 margin
に 2rem 0
適用されます 2rem
上部と下部の間隔 figure
側面の間隔を削除します。 これにより、画像のテキスト間のスペースが増えますが、より多くのスペースを占めることができます。
変更をに保存します styles.css
ブラウザに戻ってページを更新します。 次の画像は、 figure
間隔がレンダリングされるようになりました。
次に、画像のキャプションを追加するには、に戻ります。 index.html
テキストエディタで。 内部 <figure>
要素とその下 <img />
要素、追加 <figcaption>
鬼ごっこ。 次のコードブロックで強調表示されている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を追加します。
...
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
、次のコードブロックで強調表示されているように:
...
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アーカイブをダウンロードするコマンド:
- curl -sL https://assets.digitalocean.com/articles/68128/picture.zip -o images/picture.zip
zipファイルのダウンロードが完了したら、コンテンツを画像フォルダーに抽出します。 プロンプトで次のコマンドを実行して、ファイルを images
ディレクトリ:
- unzip images/picture.zip -d ./images
開催中 index.html
テキストエディタで。 まず、作成します <div>
とともに class
の属性 hero
開口部の間 <body>
と <main>
要素。 次に、強調表示された残りを追加します <picture>
次のコードブロックの要素:
...
<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を追加します。
...
.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を追加します。
...
.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は、これがどのように記述されているかを示しています。
...
.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のスタイルを設定する方法の他のチュートリアルを試してください。