ウェブサイトはBOXの重なりでできているようですが、その基本構造とセンタリングについて考えてみました。
BOXの重なり
たとえばこのような外箱の中に内箱１と内箱２があるものをサンプルにして考えてみます。
内箱２の文字を中央にするときは、箱に対して text-align を使えばそろいます。
しかし箱自体を動かすには text-align は効きません。
そこで、margin: 30px auto; を使います。
これは、上下は30pxに左右は自動的にという命令ですが、左右の中央にきます。
内箱１の文字を中央にしました。
これは text-align でできます。
しかし、まだ箱自体は左端に寄っています。
最後にいちばん外の箱です。
外箱には中に箱がふたつあるだけで文字はありません。
この箱を全体の中央にもってくるにはやはり margin : 0 auto;を使います。
text-align は効きません。
このような基本の成り立ちが理解できていないともつれてしまうことがあります。
命令が重なって思ったような配置ができないことがあります。
命令が重なって思ったような配置ができないことがあります。
これからもこの基本的な部分を勉強していきたいと思っています。
