2カラムの固定、可変レイアウト

こんにちは、ゼノフィ渡部です。

2カラムの固定と可変があるレイアウトをご紹介いたします。

カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。

下記のソースは左カラムが固定で、右カラムが可変のCSSです。

左カラムは2行目の「.l_col_fix」で「float: left;」と「width: 100px; 」で左方向にフロート、幅を固定しています。

8行目の「.r_col_liquid」では、「float: right;」、「width: 100%; 」で右方向にフロート、左カラムで指定した100px以外の幅を保持し、「margin: 0 0 0 -100px;」で、左カラムと同じ幅をマイナス指定することによって横並びにしています。

14行目の「.r_contents」の「margin: 0 0 0 120px;」で左カラムとの左マージンを調整しています。ここでは左マージンが120px、左カラムが100pxですので120－100=20で左カラムとの間は20pxとなります。

/* 左カラム固定・右カラム可変 */
.l_col_fix {
  float: left;  /* 左方向にフロート */
  width: 100px; /* 左カラムをpxで固定 */
  background: #EFEFEF;
}
 
.r_col_liquid {
  float: right; /* 右方向にフロート */
  width: 100%;  /* 左カラムで指定した100px以外の幅を保持 */
  margin: 0 0 0 -100px; /* 左カラムと同じ幅をマイナス指定し横並びに */
}
 
.r_contents {
  margin: 0 0 0 120px; /* 左カラムとの左マージンを調整 */
  background: #EFEFEF;
}

下記のソースは左カラムが可変で右カラムが固定のCSSです。「左カラム固定・右カラム可変」と比較すると、「width」の「px」が「%」に「margin」の「-100px」が左から右に「120px」も左から右に変わっていることがわかります。

/* 左カラム可変・右カラム固定 */
.l_col_liquid {
  float: left; /* 左方向にフロート */
  width: 100%; /* 右カラムで指定した100px以外の幅を保持 */
  margin: 0 -100px 0 0; /* 右カラムと同じ幅をマイナス指定し横並びに */
}
 
.r_col_fix {
  float: right; /* 右方向にフロート */
  width: 100px; /* 右カラムをpxで固定 */
  background: #EFEFEF;
}
 
.l_contents {
  margin: 0 120px 0 0; /* 右カラムとの右マージンを調整 */
  background: #EFEFEF;
}

下記のソースは左カラムが固定で、右カラムが可変のHTMLです。可変側の要素がひとつ多いことがわかります。この18行目の「r_contents」で左カラムとの左マージンの調整がされています。また、5行目の「l_col_fix 」と15行目の「r_col_liquid」はお互いにフロートしていますので、2行目の「clearfix」でフロートを解除しています。

<!-- wrapper(左カラム固定・右カラム可変) -->
<div class="wrapper clearfix">
 
    <!-- l_col_fix -->
    <div class="l_col_fix">
 
        <p>
            左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。
        </p>
 
    </div>
    <!-- /l_col_fix -->
 
    <!-- r_col_liquid -->
    <div class="r_col_liquid">
 
        <!-- r_contents -->
        <div class="r_contents">
 
            <p>
                右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。
            </p>
 
        </div>
        <!-- /r_contents -->
 
    </div>
    <!-- /r_col_liquid -->
 
</div>
<!-- /wrapper(左カラム固定・右カラム可変) -->

下記のソースは左カラムが可変で右カラムが固定のHTMLです。上記の「左カラム固定・右カラム可変」と同様に可変側の要素がひとつ多いことがわかります。この8行目の「l_contents」で右カラムとの右マージンの調整がされています。また、5行目の「l_col_liquid 」と15行目の「r_col_fix」はお互いにフロートしていますので、2行目の「clearfix」でフロートを解除しています。

<!-- wrapper(左カラム可変・右カラム固定) -->
<div class="wrapper clearfix">
 
    <!-- l_col_liquid -->
    <div class="l_col_liquid">
 
        <!-- l_contents -->
        <div class="l_contents">
 
            <p>
                左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。
            </p>
 
        </div>
        <!-- /l_contents -->
 
    </div>
    <!-- /l_col_liquid -->
 
    <!-- r_col_fix -->
    <div class="r_col_fix">
 
        <p>
            右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。
        </p>
 
    </div>
    <!-- /r_col_fix -->
 
</div>
<!-- /wrapper(左カラム可変・右カラム固定) -->

今回ご紹介したレイアウトは、サイドバーが固定、コンテンツ部分が可変といった形に使用すると良いのではないでしょうか。

サンプル

CSS(左カラム固定・右カラム可変)

p {
  margin: 0;
  padding: 0;
}
 
.wrapper {
  margin: 0 0 20px;
}
 
/* 左カラム固定・右カラム可変 */
.l_col_fix {
  float: left;  /* 左方向にフロート */
  width: 100px; /* 左カラムをpxで固定 */
  background: #EFEFEF;
}
 
.r_col_liquid {
  float: right; /* 右方向にフロート */
  width: 100%;  /* 左カラムで指定した100px以外の幅を保持 */
  margin: 0 0 0 -100px; /* 左カラムと同じ幅をマイナス指定し横並びに */
}
 
.r_contents {
  margin: 0 0 0 120px; /* 左カラムとの左マージンを調整 */
  background: #EFEFEF;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML(左カラム固定・右カラム可変)

<!-- wrapper(左カラム固定・右カラム可変) -->
<div class="wrapper clearfix">
 
    <!-- l_col_fix -->
    <div class="l_col_fix">
 
        <p>
            左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。左カラム固定です。
        </p>
 
    </div>
    <!-- /l_col_fix -->
 
    <!-- r_col_liquid -->
    <div class="r_col_liquid">
 
        <!-- r_contents -->
        <div class="r_contents">
 
            <p>
                右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。右カラム可変です。
            </p>
 
        </div>
        <!-- /r_contents -->
 
    </div>
    <!-- /r_col_liquid -->
 
</div>
<!-- /wrapper(左カラム固定・右カラム可変) -->

CSS(左カラム可変・右カラム固定)

p {
  margin: 0;
  padding: 0;
}
 
.wrapper {
  margin: 0 0 20px;
}
 
/* 左カラム可変・右カラム固定 */
.l_col_liquid {
  float: left; /* 左方向にフロート */
  width: 100%; /* 右カラムで指定した100px以外の幅を保持 */
  margin: 0 -100px 0 0; /* 右カラムと同じ幅をマイナス指定し横並びに */
}
 
.r_col_fix {
  float: right; /* 右方向にフロート */
  width: 100px; /* 右カラムをpxで固定 */
  background: #EFEFEF;
}
 
.l_contents {
  margin: 0 120px 0 0; /* 右カラムとの右マージンを調整 */
  background: #EFEFEF;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML(左カラム可変・右カラム固定)

<!-- wrapper(左カラム可変・右カラム固定) -->
<div class="wrapper clearfix">
 
    <!-- l_col_liquid -->
    <div class="l_col_liquid">
 
        <!-- l_contents -->
        <div class="l_contents">
 
            <p>
                左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。左カラム可変です。
            </p>
 
        </div>
        <!-- /l_contents -->
 
    </div>
    <!-- /l_col_liquid -->
 
    <!-- r_col_fix -->
    <div class="r_col_fix">
 
        <p>
            右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。右カラム固定です。
        </p>
 
    </div>
    <!-- /r_col_fix -->
 
</div>
<!-- /wrapper(左カラム可変・右カラム固定) -->

Webデザイン

2カラムの固定、可変レイアウト

カテゴリ

アーカイブ