CSSで画像スタイルを設定する方法

CSS (Cascading Style Sheets) は、Web ページの外観と書式設定を記述するために使用されるスタイル シート言語です。 CSS は、画像を含むスタイル シートを通じて Web ページ内の要素にさまざまなスタイルを設定できます。この記事では、CSS を使用して画像のスタイルを設定する方法を学びます。

1. 画像を追加する

画像スタイルの設定方法を学ぶ前に、まず Web ページに画像を追加する方法を理解する必要があります。 Web ページに画像を追加する最も簡単な方法は、HTML の img タグを使用することです。 img タグを使用すると、画像の URL (Web アドレス) を指定できます:

ここで、「src」(source) 属性は画像の URL を指定します。相対 URL または絶対 URL を使用できます。画像が同じディレクトリにある場合は、相対 URL を使用できます:

これにより、「image.jpg」という名前の画像が指定されます。 " ファイルは同じディレクトリにあります。画像ファイルが異なるディレクトリにある場合は、次のような相対パスを使用できます:

here この例では, 「..」は上のディレクトリに戻り、「images」ディレクトリに移動して「image.jpg」という名前のファイルを見つけることを意味します。

2. 画像サイズの設定

画像サイズの設定は、CSS で最もよく使用されるスタイルの 1 つです。画像のサイズは「width」プロパティと「height」プロパティを使用して指定できます。これらのプロパティは、ピクセル (px)、パーセンテージ、およびその他の長さの単位を値として受け入れます。

たとえば、画像サイズを幅 200 ピクセル、高さ 100 ピクセルに設定するには、次の CSS を使用できます:

img {
width: 200px;
height: 100px;
}

幅または高さのプロパティをパーセントに設定することもできます。たとえば、画像のサイズをその画像に含まれる要素の 50% に設定する場合は、次の CSS を使用できます:

img {
width: 50%;
height: 50 %;
}

単一の「width」属性を使用して画像の幅を設定し、アスペクト比を維持するために高さを自動的に計算できます。たとえば、次の CSS は画像の幅を 300 ピクセルに設定します:

img {
width: 300px;
}

3. 配置とフローティング

画像の位置や配置もCSSで設定できます。 「margin」プロパティと「padding」プロパティを使用して、画像の周囲の空白を制御できます。

たとえば、次の CSS は画像を左に配置し、画像の左と上に 10 ピクセルのマージンを追加します。

img {
display: block;
float: left ;
margin: 10px 0 0 10px;
}

この例では、「display」属性によって画像がブロックレベルの要素に設定され、他のコンテンツの下に表示されます。 「float」プロパティと「left」値は、画像を左にフローティングします。最後に、「margin」属性の値は上、右、下、左の順で、上と左のマージンを 10 ピクセルに指定します。

「text-align」属性を使用して画像を整列させることもできます。たとえば、次の CSS は画像を中央に配置します:

img {
display: block;
margin: 0 auto;
text-align: center;
}

この例では、「margin」属性の値は「0 auto」です。これは、画像を水平方向に中央揃えにすることを意味します。最後に、「text-align」プロパティを「center」に設定して、画像を垂直方向の中央に配置します。

4. 丸い角と境界線

もう 1 つの一般的な画像スタイルは、丸い角と境界線です。 「border-radius」プロパティを使用して、境界線の角の半径を設定できます。たとえば、次の CSS は、画像に 50 ピクセルの丸い境界線を設定します。

img {
border-radius: 50px;
}

「border」属性 画像の境界線の幅、スタイル、色を設定します。たとえば、次の CSS は、画像を黒枠付きの幅 3 ピクセルに設定します。

img {
border: 3px plain black;
}

「border」を使用できます。 -top"、"border-right"、"border-bottom"、および "border-left" プロパティはそれぞれ異なる境界線を設定します。

概要

CSS を使用すると、Web ページ内の画像のスタイルを簡単に設定できます。画像のサイズ、位置、配置、角丸、枠線を設定できます。これらのスタイルは、CSS ルール セレクターを介して、特定のタイプの 1 つ以上の画像要素に適用できます。

以上がCSSで画像スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。