CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目(レイアウト)を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"(青い背景色の領域)を可変、div class="side"(赤い背景色の領域)を固定にそれぞれする方法で、固
![CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/00a98ecbbb5b19492a5cc653ca2a19587ad07be0/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fcss-variable-width-and-fixed-width-layout.png)