CSSを使用して図と画像のHTML要素のスタイルを設定する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
CSSを使用してWebページの画像をスタイリングする場合、覚えておくべき重要なアイデアがたくさんあります。 デフォルトでは、Webブラウザはデフォルトのサイズで未加工の形式で画像を表示します。 これにより、画像が他のコンテンツよりも大きくなったり、ページレイアウトに予期しない間隔の問題が発生したりする可能性があります。 このチュートリアルでは、Webページの画像スタイリングの例を紹介し、状況に合わせて画像を表示および変更する方法について情報に基づいた決定を下せるようにします。
このチュートリアルでは、コンテンツと3つの画像で構成されるWebページを作成します。 最初の画像はそれ自体で<img />要素として読み込まれ、2番目の画像は適切な<figcaption>で<figure>要素にラップされ、3番目の画像は[ X177X] 要素を使用して、さまざまな画面サイズでさまざまな画像を読み込み、object-fitおよびobject-positionプロパティを使用して画像のサイズを変更します。 また、レスポンシブWebデザインの基本のいくつかを探求し、画像のアクセシビリティを確保します。
前提条件
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
background-sizeプロパティの操作経験。これについては、CSSチュートリアルを使用してHTML要素に背景スタイルを適用する方法を参照してください。- ローカルマシンに
index.htmlとして保存された空の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>要素は、テキストに使用する文字セットを指定します。 このように、アクセント記号などの特殊文字は、特別なHTMLコードなしでレンダリングされます。 2番目の<meta>要素は、ブラウザー（特にモバイルブラウザー）にコンテンツの幅の処理方法を指示します。 それ以外の場合、ブラウザは960pxのデスクトップ幅をシミュレートします。 次に、<title>要素は、ブラウザにページのタイトルを提供します。 <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>
<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;
}
これらのスタイルは、視覚的な美学とレイアウトをページに追加します。 bodyルールセットは、デフォルトを調整してInconsolataフォントをロードし、色を水色に、背景色を濃い青紫に変更します。 次に、h2ヘッダーのサイズが変更され、フォントの太さが薄くなり、text-shadowプロパティを使用して独自の効果が得られます。 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属性を追加します。
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> ...
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要素セレクターを作成し、100%の値でmax-widthプロパティを追加します。
styles.css
..
p {
font-size: 1.25rem;
max-width: 75ch;
}
img {
max-width: 100%;
}
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>内に、ダウンロードした画像を指すsrc属性を持つ<img />要素を追加します。 次に、写真の内容を説明する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));
}
figcaptionスタイルは、position、bottom、right、およびleftプロパティで画像の下部をオーバーレイするようにコンテナーを設定します。 次に、paddingプロパティは、5remで上面が大きく、グラデーションがテキストコンテンツの上に広がるための十分なスペースを提供し、左側、右側、および下面の[ X193X]間隔。 最後に、backgroundプロパティのlinear-gradient()値を使用してグラデーションを作成します。このグラデーションは、95% o間隔で濃い青から0% o間隔で同じ色に遷移します。 一緒に、これはキャプションを含むために下部に影付きのエッジを作成します。
変更内容をstyles.cssに保存し、ブラウザに戻ってページを更新します。 <figcaption>のグラデーションの背景は画像の下部に表示されますが、画像の下部と右側でオーバーシュートします。 次の画像は、画像とグラデーションの違いの拡大図を示しています。
このミスアライメントの原因となる2つの異なる問題があり、スタイルを調整して問題を修正するには2つの方法が必要です。
1つ目は、<img />要素がデフォルトでインラインテキストとしてどのように扱われるかを扱います。 下部にあるこの余分なスペースは、line-heightの間隔であり、テキストの行の間にスペースを作ります。 これを調整するには、<figure>要素のline-heightを変更するか、<img>をdisplayプロパティをblock。
2番目の問題は、画像のピクセル間のサイズと<main>要素のmax-widthのサイズの違いです。 <figure>はblock要素であり、<figcaption>は左端から右端にまたがるように設定されているため、画像よりも大きなスペースを埋めるように拡大します。 この問題を修正する最初の方法は、<img />をwidthを100%に設定するように変更することです。 このwidthを設定すると、画像はmax-width: 100%のデフォルトを無視し、代わりにスペース全体を埋めます。 このアプローチは、サイズの違いによっては画像の歪みを引き起こす可能性があることに注意してください。 これを修正する2番目の戦略は、<figure>を変更して、displayプロパティをinline-blockに設定することです。 このアプローチにより、<figure>要素のサイズがその内容に合わせて縮小されます。
テキストエディタでstyles.cssに戻り、問題ごとにdisplayアプローチを追加します。 figureセレクターで、inline-blockの値に設定されたdisplayプロパティを追加します。 次に、次のコードブロックで強調表示されているように、display: blockを使用してfigure img子孫コンビネーターセレクターを作成します。
styles.css
...
figure {
margin: 2rem 0;
position: relatve;
display: inline-block;
}
figure img {
display: block;
}
figcaption {
...
}
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新してください。 <figure>は画像の自然なサイズに縮小され、画像はテキストとして扱われなくなります。 次の画像は、displayプロパティに対するこの調整がどのようにレンダリングされるかを示しています。
このセクションでは、<figure>および<figcaption>要素を使用しました。 <figure>および<img />要素のデフォルトのスタイルと、より制御された結果を得るためにそれらを変更する方法について学習しました。 最後に、写真に関するコンテキスト情報を画像にオーバーレイするキャプションを作成しました。 前のセクションでは、object-fitおよびobject-positionプロパティを使用して、<picture>要素のスタイルを設定します。
<picture>でのレスポンシブ画像スワッピングの使用
さまざまな画面サイズの画像を操作する場合、画像が適切なサイズではなく、レイアウトに適応する必要がある場合があります。 <picture>要素は、さまざまな画面サイズで表示するさまざまな画像を定義することにより、このニーズを満たすために存在します。 次に、object-fitおよびobject-positionプロパティを使用して画像をより厳密に制御できます。これらのプロパティは、特定のサイズ間で画像を拡大縮小する方法を設定します。
<picture>要素の操作を開始するには、同じソース画像の一連の異なるサイズの画像が必要になります。 次のcurlコマンドを使用して、 PawelNolbertによる東京の同じ航空写真の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を開きます。 まず、<body>要素と<main>要素の間にheroのclass属性を持つ<div>を作成します。 次に、次のコードブロックから残りの強調表示された<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>
...
<picture>要素には、必要な数の<source />要素と、内部の最後のアイテムと同じ1つの<img />要素で構成される特定の構造が必要です。 <picture>要素のすべてのアクセス可能性とスタイルは、<img />要素に由来します。そのため、<img />にはclassと<picture>があります。 ] ではない。
<img />は、メディアクエリの要件がない場合に開始するために使用されるデフォルトのイメージです。 <source />要素は、srcset属性を持つ画像ファイルの場所と、media属性を持つ画面サイズシナリオの2つを定義します。 次に、ブラウザは指定された画面サイズに適した画像にアクセスしてロードし、サイズが変更された場合は画像を交換します。
変更内容をindex.htmlに保存し、Webブラウザでファイルを開きます。 次のアニメーションは、ウィンドウのサイズが大きくなるにつれてブラウザが画像を交換する様子を示しています。
画面サイズが変わると、画像サイズも変わり、下のテキストがページの下に押し出されます。 このヒーロー画像領域とコンテンツの間に一貫した間隔を作成するために、heightプロパティを設定して一貫したサイズを維持することができます。
テキストエディタでstyles.cssに戻ります。 ページの下部で、.heroのクラスセレクターを作成します。 セレクターブロックで、次のコードブロックから強調表示されたCSSを追加します。
styles.css
...
.hero {
height: 80vh;
max-height: 40rem;
}
heightの値を80vhに設定すると、.heroコンテナは少なくともブラウザの画面の高さの80% oを占めることになります。 次に、max-heightプロパティにより、.heroが40rem（640ピクセルの高さに相当）より大きくならないようにします。
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新します。 次のアニメーションが示すように、テキストは一貫した位置を維持します。 一方、画像とコンテンツの間の視覚的な距離は、画像がテキストの後ろにスライドするポイントに調整されます。
このテキストと画像の重なりは、コンテンツが祖先のコンテナを超えたとしても、コンテンツの側面で誤ったブラウザが表示されたままになっている結果です。 これを簡単に修正するには、.hero要素にoverflow: hiddenを適用しますが、画像を小さく縮小した場合の余分なスペースには対応していません。 両方の問題の解決策を作成するために、object-fitプロパティは、background-sizeプロパティで背景画像と同様のコントロールを画像に与えることで役立ちます。
object-fitの操作を開始するには、テキストエディタでstyles.cssに戻ります。 <img />要素は<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プロパティがないと、画像は親コンテナに合うように押しつぶされます。 coverの値を使用すると、コンテナの向きに応じて、画像を縦または横に端から端まで表示できます。 object-fitプロパティは、containやディメンション値など、background-sizeプロパティと同じ値を受け入れることができます。
この新しい追加をstyles.cssに保存し、Webブラウザーでindex.htmlを更新します。 次のアニメーションは、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プロパティについて説明しました。 この要素とプロパティの組み合わせを使用して、ページの上部に大きな画像のサイズ変更と調整を作成しました。
結論
このチュートリアル全体で実践したテクニックを使用して、デザインとレイアウトに合わせて画像をフォーマットするスタイルを作成する準備が整いました。 ページ上のすべての<img />要素にグローバルmax-width: 100%を設定して、レスポンシブ画像を作成しました。 次に、画像のキャプションをフォーマットして、画像をオーバーレイし、画像とともに拡大および縮小します。 次に、<picture>要素とobject-fitおよびobject-positionプロパティを使用して、画面サイズに最も合うように画像を交換および拡大縮小しました。 これらの戦略を使用すると、画像やページレイアウトを含むより複雑な状況を解決するのに役立ちます。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
