CSSによるセンタリングの方法と注意点についてのまとめHomeiOSアプリ開発入門Pythonでスクレイピングデザインの知識iOSエンジニアの独立ブログ「現役エンジニアが教えるアプリ開発」や「役に立つ技術」について発信しています。menuHomeテクノロジーCSSによるセンタリングの方法と注意点についてのまとめテクノロジー2013.10.10CSSによるセンタリングの方法と注意点についてのまとめHTMLとかCSSの勉強を始めると、divやsectionなどで作った要素を真ん中に移動したいなど要素を移動させたいなということがあると思います。そこで今回は要素をセンタリング(真ん中に寄せる)テクニックいくつかとそのメリット・デメリット、それぞれを使う注意点などを紹介していきます。auto;ブロック要素をセンタリングする方法で一番オーソドックスなもので、CSSの標準に準拠した方法でもあるので一般的となっていますね。この方法では、センタリングしたいブロック要素の左右のマージンにautoを設定することで自動算出して揃えてくれます。インライン要素をこの方法を使ってセンタリングする場合は、display:blockでブロック表示にすることでセンタリングできます。</div>があったとき、`テキスト`部分がインライン要素、それを囲っている<div></div>がブロックレベル要素になります。厳密に言うともっと細かい条件がありますが、簡単に言えばインライン要素はブロックレベル要素の中に書かれるものというイメージですね。text-align:center;センタリングする方法としては、マージンを使って揃える方法一般的ですがWindows版のIE6以前の一部のブラウザでは、上記の方法がサポートされていないことがあります。そのため、IE対策としてtext-alignを利用することが多いです。本来、text-alignはインライン要素を揃えるためのものなので、divなどのブロック要素をセンタリングするときはマージンを使うのが基本です。(両揃え)をする場合があります。text-align:leftも紹介されていますが、国によっては右から文字を書く国もあるので、そうした場合に不都合になることがあるためです。margin-left:-150px;上記以外のもので、センタリングしたいブロック要素の幅がわかっているとき、ネガティブマージンを利用することでセンタリングする方法があります。加えて、この方法ならIE6以前のIE5.5などでも対応できます。left:50%;}※left:50%;で移動させるネガティブマージン(margin-left:-150px)で150pxだけ戻す。vertical-align:middle;ブロックレベル要素を横にセンタリングする以外にも、vertical-alignとtext-alignを使って縦にセンタリングする方法があります。vertical-alignはtext-align同様インライン要素を揃えるためのものであるので、display:table-cellを使ってうまくやってあげる必要があります。このdisplay:table-cellはIE8以降対応なので、この方法が使えるのはIE8以降となります。widthが定まっていない要素をセンタリングしようとしたときの問題margin:autoはwidthが定まっていない要素に対しては、パラメータとして0を返すようになっています。そのため、widthが不定の要素に対してセンタリングをしようとしても上手く行かない事があります。floatしている要素をセンタリングするときの問題margin:autoはfloatしている要素で使用したとき、パラメータとして0を返すようになっています。そのため、float:leftを使って左よせしているような要素だったり、ul/liなどで横並びのリスト表示している要素に対して有効ではありません。幅が予測できるのであれば、ul自体のwidthを明示的に指定する事でmargin:autoを使ってセンタリングすることができます。margin-left:-150px)を応用して中央寄せすることができます。width:60px;}厳密には違いますが、簡単な解説です。まとめセンタリングの方法にも、目的ごとに使える・使えないがあることがわかりますね。場面に合わせて使う方法を変える事でしっかりとコーディングができる様になるかと思います。それぞれの特徴を押さえておく事で、うまくいかない場合でも原因がわかるようになるので修正も容易になりますね。詰まってしまったときは参考にしてみてください。Extension)とはここ数年で話題になっ...iOSアプリ開発xcconfigを使って本番とテスト環境を切り替える方法iOSアプリを開発していると、本番の環境とテストする環境を切り替えて開...iOSアプリ開発iOSアプリ開発者が本当にオススメする6つの技術系サイト今回は、iOSアプリエンジニアとして実際に良く参考にしているサイトを紹...テクノロジーiOSアプリ開発が簡単にできるStoryboard入門iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成...プロフィールHiroG’sアカデミーのメンター、モバイルアプリのエンジニア。得意分野はアプリ開発、競泳。