September 26, 2016

みんな大好きリキッドレイアウト 〜固定幅 + リキッドレイアウトの実装〜

こんにちは、武井です。
最近リキッドレイアウト(可変レイアウトの一種)の案件が増えてきました。
リキッドレイアウトと言えば5年ほど前に流行ったような気がしますが、ブラウザ幅100%で展開するサイトはビジュアル的にもインパクトがあり、昨今でも可変レイアウトの需要は高いようです。

リキッドレイアウトは可変レイアウトの一種で、相対値(%)で幅を指定します。
閲覧環境に合わせた幅に可変できるのがメリットですが、「ナビゲーションの幅が可変すると使いづらい」など一部 固定幅にしたい時があります。
今回はそんな 「固定幅 + リキッドレイアウト」の実装方法ついてご紹介。

実装サンプル

サンプルのHTMLとCSSはこちら

liquid_sample.jpg

#sub を固定サイズ、#main を可変にするサンプルです。
※サンプルとして見やすいように色付けや余白などのスタイル及びclassを入れています。以下、解説では主要部分以外は省略。

HTML


  <!-- wrapper START -->
  <div id="wrapper">
    <p>div#wrapper(80%)</p>

    <!-- main START -->
    <div id="main">
        <div id="mainContent">
            div#main(100%)
        </div>
    </div>
    <!-- main END -->

    <!-- sub START -->
    <div id="sub">
      div#sub(200px)
    </div>
    <!-- sub END -->
  </div>
  <!-- wrapper END -->

CSS


/*-- wrapper --*/
div#wrapper {
  width: 80%;
}
/*-- clearfix -- */
div#wrapper:after{
  content: '';
  display: block;
  clear: both;
}

/*-- main --*/
div#main {
  width: 100%;
  float: right;
}
div#mainContent {
  margin-left: 200px;
}

/*-- sub --*/
div#sub {
  width: 200px;
  float: left;
  margin-right: -200px;
}

解説

すごくざっくり言うと、#mainは100%幅にしつつ、#subの分の空間を marginでうまく作り出しましょう、という感じです。

詳しい解説

順を追って、解説していきます。
HTMLは上記のソースのままで、CSSのみ追っていきましょう。
※ clearfix部分は省略させてもらいます。
※ 途中段階のサンプルは、閲覧環境によって見え方に差異があります。

0.普通のリキッドレイアウト

まずは%指定の基本から。
%は親の幅を基準にし、兄弟の幅(%)の合計が100%になるように指定します。
そのため、div#mainのwidth: 80%; は、ブラウザ幅に対してではなく親であるdiv#wrapperの幅に対しての80%という意味になり、兄弟であるdiv#mainとdiv#subの合計幅が100%となっています。

sample1.png


div#wrapper {
    width: 80%;
}
div#main {
    width: 80%;
    float: right;
}
div#sub {
    width: 20%;
    float: left;
}

1.subの幅を固定にする

subとmainがピッタリくっつかなくなります。

sample2.png


div#wrapper {
    width: 80%;
}
div#main {
    width: 80%;
    float: right;
}
div#sub {
    width: 200px;
    float: left;
}

2.mainを100%にする

mainが最大まで広がる。
subはカラム落ち状態。さて、subを入れ込みたいがどうするか。

sample3.png


div#wrapper {
    width: 80%;
}
div#main {
    width: 100%;
    float: right;
}
div#sub {
    width: 200px;
    float: left;
}

3.マイナスマージンでsubの空間を作る

margin-right: -200px;によってmainが200px分、引き込まれる。
subのカラム落ちは直ったけど、mainが引き込まれた分だけ左寄りになってしまっている。

sample4.png


div#wrapper {
    width: 80%;
}
div#main {
    width: 100%;
    float: right;
}
div#sub {
    width: 200px;
    margin-right: -200px;
    float: left;
}

4.mainに余白を与える

といってもmain自体にマージンを与えても、subのマイナスマージンで作り出した空間を相殺してしまうだけ。さっきの状態に戻ってしまった。

sample5.png


div#wrapper {
    width: 80%;
}
div#main {
    width: 100%;
    margin-left: 200px;
    float: right;
}
div#sub {
    width: 200px;
    margin-right: -200px;
    float: left;
}

5.mainの内側の要素にマージンを与える

mainContentにmargin-left: 200px;を与えればsubの横にピッタリ!


div#wrapper {
    width: 80%;
}
div#main {
    width: 100%;
    float: right;
}
div#mainContent {
    margin-left: 200px;
}
div#sub {
    width: 200px;
    margin-right: -200px;
    float: left;
}

各段階ごとの実装サンプル

各段階ごとにサンプルを用意しましたので、実際にご覧になって確認してみてください。
サンプルのHTMLとCSSはこちら
※サンプルとして見やすいように色付けや余白などのスタイル及びclassを入れています。

最後に

実は以前に書いた記事の内容だったのですが、最近でもこの手法は有効なため、再編集・再掲載させてもらいました。
最近ではかなり大きな画面サイズ向けのレイアウトも増えてきました。しかし、小さい画面サイズも切り捨てるわけにもいきません。
まあ、広い範囲の画面サイズに対応するには、文字サイズや余白のバランスを変えるなども必要となってくるので、幅のリキッドだけですまないことも多いですが、それでもリキッドレイアウトはまだまだ活躍しそうです。

Webの流行りや技術はあっという間に変化していくので、柔軟な制作ができるように心がけたいです。

« 比率がバラバラな画像の高さを固定して、余った横を見切れさせつつセンタリング | Home | Creators MeetUp #44 で登壇しました「フリーランスミートアップを開催してきた」 »