横幅と余白についてのメモ

ここに書こうとしていること
- いい感じの横幅にしたかった
- いい感じの余白を探る方法

作成理由
どうやったらいい感じの横幅を簡単に設定できるのか奮闘したから
余白があると読みやすいし雰囲気が出る気がする。自分にとってちょうど良い余白を模索した痕跡を残そうとした。
私が浪費した時間を共有したい、誰かも使ってほしい。

設定している中身

横幅

.wrap{width:90%; max-width:500px;}

余白

.wrap{margin:100px auto;}　.main{padding:20px;}

解説のようなもの(長いうえに正確性に欠ける、個人の見解)

例えば「width:700px;」にすると、多分スマホだと画面からはみでてしまう。それにスマホってサイズが豊富だから画面の大きさが違う。小さいスマホにも、大きいスマホにも、それに合わせたいな〜と思って「width:90％」にしている。大体は95〜80%の間で設定しておけば、スクロールするときにゆらゆら動かないと思う。お守り的な。この記述が正しい自信は無い。

一方で、90%にするとPCからみたときに画面いっぱいに表示される。スマホでは手のひらにおさまる丁度いい横幅なんだけど、PCだと目が追いつかない。左端から右端まで視線を動かさなきゃいけない。それを回避するために「max-width:500px;」を後ろに記述している。cssは後に書いたもののほうが優先される。つまり「横幅は90%に指定したいんだけど、最大500pxまでに収めてほしい」って書いてある。多分。


余白は、marginとpaddingの２種類がある。箱があって、箱の外側の余白がmarginで箱の内側の余白がpadding。スマホもPCも、スクロールするので縦幅については外側の余白を設定しておけば位置の指定が楽（もう少し下に表示させたいなとか）。でも横の余白を指定してしまうと、横幅＋外側の余白=全体の横幅が大きくなったりする。あと面倒くさい。autoを使えば、自動でど真ん中にコンテンツを配置してくれる。

画面の幅が1000pxだとする。指定した横幅は500px。真ん中にコンテンツを配置したいとき、自分でmarginを指定するには計算しなきゃいけない。多分250pxなんだけど、例えばそのコンテンツに「border」で枠線をつけたとする。そしたらborderのpx分、コンテンツの横幅が大きくなる。でもmarginは250pxのままだから、横スクロールが出たり…するんじゃなかったっけ。