CSSで片方可変、片方固定のカラムレイアウトを実装する方法

Tips

CSSで片方可変、片方固定のカラムレイアウトを実装する方法

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。
対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目(レイアウト)を実装することができます。

HTMLについて

以下で紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。

HTML

<div class="wrapper">
  <div class="main">
    <!-- 可変 -->
  </div>
  <div class="side">
    <!-- 固定 -->
  </div>
</div>
CSSで片方可変、片方固定のカラムレイアウトのイメージ

また、今回はこのイメージのようにdiv class="main"(青い背景色の領域)を可変、div class="side"(赤い背景色の領域)を固定にそれぞれする方法で、固定幅はいずれも300pxという内容になります。

CSSで片方可変、片方固定のカラムレイアウトを実装する方法 目次

  1. float + negative margin
  2. float + calc
  3. table
  4. flexbox

1. float + negative margin

カラムレイアウトでよく使用されるfloatにネガティブマージンを組み合わせる方法です。
実装にはCSSを下記のように記述します。

CSS

.wrapper {
  overflow: hidden;
}
.main {
  float: left;
  width: 100%;
  margin-right: -300px;
  padding-right: 300px;
  box-sizing: border-box;
}
.side {
  float: right;
  width: 300px;
}

メイン要素にサイド要素の幅である300pxをネガティブマージンとして記述し、padding-rightにも同じ数値を指定します。
ここではメイン要素にpadding指定しているためbox-sizing: border-box;を記述していますが、メインの中にある要素でpaddingなど指定する場合はbox-sizingの記述は必要ありません。

目次へ

2. float + calc

同じくfloatを使用する方法ですが、こちらはメイン要素の幅指定部分にcalcを使用します。
実装にはCSSを下記のように記述します。

CSS

.wrapper {
  overflow: hidden;
}
.main {
  float: left;
  width : -webkit-calc(100% - 300px) ;
  width : calc(100% - 300px);
}
.side {
  float: right;
  width: 300px;
}

目次へ

3. table

displaytableを用いる方法で、実装にはCSSを下記のように記述します。

CSS

.wrapper {
  display: table;
  width: 100%;
}
.main,
.side {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}
.side {
  width: 300px;
}

vertical-align: top;text-align: left;の記述はレイアウトを実装するために必要なものではないので、必要なければ削除して問題ありません。

目次へ

4. flexbox

displayflexboxを用いる方法で、実装にはCSSを下記のように記述します。

CSS

.wrapper {
  display: -webkit-flex;
  display: flex;
}
.main {
  -webkit-flex: 1;
  flex: 1;
}
.side {
  width: 300px;
}

目次へ


ひと通りのブラウザやデバイスにも対応となると、やはり「float + negative margin」か「table」を使ったほうが無難だと思いますが、割と最近のものだけで良いのであれば上で紹介したように「float + calc」や「flexbox」などでも実装できるので、自分が使いやすいものを選んだり実装するデザインによって使い分けたりと選択肢が増えますね。

それぞれ実際の動きを確認したい場合は、以下デモページでご覧になれます。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.