レスポンシブデザインのテクニック

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

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

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

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

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

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

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

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

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

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

さてと、本題に入ろう！

レスポンシブデザインのテクニック

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

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

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

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

レスポンシブデザインの中で、パソコン版とタブレット版とスマホ版を分けて表示をしていますね。

こちらでは、常に3つを意識をして分離をしてコーディングをしています。

/* パソコン版を表示をしたいとき */
.view_pc {
	display:block;
}
/* タブレット版を非表示をしたいとき */
.view_tablet {
	display:none;
}
/* スマートフォン版を非表示をしたいとき */
.view_sp {
	display:none;
}

@media screen and (max-width: 1024px) {
	/* パソコン版を非表示をしたいとき */
	.view_pc {
		display:none!important;
	}
	/* タブレット版を表示をしたいとき */
	.view_tablet {
		display:block;
	}
	/* スマートフォン版を非表示をしたいとき */
	.view_sp {
		display:none;
	}
}

@media screen and (max-width: 480px) {
	/* パソコン版を非表示をしたいとき */
	.view_pc {
		display:none!important;
	}
	/* タブレット版を表示をしたいとき */
	.view_tablet {
		display:none!important;
	}
	/* スマートフォン版を表示をしたいとき */
	.view_sp {
		display:block;
	}
}

こういう書き方がをしています。

好きなように書いてみてください。

ただ、「英語」ではなく、「和訳した日本語」は控えてくださいね。

/* パソコン版を非表示をしたいとき */
.pasokon {
	display:none!important;
}
/* タブレット版を表示をしたいとき */
.taburetto {
	display:block;
}
/* スマートフォン版を非表示をしたいとき */
.suma-to_fon {
	display:none;
}

こういう書き方は小学生みたいなのでやめてくださいね。

プロとしてお客様のお金をいただいてもらってるわけだからちゃんとした英語で書いてください。

ご参考までに。

では、また！