レイアウト例その3(flexbox使用)

使用CSS

このサイトで使っているCSSファイル： nabe_stylesheet.css

スマホなどのブラウザの幅が狭い場合にコンテンツの一部を非表示させて横スクロールの発生を防ぐ工夫などをレスポンシブ（Web）デザインといいます．HTMLのhead要素にviewportの指定をして，CSSのメディアクエリーを用いて画面幅に応じたCSSの指定をすることで実現できます．

簡単な例として，以下の例の画面幅が400px以下になったら左側の図が消えるように設定してみました．

レスポンシブデザインの例