ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。
問題
max-widthとmin-widthでどっちを使うのか。
max-widthとmin-widthとは
max-width：最大サイズ（ここで指定するサイズ以上は大きくしたくない！）
min-width：最低サイズ（ここで指定するサイズまでは確保したい！）
max-widthとmin-widthどっちを使う？
基本的にはmax-widthの方を使う。
width:100％;
max-width:●●px;
min-widthを使うタイミング
- ナビゲーション
- テーブル
- カード
ナビゲーション
ホーム
ブログ
お問い合わせ
など文字数が短くても1行で合わせたい（表示させたい）
テーブル
無理やり1画面で表示させるよりも、横スクロールにした方が見やすい場合もある。
カード
これもテーブルと同様に見た目重視する場合。
3列のレイアウトなどで画面幅によってつぶれてしまうのを防ぐ
まとめ
見た目をどうしたいか。
画面の幅によってつぶれてほしくない。
でも1行で表示させたい
などはmin-widthで設定する。
そのほかは基本max-widthで考えると迷いづらくなる。
コメント