web-dev-qa-db-ja.com

CSSを使用して複数の画像に異なるスタイルを設定するにはどうすればよいですか？

基本的には、さまざまな画像が散りばめられた長いエッセイをスタイリングしています。最初の画像を「float：左」にし、2番目の画像を「float：右」にしたいと思います。私はこのように画像のスタイルを設定できることを知っています：

img {
float: left;
}

これにより、各画像のスタイルが同じになります。各画像のスタイルを変えるにはどうすればよいですか？それぞれの画像を異なるdivクラスに配置して、スタイルを変えることができるようにしましたが、うまくいきませんでした。

次のように、htmlタグ内の各画像のスタイルを設定できることも理解しています。

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

HTMLとは別に、外部スタイルシート（CSS）でスタイルを維持するのが最善であると聞いています。これはインラインスタイリングが必要な場合ですか？

htmlcssimagecss-floatinline-styles
7
cphil

次のように、各画像に異なるcssを定義するのに役立つクラスまたはIDを各画像に与えることができます

<img src="" class="image1">
<img src="" class="image2">

あなたが定義できるCSSファイルで

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}
5
priya786

画像にクラスを指定すると、そのクラスですべての画像を次のようにスタイル設定できます。

.left {
  border: solid 5px red;
  float: left;
}

.right {
  border: solid 5px blue;
  float: right;
}
<img src="ABCD.png" class="left">
<img src="ABCD.png" class="right">
1
Bill

上記はすべて問題ありませんが、この場合は共通の画像設定をグループ化することをお勧めします。これにより、左/右クラスには異なる点のみが含まれます。

/* Group the common attributesso that you only need to set it once */
.picture, .leftPicture, .rightPicture {
    border: 2px dotted gray;
    width: 200px;
}

.leftPicture {
    float:left;
}

.rightPicture {
    float:right;
}
0
Marius Vorster

これを試してください

img{width: 200px;height:200px;background-color: antiquewhite}
.left{float:left}
.right{float:right}


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left">
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right">

これにより、2つの画像が左右にフロートします

0
sanoj lawrence