ウェブサイトとかけましてサイドバックと解きます。
その心はどちらも「センタリング」が大事!

こんにちは。「小宇宙」と書いて「コスモ」と呼ぶ世代、ヨシミです。

さて、世の中では選挙であったりジャンケンであったりで、集団の中のセンターを決めることもあるそうです。
ウェブデザインの素敵な所はそんな面倒なことをしなくても、コンテンツを真ん中に寄せられる所ですね。

真ん中に寄せる前に親要素と子要素を理解

HTMLソースは各要素にアクセスするために、下図のようなツリー構造になっています。

図3

この図でいうと、<body>と<div><h1><p>が親子関係、<div>と<img><a>が親子関係ということになります。ちなみに、下に位置している方が子要素です。

inline、inline-block要素を真ん中寄せに

表示形式の話が出てきますので、「それなに?」という方は前回私が書いたブログをご覧ください。

親要素に余白があり、子要素の表示形式がinlineもしくはinline-blockのとき、親要素に対して「text-align: center;」をかけると子要素が真ん中に寄ります。

図1

お~簡単。
スマホで見るバナーなどにおいては左に寄っているよりも、真ん中にあった方がキレイに見える場合が多いですよね。

blcok要素を真ん中寄せに

次はblock要素を真ん中に寄せる方法です。
block要素は親要素に対して「text-align: center」をかけても、真ん中には寄ってくれません。

そこでblock要素自体に「margin: 0 auto;」というCSSをかけます。

この記述を書くことによって、block要素も真ん中に寄せることができるのです。
block要素は基本的にディスプレイの幅いっぱいに広がる要素です。つまり要素に対してwidthで幅を指定した時が使い所です。

block要素のwidthに900pxを指定し、「margin: 0 auto;」をかけた場合、

図2

と、なります。

なぜ真ん中に寄せるのか

理由は「見慣れているから」です。

世の中には多くのウェブサイトが存在しますが、ほとんどのページがコンテンツ全体を真ん中に寄せています。つまり、どちらか片側に寄せているサイトは見にくいのです。

ただ、時代には逆行しているかもしれませんが、1番の肝である「見やすさ」を犠牲にして、「見にくくも印象に残るサイト」を作ってみるのも面白いかもしれませんね★