imgをCSSで編集する際のコード[border-radiusなど]

今回は、imgの画像をCSSを使って編集する際に、よく使うコードの使い方をご紹介します。

imgをCSSで編集する際のコード

さっそく、ご紹介していきたいのですが、その前に、

まずは、以下のコードのようにimgタグを、divタグもしくは、pタグで囲みましょう！

 <div>
   <img src="./hiyoko.jpg" alt="">
 </div>

このようにすることで、レイアウトがしやすくなります。

divタグとpタグで囲む違いについて詳しくは、

以下の記事でご紹介していますので、気になる方はぜひ！

実践でのdivタグの使い方

それでは、本題に戻ります！

imgをCSSで編集する際によく使うコードを紹介していきます。

widthとheightで画像のサイズを調整

まずは、widthとheightを使って画像のサイズを変更します。

この時、気をつけてほしいことは、imgタグではなく、

imgタグを囲んでいるdivタグもしくはpタグに、widthとheightを設定するということです。

以下、コード例と画像になります。

HTML

<div class="box">
  <img src="./hiyoko.jpg" alt="#">
</div>

CSS

img {
  width: 100%;
}

.box {
  width: 500px;
  margin: 0 auto;
}

画像を丸くするborder-radius

続いては、画像を丸くする際に使用する『border-radius』です。

百聞は一見にしかずということで、

以下、使用例になります。

HTML

 <div class="box">
      <img src="./hiyoko.jpg" alt="#">
    </div>

    <div class="box box2">
      <img src="./hiyoko.jpg" alt="#">
    </div>

    <div class="box box3">
      <img src="./hiyoko.jpg" alt="#">
    </div>

    <div class="box box4">
      <img src="./hiyoko.jpg" alt="#">
    </div>

CSS

img {
  width: 100%;
}

.box {
  width: 500px;
  margin: 0 auto 50px;
}

.box2 > img {
  border-radius: 50%;
}

.box3 > img {
  border-radius: 20px;
}

.box4 > img {
  border-radius: 2em;
}

このように、border-radiusは、％・px・emで調整することができます。

また、border-radiusを設定する際は、親要素のdivタグではなくimgタグに記載するように気をつけましょう！

画像の外側に枠線をつけるborder

最後は、画像に枠線をつける方法としてborderをご紹介します。

まずは、使用例をご覧ください。

HTML

 <div class="box box1">
      <img src="./hiyoko.jpg" alt="#">
    </div>

    <div class="box box2">
      <img src="./hiyoko.jpg" alt="#">
    </div>

CSS

img {
  width: 100%;
}

.box {
  width: 500px;
  margin: 0 auto 50px;
}

.box1 > img{
  border: 10px solid #333;
}

.box2 > img {
  border-radius: 50%;
  border: 5px dotted #333;
}

このように、画像に枠線をつけることができます。

borderの基本的な使い方については、以下の記事で詳しく書いています。

[HTML&CSS]borderの使い方

まとめ

・imgは、divタグまたはpタグで囲みむ。

・divタグもしくはpタグにwidthとheightを設定する

・border-radiusで、画像の枠を丸くする

・borderで、画像の枠線を描く。

今回は、imgをCSSで編集する際のコードについてご紹介しました。

それでは、最後まで読んでいただきありがとうございました。