Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| max-width | 指定要素の最大限の横幅のサイズ指定 | %・px・emなど |
CodePenで動作チェック
「max-width」の指定を行うことで実際にはどういった影響があるのかを、CodePenのウィンドウを使って動作チェックしてみましょう。
CodePenのウィンドウで以下の作業を行いましょう。
/* max-width: 100px; */
↓「/*」「*/」を削除↓
max-width: 100px;
See the Pen プロパティ:min-height by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
最大限の横幅のサイズ指定プロパティ
max-widthは指定要素の最大限の横幅のサイズ指定プロパティです。
どれだけコンテンツのボリュームがあろうとも、指定したサイズを最大として指定することで横スクロールバーを表示させないようにしています。
ウェブサイトの横幅はコンテンツのボリュームが多ければ多いほど横に伸び、ブラウザに横スクロールを表示させてしまいます。
実は以前とられたアンケート調査で判明したことで、人は縦スクロールバーにはさほどストレスを感じないが、
横スクロールバーには非常にストレスを感じるという調査結果が出たことがありました。
スマホ閲覧が主体となっている昨今ではなおのことでしょう。