要素の中央寄せ | CSS電光石火

更新情報
  • 08/10/15 ｢デザイン-ヘッダ｣追加
  • 08/09/29 ｢フッタの作成｣追加
  • 08/09/29 ｢メイン-右カラム｣追加
  • 08/09/29 ｢メイン-サイドバー｣追加
  • 08/09/29 ｢ヘッダの作成｣追加
  • 08/09/28 ｢要素の中央寄せ｣追加
  • 08/09/26 ｢スタイルの読み込み｣追加
  • 08/09/26 ｢float｣追加
  • 08/09/26 ｢ブロックとインライン｣追加
  • 08/09/23 ｢widthとheight｣追加
  • 08/09/23 ｢marginとpadding｣追加
  • 08/09/23 ブラウザ対応アイコン追加
  • 08/09/23 ｢スタイルの読み込み｣追加
  • 08/09/19 ｢DOCTYPE｣追加
  • 08/09/19 ｢開始前に｣追加
  • 08/09/18 ｢始めに｣修正
  • 08/09/18 ｢始めに｣追加
  • 08/09/18 サイトオープン

要素の中央寄せ

  • 従来の手法とは違う、中央寄せ

  •  

今までタグを触ってきた方は、XHTML勧告によって、align="center"という、要素に付ける属性が非推奨になった事に衝撃を隠せなかったかもしれません。それでは要素はどうやって中央寄せにすればよいのか、と思った方も多いでしょう。
また、今までタグを存分に触った事の無い方は、それぞれの要素（タグ）をどうやって画面中央に寄せるか、という事に腐心するかもしれません。
今回はその手順を説明します。

  • 手順01

  •  

まず、css側に以下の指定を記述してください。

  •  
  • 										
html,body{
 margin:0;
 width:100%;
}
  •  

前章でも取り上げましたので、こちらのコードには見覚えがあるかもしれません。このコードでは、全体を囲むhtmlとbody要素にmargin:0;とwidth:100%;を指定しています。marginを0にする理由は、それぞれのブラウザにデフォルト（基本設定）のマージンが確保されるように設定されているためです。それぞれのブラウザのデフォルトマージンは一定ではないため、これらを残したままコーディングを続行すると、後々サイズが合わない等の弊害が生じる事になります。従って、基本的にこの値は0にした方が安全です。
width:100%;ですが、こちらは後に設定するwrapperと関係があります。現時点では、bodyの領域を100%に拡大して、隙間なく埋めている、と考えてください。

  •  
  • 										
<body>
 <div id="wrapper">
  表示領域
 </div>
<body>
  •  

次に、html側には上記のコードを記入します。
<div id="wrapper">タグに記述されているid="wrapper"ですが、これはid属性といい、html上で一意の意味合いを持ちます。
平たく言えば、一度しか登場させてはいけない指定を行う場合、このid属性を使用するということです（※id属性による指定そのものは複数存在しても構いませんが、id名は同一html内に一つでなくてはいけません）。
今回はidにwrapperという名称を名づけました。今からこのwrapperにある役割を持たせます。下記のコードを参照してください。

  •  
  • 										
html,body{
 margin:0;
 width:100%;
}

#wrapper{
 width:800px;
 margin:auto;
}
  •  

CSS側のコードを見てゆきましょう。
id指定の場合「#」を付加して指定します。ちなみに、後に紹介するclass指定には「.」を指定します。
最初に行ったhtmlとbodyに対するwidth:100%;と#wrapperのmargin:auto;が主なキーポイントとなります。width、即ち横幅を100%にしてブラウザのウィンドウ上一杯に表示させ、その100%化したbodyの要素をautoにする事により、センタリングが可能になります。この際、#wrapper上のプロパティにかならず横幅を設定しなくてはなりません。
なお、上コードをブラウザプレビューしても、空白に「表示領域」という文字が出現するだけで殆ど変化が見られない、と感じる方も多いでしょう。
そうした場合は、以下のコードに変更して見てください。

  •  
  • 										
html,body{
 margin:0;
 width:100%;
}

#wrapper{
 width:800px;
 margin:auto;
 background:#cccccc;
}
  •  

上記はbackgroundプロパティをくわえたもので、背景色を設定しています。これで、上記CSSがどのような役割を果たしているかが一目瞭然で分かると思います。
今回のコーディングはいわゆるブログの外枠部分の作成でした。皆さんがよく閲覧しているブログは、記事内容がブラウザウィンドウの大きさに合わせて殆どのケースで中央寄せになっているはずです。
サイドバーを開いた瞬間にブログ全体がウィンドウにあわせて中央に寄せられる現象、といえば伝わるでしょうか。あのような手法は今回の手順によって作られているのです（※注：positionを使う方法）。

wrapperを中央寄せ
 

#wrapperを中央寄せ

 

要素の中央寄せは、従来のhtmlを触ってきた方にとって、鬼門の一つとして立ちふさがっています。筆者は元々CSS2.1がある程度普及してからWEBページの作成に携わるようになったため、この疑問の解消をCSSにて行う事にさほどの抵抗はありませんでした。
しかし、過去に遡って逆にalign="center"という指定があると聞いた時は、現行のCSSの姿勢に関して疑問に思ったものです。
W3Cだけの問題ではありませんが、近年のWEB業界は、文書の整合性を求めるばかりに過去の資産をここ数年で急速に失っていた気がします。その流れを受けて最近はJavascriptやhtml5を中心とした振興技術が盛り上がってきていますが、静的なCSSなどの構造に関してはやはり旧態依然とした状況にあるといわざる得ません。
筆者はCSSから入った人間ですから、当初こうした簡易な方法があるとは知りませんでした。無論、テーブル要素を用いたレイアウトもです。
現実に、こうした「古い」レイアウトは現場でも現役で使われている事が多く、オーサリング・アプリケーションの進化によって、今やCSSよりもこうした古い手法の方が直感的で便利である、という声もちょくちょく聞かれるようになりました。
しかし、文書の整合性を求めて今までの機能代替を用意しなかったせいで、「便利だが使ってはいけない手法」が跋扈するようになってしまったのです。
W3Cの現実無視と変わらない現場の両方に原因があったのだと筆者は睨んでいます。
以上のように申し上げてしまいましたが、現時点でのCSSを使うにはやはり現時点の作法に則るしかなく、当サイトでは上記のxhtmlにそぐわない属性は一切使用いたしません。
矛盾していますが、基本を重視するためです。

この項ではhtmlとbodyのリセットを行いました。
CSSリセットには様々なフレームワークが用意されており、現在では気軽にダウンロードしてその内容を確かめる事が出来ます。
しかし、CSSリセットはそれぞれのサイトの個性に合わせて設計してあるとは到底いえないものが多く、例えば当サイトのような可変レイアウトのサイトに使用すると、逆に不都合な指定も最初から盛り込まれていたりします。
CSSが自分で組める人は、リセットも自分でやってしまった方が楽だというのが、筆者の持論です。

※注：positionを使う方法 一般的にセンター寄せの手法は今回行ったbodyのwidthを100%に設定し、body内の要素に対してmargin:auto;を指定する、という手法が一般的です。
しかしながら、この手法以外にもposition:absolute;と指定して、50%の位置に要素を配置し、要素の大きさの半分だけをネガティブマージンにかけて中央寄せにする、という手法も存在します。
しかしこの手法の場合、positionの性質上、要素が隠れてしまったときにスクロールバーが出現しないなど、ユーザービリティに優れた手法とはいえません。
今現時点はこのページで紹介した手法を使うのが最も効果的といえるでしょう。

float