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

CSS で画像のスタイルを設定する方法。 CSS を使用して、Web サイトの画像を可能な限り最適な方法で表示します。この記事では、画像を配置する場所と、枠線などの装飾を含めるかどうかについて説明します。

フローティングとセンタリング

通常の方法でページに画像を挿入します。画像に適切な代替テキストを含めることを忘れないでください。

この記事を紹介する写真のように、右側の画像の周りにテキストを折り返すには、次のような CSS ルールを使用します。

img { float:左;パディング右:1em; }

float:left ルールは、画像を左マージンに移動させます。 padding-right ルールは、テキストが画像の右側にぶつからないようにします。この画像に境界線が追加された場合、画像と境界線の間にパディングが入ります。境界線のある画像を操作するには、セクション 2 を参照してください。

テキストを左で折り返すには、画像を右マージンに浮かせます。次のようなルールを使用します:

img { float:右;パディング左:1em; }

画像を中央に配置するには、まず通常はインラインの画像要素をブロックレベルの要素にする必要があります。

img { 表示:ブロック; }

次に、画像の左右に余白を追加して中央揃えにします。何かを中央に配置するための左右のマージンの適切な値は auto です。

img { 表示:ブロック;マージン右:自動;マージン左:自動; }

境界線は、ドロップシャドウ効果またはフレームの外観を作成するために使用できます。

溝の境界線スタイルを使用して太いフレームのような境界線を作成するには、次のようなルールを使用できます:

img { float:左;ボーダー幅:1em;ボーダースタイル:溝;境界線の色:#000000; }

その他のボーダースタイルには、実線、点線、破線、二重線、リッジ、インセット、およびアウトセットがあります。幅は、ピクセル、em、またはパーセンテージで表すことができます。

境界線は、画像の上下左右に選択的に適用できます。この知識を使用して、ドロップシャドウのような効果を作成できます。

右と下の境界線だけにグレーの 2 階調で実線の境界線を使用すると、ドロップシャドウ効果が得られます。

img { float:左; border-right-style:solid;境界線の右の色:#CCCCCC;ボーダーボトムスタイル:ソリッド;ボーダーボトムカラー:#999999; }

マージンは境界の外にあります。画像の右側と下部に余白を追加すると、テキストが画像にぶつかるのを防ぐことができます。

img { float:左; border-right-style:solid;ボーダー右幅:8px;境界線の右の色:#CCCCCC;ボーダーボトムスタイル:ソリッド;ボーダー底幅:8px;ボーダーボトムカラー:#999999;右マージン:1em; margin-bottom:1em; }

ページの複数の部門 (div) に画像がある場合は、子孫セレクターを使用して個別にスタイルを設定します。可能なセレクター:#content img、#sidebar img、#feature img。

破損したファイルを修復する方法

スマートライフ