こんにちは。
grillon designです。
3児の子育てをしながら、未経験からWeb制作の勉強をしています。
現在、Web制作の基礎を身につけるために100日チャレンジに取り組んでいます。
今回はDAY011として、
CSSを使って画像のサイズや形を整える方法
を勉強しました。
今回学んだのは、
- width
- height
- max-width
- border-radius
- object-fit
です。
実際に自分で作っている自己紹介ページのプロフィール画像を使って、1つずつCSSを追加しながら変化を確認してみました。
今日の目標
今回の目標は、
CSSを使って画像のサイズや形を調整できるようになること
です。
HTMLで画像を表示するだけでは、画像が元のサイズで大きく表示されることがあります。
そこでCSSを使って、
- 画像の幅を変える
- 画像の高さを変える
- 画像が大きくなりすぎないようにする
- 画像を丸くする
- 画像の比率を整える
といった調整をしてみました。
今回使ったプロフィール画像
私が作っている自己紹介ページには、プロフィール画像があります。
最初はHTMLにこのように書いていました。
<img src="IMG_9638.jpg" alt="プロフィール画像" width="200">
今回は「CSSで画像を整える」がテーマなので、HTMLに書いていたwidth="200"を外してみました。
変更後はこちらです。
<img src="IMG_9638.jpg" alt="プロフィール画像">
すると、画像が元のサイズで大きく表示されました。
Before：HTMLからwidthを外して、画像が大きく表示された状態
ここからCSSを使って、画像を少しずつ整えていきます。
widthで画像の幅を変更してみた
まずはwidthを使って画像の幅を変更しました。
CSSにこちらを追加します。
.profile-card img {
width: 200px;
}
widthは、
画像の幅を指定するCSS
です。
今回はプロフィール画像の幅を200pxに指定しました。
すると、大きく表示されていた画像が小さくなりました。
width: 200px;を追加して画像が小さくなった状態
最初はHTMLにwidth="200"を書いていましたが、CSSでも画像の幅を指定できることが分かりました！
実際に変更してみると、
widthを使うと画像の横幅を変更できる
ということが分かりました。
heightで画像の高さを変更してみた
次はheightです。
heightを使うと、画像の高さを指定できます。
最初は、
.profile-card img {
width: 200px;
height: 200px;
}
としてみました。
しかし、私が使っている画像では見た目の変化が分かりにくかったため、今回は高さを300pxに変更してみました。
.profile-card img {
width: 200px;
height: 300px;
}
すると、横幅は200pxのまま、高さだけが300pxになりました。
width: 200px;、height: 300px;を指定した状態
height: 200px;では変化が分かりにくかったので、300pxにしてみたら高さの違いがよく分かりました！
実際に数字を変えてみることで、
widthは横幅heightは高さ
を指定していることが理解しやすかったです。
コードだけを見るよりも、実際に数字を変えて画面を確認する方が、初心者の私には分かりやすく感じました。
max-widthで画像が大きくなりすぎないようにする
次にmax-widthを追加しました。
.profile-card img {
width: 200px;
height: 300px;
max-width: 100%;
}
max-widthは、
画像の最大幅を指定するCSS
です。
今回は、
max-width: 100%;
と指定しました。
これは、画像が親要素より大きくなりすぎないようにするために使われます。
今回のパソコン画面では、見た目に大きな変化はありませんでした。
しかし、画面が小さい場合などに、画像が親要素からはみ出すのを防ぐときに役立つCSSだと学びました。
今回の画面では見た目の変化が分かりにくかったですが、画像が大きくなりすぎないための指定だということを学びました。
border-radiusで画像を丸くしてみた
次はborder-radiusです。
今回、一番変化が分かりやすかったのがこのCSSでした。
.profile-card img {
width: 200px;
height: 300px;
max-width: 100%;
border-radius: 50%;
}
border-radiusは、
要素の角を丸くするCSS
です。
今回は、
border-radius: 50%;
と指定して、プロフィール画像を丸くしてみました。
すると、四角だった画像が丸くなりました。
border-radius: 50%;を追加して画像が丸くなった状態
コードを1行追加しただけで見た目が大きく変わったので、今回一番分かりやすくて面白かったです！
プロフィール画像は丸く表示されているサイトも多いので、実際に自分のページで試してみると変化が分かりやすかったです。
object-fitで画像の表示方法を整える
最後にobject-fitを追加しました。
今回使ったのは、
object-fit: cover;
です。
最終的なCSSはこちらです。
.profile-card img {
width: 200px;
height: 300px;
max-width: 100%;
border-radius: 50%;
object-fit: cover;
}
object-fit: cover;を使うと、
指定した幅と高さの中で、画像の比率を保ちながら表示する
ことができます。
今回の画像では、追加前と追加後で大きな変化は分かりませんでした。
今回の画像では見た目の変化が分かりにくかったですが、画像の表示方法を調整するCSSだということを学びました。
実際にコードを書いて試してみることで、少しずつそれぞれのCSSの役割を理解できた気がします。
今回の完成したCSS
今回、プロフィール画像に追加したCSSはこちらです。
.profile-card img {
width: 200px;
height: 300px;
max-width: 100%;
border-radius: 50%;
object-fit: cover;
}
それぞれの役割をまとめると、次のようになります。
| CSS | 役割 |
|---|---|
width | 画像の幅を指定する |
height | 画像の高さを指定する |
max-width | 画像の最大幅を指定する |
border-radius | 画像の角を丸くする |
object-fit | 画像の表示方法や比率を調整する |
実際に画像をCSSで整えてみて
今回の学習では、実際に自分で作っている自己紹介ページのプロフィール画像を使いました。
最初は、HTMLに直接、
width="200"
と書いて画像のサイズを指定していました。
今回CSSで画像を整える方法を勉強して、
画像の見た目やサイズをCSSで調整できる
ということを実際に確認できました。
特に、
widthで横幅を変更するheightで高さを変更するborder-radiusで画像を丸くする
という変化は、実際に画面で確認すると分かりやすかったです。
一方で、
max-widthobject-fit
は、今回の画像では大きな変化が分かりませんでした。
実際に数字やコードを変えてみると、コードだけを見ているよりも理解しやすいと感じました！
今回のように、自分で作ったページを少しずつ変更していく方法は、これからWeb制作を学ぶときにも続けていきたいです。
まとめ｜CSSを使うと画像の見せ方を変えられる
今回は100日チャレンジDAY011として、
CSSで画像を整える方法
を勉強しました。
今回学んだことはこちらです。
widthで画像の幅を変更できるheightで画像の高さを変更できるmax-widthで画像が大きくなりすぎないようにできるborder-radiusで画像を丸くできるobject-fitで画像の表示方法を調整できる
今回、実際に自分で作ったプロフィールカードを使ってCSSを追加してみたことで、コードだけを見るよりも理解しやすかったです。
まだまだ分からないことも多いですが、これからも実際に手を動かしながら少しずつWeb制作を学んでいきたいと思います。
次回の100日チャレンジも頑張ります！
コメント