レスポンシブをしていく中で絶対に必要なこと

あと残りの数日で1月の終わりが近づいてきてますね。

寒い中、体調には気を付けていますか？

日本のCOVID-19の終息はなかなか見えてこないんですね…

マスク生活はいつまで続くねん？

そろそろマスク生活から脱却したいのに！

世界のニュースを見る限り、ほとんどマスクしてない人が多いようなのは、こっちの見解でしょうかね？

日本だけマスク生活を続けてたら余計にしんどくならへん？

そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令するのいつぐらいになるねん？

海外のみんなもほぼマスクしとらんがな！

医療崩壊するのが怖いだけなんじゃないかな？

さてと、本題に入ろう！

他業者がいろんなトラブルで、格安でこっちに仕事を依頼することが増えてきてます。

他業者がHTMLコーディングしたデータの中身を見ると、ホンマにド素人ですわ！

どこかで学んだのかわかりませんが…

～ちょっとした愚痴でゴメンね～

レスポンシブをしていく中で絶対に必要なことをまず理解してほしい！

画像の可変サイズをまず設定しておくといいでしょう！

ただ、タブレット版は取り除き、スマートフォンを表示したいときの画像サイズを可変サイズにしておくといいですよ！

@media screen and (max-width: 480px) {
	/* 
	 * 画像の可変サイズの設定
	 */
	img {
		height: auto;
		max-height: 100%;
		max-width: 100%;
		width: 100%;
	}
}

HTMLファイルの中に、<img>タグの中の横幅サイズを「auto」または「100%」を記述しといたほうがいいですよ。

<img src="./img/photo.jpg" alt="写真" width="100%" / >
/* または */
<img src="./img/photo.jpg" alt="写真" width="auto" / >

レスポンシブデザインなので、ほとんど

<img src="./img/photo.jpg" alt="写真" width="100%" / >

こういう書き方が多くみられます。

ご参考までに。

では、また！

Leonard-Blog