|
要素を水平にセンタリングする一般的なCSS手法 CSSで要素のセンタリングは簡単なことではなく、同じ正当なCSSセンタリング設定でもブラウザによって挙動が異なります。 まずはCSSで要素を水平に中央に配置する一般的な方法をいくつか見てみましょう。 1. 自動マージンによるセンタリング CSSで要素を水平に中央に配置する推奨方法はマージンプロパティを使うことです。マージンレフトプロパティとマージンライトプロパティを自動に設定するだけです。 実用的には、中央に置く必要があるこれらの要素のためにコンテナdivを作成できます。 注意点として、容器の幅は指定する必要があります: div#container{ margin-left:auto; margin-right:auto; 幅:168px; } この方法はほとんどの主要なブラウザで非常にうまく機能しており、WindowsのIE6でさえ標準準拠モードで正しく表示できます。 残念ながら、IEの低位バージョンではこの設定はセンタリング効果を達成しません。 ですので、実際のプロジェクトでこの方法を使いたい場合は、ユーザーのIEブラウザのバージョンが6.0以下でないことを確認しましょう。 サポートが不足しているにもかかわらず、多くのデザイナーはこの方法をできるだけ推奨しています。 この方法は、CSSを用いた要素レベルのセンタリング実装において最も正確かつ合理的な方法と考えられています。 2. テキストアラインを使ってセンタリングを実現します 要素のセンタリングを実現するもう一つの方法は、テキストアラインプロパティを使い、そのプロパティの値をセンターに設定し、それを本文要素に適用することです。 これは徹底的なハックですが、ほとんどのブラウザに対応しているので、場合によっては自然に必須です。 このメソッドがハックと呼ばれるのは、テキストのプロパティをテキストではなく、コンテナの要素に適用するためです。 これにより追加の作業も生まれます。 レイアウトに必要なdivを作成した後、次のコードに従って本文にテキストアラインプロパティを適用する必要があります。 body{ text-align:center; } その後、何か問題は起きるのでしょうか? 身体のすべての子孫は中心に位置しています。 したがって、テキストをデフォルトの左手向きアライメントに戻すために別のルールを作成する必要があります: p{ text-align:left; } この追加ルールが多少の不便を引き起こす可能性は考えられます。 また、標準に真に従うブラウザはコンテナの位置を変えず、テキストを中央に配置するだけです。 3. 自動余白とテキストの揃えの組み合わせを使う テキストアラインメントセンタリング方式は後方互換性が高く、自動パディング方式もほとんどの現代ブラウザでサポートされているため、多くの設計者はセンタリング効果のクロスブラウザサポートを最大化するために両者を組み合わせて使用しています。 body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; 幅:168px; テキストアライン:左 } しかし、これは常にハックであり、決して完璧ではありません。 中央置きコンテナ内のテキストに追加ルールを書く必要がありますが、少なくとも様々なブラウザで見栄えは良好です。 4. 負の外縁解 負マージンの解決策は、要素にマイナスマージンを追加するだけでは程遠いものです。 この方法は絶対位置法とネガティブマージン技術の両方を用いる必要があります。 以下はこのスキームの具体的な実装方法です。 まず、中央に置いた要素でコンテナを作り、ページの左端の50%に位置させます。 こうすることで、コンテナの左余白はページの幅の50%から始まります。 次に、コンテナの左側マージン値を負の幅の半分に設定します。 これにより、コンテナはページの水平方向の中間点に固定されます。 #container{ background:#ffcurl(mid.jpg)repeat-ycenter; 位置:絶対; 左:50%; 幅:760px; 左端の余白:-380px; } ほら、ハックは使いません!これは推奨される解決策ではありませんが、良い方法であり、非常に多用途です。驚くべきことに、NetscapeNavigator 4.xでも問題なく動作しませんよね? ですので、最も幅広いブラウザサポートを求めるなら、この方法が最適でしょう。
| 
掲載地 2014/10/15 21:50:33
|
|
|
