LoginSignup
14

More than 5 years have passed since last update.

サイドバーを固定サイズにしてメインカラムを可変にする方法

Posted at

サイドバーを固定化してメインカラムを可変にしようと思い、cssでのやり方がわからなかったのでjavascriptで実装していました。
画面幅を取得して、そこから固定divの幅と間に取りたいマージンを引いて、メインカラムの幅にする。みたいな処理をしていたのですが、
cssで実装できるようなのでまとめてみました。

javascriptでも数行で実装できますが、ブラウザ上で画面幅を変えたときにリロードしないとカラムが落ちてしまうということと、
cssでの実装が思ったよりも簡単だったのでcssで実装する事をお勧めします。

文章でまとめると

  • 固定する方のdivはwidthをpxで指定する (width: 300px)
  • 可変する方のdivはwidthを100%にして固定するdivの幅のネガティブマージンを指定(margin-right: -300px
  • 可変する方のdivの内側にdivを作り、固定するdivの方に固定するdivの大きさ分marginをとる(margin-right: 300px
    ※()の中は固定する幅を300pxにした場合。

コードの例

文章だとわかりにくいところもあると思うので、コードも書いておきます。

例)左側にサイドカラムを作りwidthを280pxにして、メインカラムを可変にする場合

HTML


<div class="wrap">
    <div class="main">
        <div class="main_inner">
            <!-- メインカラムの内容 -->
        </div>
    </div>
    <div class="side">
        <!-- サイドカラムの内容 -->
    </div>
</div>

CSS


.main {
    margin-right: -280px;
    width: 100%;
    float: left;
}

.main .main_inner {
    margin-right: 280px;
}

.side {
    width: 280px;
    float: right; /* leftでも可 */
}

メインカラムとサイドカラムの間の幅とか、画面端とカラムの間とかを調整しながら実装してください。
基本的に.mainmargin-right.main .main_innerの値を大きくするとメインとサイドの間が空きます。

まとめ

みそはネガティブマージンを取ってそこに固定divを入れるところと、可変divの中にもう一つdivを作るところかなーって思います。
意外と簡単に実装できたので今後も使っていこうと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14