20230323

PC、スマホ、スマホを傾けた場合等ブラウザ表示幅に応じたスタイル変更(ビューポートとメディアクエリを使用したレスポンシブデザイン)

メディアクエリ適用の前提として、head要素にて<meta name="viewport" content="width=device-width, initial-scale=1.0"> のようにビューポートを指定している。
ちなみに、content="width=device-width, initial-scale=1.0"は、width=device-width を指定すれば強制的？にinitial-scaleに1.0が適用されるようで、 initial-scale=5.0としても表示に変化はなかったが、 width=device-widthを指定しないでinitial-scale=5.0 とした場合は(PCは変化しなかったが)少なくともスマホでの表示が5倍になった。

メディアクエリでは、画面幅が600px以下の場合、と、画面が横向き(横長)の場合、を追加的に定義している。
画面幅が600px以下の場合：@media screen and (max-width: 600px) {(略)}にてdisplay: block;でflexを解除するとともにaside要素の色を赤に指定。
画面が横向き(横長)の場合：@media screen and (orientation: landscape) {(略)}でaside要素の色を青に指定