あなたのイメージをスタイルし、イメージをスタイルで使用する
多くの人々がテキストを調整し、フォント、色、サイズなどを変更するためにCSSを使用します。 しかし、多くの人がしばしば忘れるのは、CSSを画像とともに使用できることです。
イメージ自体を変更する
CSSを使用すると、イメージをページに表示する方法を調整できます。 これは、あなたのページの一貫性を維持するのに本当に便利です。 すべての画像にスタイルを設定することにより、画像の標準的な外観を作成します。 あなたができることのいくつか：
- 画像の周囲に輪郭や輪郭を追加する
- リンクされた画像の周りの色付きの枠を削除する
- 画像の幅や高さを調整する
- ドロップシャドウを追加する
- 画像を回転する
- 画像が上に乗ったときにスタイルを変更する
あなたのイメージを国境にすることは始めるのに最適な場所です。 しかし、あなたは境界線以上のものを考慮する必要があります - イメージのエッジ全体を考え、マージンとパディングを調整する必要があります 。 細い黒い境界線を持つ画像はすばらしく見えますが、境界線と画像の間にいくつかのパディングを追加するとさらに見栄えが良くなります。
img {
国境：1pxソリッドブラック;
パディング：5px;
}
可能であれば、 装飾されていない画像を常にリンクすることは良い考えです。 しかし、あなたがそうするとき、ほとんどのブラウザが画像の周りに色のついた境界を追加することを忘れないでください。 上記のコードを使用して境界線を変更しても、リンク上の境界線を削除または変更しない限り、リンクはその境界線を上書きします。 これを行うには、CSSの子ルールを使用して、リンクされた画像の周囲の枠線を削除または変更する必要があります。
img> a {
ボーダー：なし;
}
CSSを使用して画像の高さと幅を変更または設定することもできます。 ダウンロード速度のためにブラウザを使用して画像サイズを調整するのは良い考えではありませんが、画像のサイズを変更しても見栄えがよくなります。 また、CSSを使用すると、イメージをすべて標準の幅や高さに設定したり、寸法をコンテナに対して相対的に設定したりすることもできます。
最高の結果を得るには、イメージのサイズを変更するときに、高さまたは幅のいずれかのサイズのみをサイズ変更する必要があります。 これは、画像がアスペクト比を維持しているので、奇妙に見えることはないだろう。 別の値をautoに設定するか、ブラウザにアスペクト比の一貫性を維持するように指示します。
img {
幅：50％;
高さ：自動;
}
CSS3は、新しいプロパティobject-fitとobject-positionを使ってこの問題を解決します。 これらのプロパティを使用すると、正確な画像の高さと幅、およびアスペクト比の処理方法を定義できます。 これにより、画像の周りにレターボックス効果が作成されたり、必要なサイズに収まるように画像がトリミングされたりすることがあります。
CSS3オブジェクトフィットとオブジェクト位置プロパティはまだ広くサポートされていませんが、最新のブラウザではサポートされている他のCSS3プロパティもあり、イメージを変更することができます。 ドロップシャドウ、丸みのあるコーナー、イメージを回転、スキュー、または移動するための変換は、現代の最新のブラウザーではすべて機能しています。 次に、CSSトランジションを使用して、ホバーオーバー、クリック、または一定期間の経過後に画像を変更することができます。
画像を背景として使用する
CSSを使用すると、あなたのイメージで華やかな背景を簡単に作成できます。
ページ全体または特定の要素だけに背景を追加できます。 background-imageプロパティでページ上に背景イメージを作成するのは簡単です：
体 {
背景画像：url（background.jpg）;
}
ボディセレクタをページ上の特定の要素に変更し、背景を1つの要素に置きます。
あなたがイメージでできるもう一つの楽しみは、ウォーターマークのようにページの残りの部分でスクロールしない背景イメージを作成することです。 あなたはちょうど、スタイルbackground-attachment：fixedを使用します。 あなたの背景イメージと一緒に。 背景のための他のオプションには、background-repeatプロパティを使用して、それらを水平方向または垂直方向にタイル化することが含まれます。
background-repeatを書く：repeat-x; イメージを水平方向に並べ替え、background-repeat：repeat-y; 縦に並べます。 また、background-positionプロパティで背景画像を配置することもできます。
CSS3では、あなたの背景にもスタイルを追加しています。 任意のサイズの背景に合わせて画像を引き伸ばしたり 、背景サイズをウィンドウサイズ に合わせて 設定したりできます 。 位置を変更して、背景画像をクリップすることができます。 しかし、CSS3に関する最も良い点の1つは、複数の背景画像をレイヤーして、さらに複雑なエフェクトを作成できることです。
HTML5がスタイルイメージを助ける
HTML5のFIGURE要素は、ドキュメント内に単独で置くことができるイメージの周りに配置する必要があります。 それを考える方法の1つは、画像が付録に現れることができれば、それがFIGURE要素の内側にあることです。 その要素とFIGCAPTION要素を使用して、画像にスタイルを追加することができます。