画像のあつかい方
2022.02.07
みなさん、こんにちは。
こちらは画像記事のまとめとなっています。
記事の内容は、画像指定の書き方からobject-fitなどの使い方まで。
基礎的なものですが、マスターしていただくと画像の扱いにほとんど困らなくなるはずです。
画像を苦手とされている方が、少しでも分かったと思って下さるような記事を提供できればと思います。
img画像、背景画像の使い方と表示ルール
画像の大きさと縦横比
【img画像①】画像の大きさの決まり方
【img画像②】object-fitとobject-position
【img画像③】max-widthとmin-width
【背景画像①】background-imageとbackground-repeat
【背景画像②】background-size
【背景画像③】background-position
ヘッダー画像は縦長? 横長?【ホームページ制作者の基本知識】
【img画像】html属性での「幅と高さ」の指定
画像表示がうまくいかない
①img画像が表示されない
②img画像が大きすぎる
③img画像がゆがむ
④img画像の端が表示されない
⑤背景画像が表示されない
⑥背景画像が繰り返される・繰り返されない
⑦背景画像をレスポンシブできない
画像を使いこなす
①img画像を真ん中にする
②画像を透過させるopacity
③hover時に画像をズームする
④画像の下に文字を置く指定方法
⑤画像をレスポンシブ化させる
⑥背景画像を重ねて表示する
⑦画像に枠線をつけるborder
⑧画像の上に文字をのせる
⑨画像を回転させる