求職者支援訓練でwebデザインを学ぶデザイン初心者が、センタリング・中央寄せのCSS「text-align: center」,「 margin 0 auto」について調べたものを忘備録としてまとめました。
何に「text-align: center」を使えばいいか、何に「 margin 0 auto」を使えばいいかわからない！という方は、ぜひ私と一緒に勉強しましょう！
独学では理解しきれないデザイン初心者さんやブログデザインに拘りたい初心者ブロガーさんにおすすめです。
基本的な知識
センタリング・中央寄せとして使われる「text-align: center」,「 margin 0 auto」の違いとはなんなのか、それは指示できる要素が明確に分かれているということです。
htmlの要素は、基本的に以下の2要素に分類されます。
- インライン要素
- ブロック要素
例を挙げると、、、以下のようになります。
ブロック要素
- h1タグ
- pタグ
- divタグ
- sectionタグ
marginは、「ブロック要素」にしか指定できません。
インライン要素
- imgタグ
- spanタグ
- aタグ
- inputタグ
text-align:centerは、「インライン要素」にしか指定できません。
【インライン要素】text-align:center
中央寄せで使うCSSの一つ目は「text-align:center」です。
text-align: center;
インライン要素を中央寄せすることが可能です。
text-align:centerが効かない場合
WEBデザイン初心者あるあるが、中央寄せしたいのにCSSが効かない！ということだと思います。
「text-align:center」の指示が通らない原因として考えるのは、ブロック要素に対して指定していることが考えられます。
他問えば、<img>や<button>などのインライン要素を包むブロック要素である<div>に「text-align:center」をかけても効きませんので、その場合は次に説明する「margin 0 auto;」を親である<div>にかけるようにしましょう。
【ブロック要素】margin 0 auto;
ブロック要素である<div>を中央寄せしたい時にどうすればいいのか、というと、「margin 0 auto;」を使用すればいいのです。
margin 0 auto;
auto とは
marginについては知ってるけど、0 autoって何？と思いますよね？
marginに指定するautoは余白を自動で調整してくれるプロパティです。
左右にautoを指定することで左右中央寄せになります。
ただ、autoとは言っても、『「自動」で中央揃えをしてくれる』というわけではありません。
margin: 0 auto; は「余白を左右均等に割り当てる」という意味であり、
margin 0 auto;が効かない場合
「text-align:center」同様に、こちらもCSSが効かず「うまくいかない！」ということになりがち…
よくある失敗の原因をいくつか並べていきます。
原因その1
ブロックの幅(width)が広すぎる（100%になっている）。
ブロック要素は、指定がないと親要素の100％の大きさとなるため、指定したブロック要素が親要素と同じ大きさであれば中央寄せになりません。
そのため、margin 0 auto;で中央寄せを指定する際はCSSに枠線（border）を付けて横幅を確認し、widthプロパティで適切な横幅を指定するようにしましょう。
解決方法〜枠線をつけて範囲を確認してみる〜
.block {
margin: 0 auto;
border:1px solid #999;
}
このブロックが幅の広い状態（幅100%）で“中央寄せ”になっていたら、適切なブロック幅（width）を指定する。
.block {
margin: 0 auto;
border: 1px solid #999;
width: 200px;
}
これで中央寄せにできるはずなので、確認できたら枠線（border）を削除しましょう。
原因その2
インライン要素に「margin 0 auto;」で指定している。
<a>(リンク)や<img>(画像)などのインライン要素に「margin 0 auto;」で中央寄せの指定をしても、インライン要素には空白がないため指示が通りません。
そのため、インライン要素をブロック要素（div）で囲み、そのブロック要素(div)に対して指示を出す方法やブロック要素にしてから指示を出す必要があります。
ブロック要素にする方法は下記で解説します。
解決方法〜インライン要素をブロック要素にする〜
.block {
margin: 0 auto;
width: 200px;
display: block;
}
※「display: inline-block;」という指定方法もあります。
原因その3
要素の幅が一定ではない可変サイズのブロックである。
グローバルメニューなどテキストの文字数によって要素の横幅が異なる場合、「width: auto;」を指定することも少なくありませんよね。
そんな時に外側のブロックに「margin: 0 auto;」をかけたとしてもうまくいきません。
解決方法〜外側のブロックに「display: table;」を指定する〜
/* 外側のブロック */
.block{
margin: 0 auto;
display: table;
}
/* 内側の要素 */
.span {
width: auto;
display: inline-block;
border: 1px solid #999;
margin:10px;
padding: 10px;
}
CSSの中央寄せ「margin: 0 auto;」がうまくいかない場合は、そのブロックに適切なサイズが指定されているか、その要素がブロック要素で表示されているかを確認してみましょう。
おすすめの人気WEBデザイン参考書
まとめ
webデザインを学ぶデザイン初心者が、センタリング・中央寄せのCSS「text-align: center」「 margin 0 auto」について調べたものを忘備録としてまとめました。
「なんとなくで使っている」「どっちがどうかよくわからない」という人でも理解できたのではないでしょうか？
デザイン初心者やブログデザインに拘りたい初心者ブロガーさんの参考になったら嬉しいです♪
コメント