テクノロジー

CSSによるセンタリングの方法と注意点についてのまとめ

HTMLとかCSSの勉強を始めると、divやsectionなどで作った要素を真ん中に移動したいなど要素を移動させたいなということがあると思います。そこで今回は要素をセンタリング(真ん中に寄せる)テクニックいくつかとそのメリット・デメリット、それぞれを使う注意点などを紹介していきます。

横のセンタリング

1. margin: 0 auto;

ブロック要素をセンタリングする方法で一番オーソドックスなもので、CSSの標準に準拠した方法でもあるので一般的となっていますね。この方法では、センタリングしたいブロック要素の左右のマージンにautoを設定することで自動算出して揃えてくれます。インライン要素をこの方法を使ってセンタリングする場合は、display:blockでブロック表示にすることでセンタリングできます。

 

 

ここで、インライン要素とブロックレベル要素の簡単な解説をしておくと

があったとき、テキスト部分がインライン要素、それを囲っている<div></div>がブロックレベル要素になります。厳密に言うともっと細かい条件がありますが、簡単に言えばインライン要素はブロックレベル要素の中に書かれるものというイメージですね。

 

2. text-align:center;

センタリングする方法としては、マージンを使って揃える方法一般的ですがWindows版のIE6以前の一部のブラウザでは、上記の方法がサポートされていないことがあります。そのため、IE対策としてtext-alignを利用することが多いです。本来、text-alignはインライン要素を揃えるためのものなので、divなどのブロック要素をセンタリングするときはマージンを使うのが基本です。

しかしこの方法では、内側の要素全てがセンタリングされてしまうので、text-align:justify (両揃え)をする場合があります。※ よくtext-align:leftも紹介されていますが、国によっては右から文字を書く国もあるので、そうした場合に不都合になることがあるためです。

 

 

 

3. left:50%; margin-left:-150px;

上記以外のもので、センタリングしたいブロック要素の幅がわかっているとき、ネガティブマージンを利用することでセンタリングする方法があります。加えて、この方法ならIE6以前のIE5.5などでも対応できます。

 

※left:50%;で移動させる

ネガティブマージン(margin-left:-150px)で150pxだけ戻す。

縦のセンタリング

display:table-cell + vertical-align:middle;

ブロックレベル要素を横にセンタリングする以外にも、vertical-alignとtext-alignを使って縦にセンタリングする方法があります。vertical-alignはtext-align同様インライン要素を揃えるためのものであるので、display:table-cellを使ってうまくやってあげる必要があります。このdisplay:table-cellはIE8以降対応なので、この方法が使えるのはIE8以降となります。

 

 

センタリング時に生じる問題点

1. widthが定まっていない要素をセンタリングしようとしたときの問題

margin:autoはwidthが定まっていない要素に対しては、パラメータとして0を返すようになっています。そのため、widthが不定の要素に対してセンタリングをしようとしても上手く行かない事があります。

2. floatしている要素をセンタリングするときの問題

margin:autoはfloatしている要素で使用したとき、パラメータとして0を返すようになっています。そのため、float:leftを使って左よせしているような要素だったり、ul/liなどで横並びのリスト表示している要素に対して有効ではありません。予め、幅が予測できるのであれば、ul自体のwidthを明示的に指定する事でmargin:autoを使ってセンタリングすることができます。また別な方法として、positionを指定する事によって横センタリング3の方法(left:50%; margin-left:-150px)を応用して中央寄せすることができます。

 

厳密には違いますが、簡単な解説です。

まとめ

センタリングの方法にも、目的ごとに使える・使えないがあることがわかりますね。場面に合わせて使う方法を変える事でしっかりとコーディングができる様になるかと思います。また、それぞれの特徴を押さえておく事で、うまくいかない場合でも原因がわかるようになるので修正も容易になりますね。もし、詰まってしまったときは参考にしてみてください。

Related post

  1. テクノロジー

    iOSアプリ初心者が覚えておきたい10のUIクラス

    iOSアプリを開発したいけど、何を知っていたら開発できるのかわからない…

  2. テクノロジー

    売れるiOSアプリが作れるようになるおすすめの本8選

    アプリを作ってみたいけど作り方がわからない。…

  3. テクノロジー

    Pythonスクレイピングの導入と利用の注意ポイント

    気象データの監視や研究用途、情報分析するといった際に必要なデータを収集…

  4. テクノロジー

    今週のITニュースハイライト 7/2 – 7/8

    7月2日〜7月8日に話題・気になったITニュースを紹介します。…

  5. テクノロジー

    今週のITニュースハイライト 7/9 – 7/15

    7月9日〜7月15日に話題・気になったITニュース…

  6. テクノロジー

    スクレイピングでヘッダー情報を付与する方法とその目的

    今回は、前回試したスクリプトにヘッダー情報を加えたリクエストを投げれる…

  1. デザイン

    アンティーク風デザインに使える3つのフリー素材サイト
  2. テクノロジー

    Firebase iOSの解説・セットアップ編
  3. デザイン

    Sketchチュートリアルから学ぶ「アートボード」「マスク」「シンボル」の3要素…
  4. テクノロジー

    ReactiveXとは?RxJSの入門と導入手順
  5. テクノロジー

    Appleの新しいMessagesで何ができるのか。
PAGE TOP