一般的な CSS レイアウトの実装方法_html/css_WEB-ITnose

CSS レイアウトは、私にとって見慣れたものでもあり、馴染みのないものでもあります。実装できてもよく理解できません。そこでCSSでよく使われる1カラム、2カラム、3カラムのレイアウトの実装方法をまとめて整理したいと思います。この記事は初心者向けであり、参照のみを目的としています。ただし、フローティングやポジショニングなどについても理解する必要があります。

1 列レイアウト

1. 中央揃えで固定幅

これは最もシンプルで実装が簡単なレイアウトです。コアとなる CSS コードを列挙します:

body{text-align: center;font-size: 2em;}.head,.main,.footer{width: 960px;margin: 0 auto;}.main{background-color: #666666;height: 600px;}.footer{background-color: #999999;height: 200px;}

その中で、最も重要なのは margin 属性です。要素に幅が設定されている場合、margin:0 auto は要素を自動的に中央に配置できます。

2. アダプティブ

これも非常に簡単で、ブラウザが要素の幅を自動的に計算できるように、上記の CSS コードで要素の width 属性を設定するだけです。

2 列のレイアウト

1. 固定幅

これは難しいことではありません。対応する幅を設定するだけです。コードはここに掲載されています:

rrree

これには、float と呼ばれることが多い float 属性が関係します。 1 つは左にフロートし、もう 1 つは右にフロートすることで、正確に 2 列のレイアウトを実現できます。 ‘

2. アダプティブ

width 属性の値をパーセンテージに置き換えるのはとても簡単です。

body{text-align: center;font-size: 2em;}.main{width: 960px;height: 900px;margin: 0 auto;}.left{width: 300px;height: 900px;background-color: #eee;float: left}.right{width: 660px;height: 900px;background-color: #999;float: right;}

注: 親要素もパーセントに設定する必要があります。

3列レイアウト

1. 左右の幅を固定する

body{text-align: center;font-size: 2em;}.main{width: 80%;height: 900px;margin: 0 auto;}.left{width: 30%;height: 900px;background-color: #eee;float: left}.right{width: 70%;height: 900px;background-color: #999;float: right;}

ここで最も重要なことは、絶対位置を使用し、中央の左右の余白を両側の幅にすることです。

2. Adaptive

body{text-align: center;font-size: 2em;margin: 0;padding: 0}.main{height: 900px;background-color: #ddd;margin: 0 240px;}.left{width: 240px;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0}.right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

同様にパーセンテージに換算されます。

4.混合レイアウト

最後に、正面から大きな合成をしてみましょう。

れーい