5000164 is here
2013-12-01

コンテンツを横に2つ並べた時に片方だけコンテンツ幅がウィンドウ幅に追従するようにする

デモ

文章では説明しづらいので、なんだかよくわからないタイトルになってしまいました。

まずは実際に見てもらった方が早いと思います。

See the Pen qxgIF by SUGAWARA Hiroshi (@5000164) on CodePen

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<p>
  ここではデモのために、ウィンドウの幅ではなくdivの幅を変更するようにしています。<br /> divの幅を変更してみると、左側のテーブルの幅は変わらずに右側の文章の幅だけが変わっているのが確認できます。
</p>

<h1>
  実装方法
</h1>

<p>
  cssはこのようになっています。(関係のないプロパティは省略しています。)
</p>

<pre class="brush: css; title: ; notranslate" title="">

div { position: relative; } table { position: absolute; top: 0; left: 0; width: 250px; } p { margin: 0 0 0 250px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<p>
  非常に簡単です。<br /> まず、tableをposition: absolute;で固定することを考えます。<br /> そのために親要素にposition: relative;を指定します。<br /> これでtableの位置が固定されるので、あとは右側のコンテンツにmarginを指定してtableと重ならないようにします。<br /> これだけです。
</p>

<h1>
  複雑に考える必要はなかった
</h1>

<p>
  最初に右側のコンテンツだけウィンドウサイズに応じて幅を変更させようとした時は、もっと複雑に考えていました。<br /> 左側のコンテンツにmin-widthを指定して、左右のコンテンツにwidthでそれぞれ%を指定しようとしたのですが、これは%で指定すると幅が大きく変わった時にレイアウトが崩れるので断念。<br /> 次はJavaScriptでウィンドウサイズのイベントを取得して動的にwidthを変更するしかないかと思ったのですが、なるべくシンプルにいってJavaScriptは使いたくなかったので保留。<br /> 他にいい方法がないかと考えていた時にこの方法を思いつきました。<br /> 試しに実装してみたら期待通りの動きをしてくれたのでこの方法に決定。<br /> シンプルに書けるのはいいものです。
</p>

<h1>
  まとめ
</h1>

<p>
  この方法は応用が利きそうです。
</p>