{{tag>プログラミング関連 CSS}} [[start]]＞[[programming_start]] ====== CSS 片側可変・片側固定の2カラムレイアウト ====== htmlで片側可変・片側固定の2カラムレイアウトにする2つの方法。 ---- ===== PR ===== ===== floatとネガティブマージン ===== ==== デモ ====

サンプルページ

この枠は可変長です。ウインドウ幅により幅が伸び縮みします。

テキスト

テキスト

この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響

メニュー

・この枠は固定長です。

・テキスト

==== ソースコード ==== CSS部 .wrap{overflow:hidden;background:#eee;width:100%;min-width:500px;} .main{float:left;width:100%;margin-right:-180px;background:#eff;} .mainin{margin-right:180px;word-break:break-all;background:#efe;} .side{float:left;width:180px;word-break:break-all;background:#ffe;} HTML部

main側

テキスト

side側

テキスト

/div>
==== 説明 ==== 上記のデモとソースでは左カラムをウインドウ幅に対して可変長、右カラムを固定長としています。 説明のためフロートを解除すると次のような状態となります。

wrap - overflow:hidden;width:100%;min-width:500px

main - float:left;width:100%;margin-right:-180px;

mainin - margin-right:180px;word-break:break-all;

side - float:right;width:180px;word-break:break-all;

幅を可変にするために外側の枠warpはwidth:100%;と幅を狭めた時の最低幅(min-width:500px;)を設定する。最低幅を指定しないと幅を狭めた時に可変長の左カラム(main)が小さくなり過ぎてしまいます。またmin-width以下になった時にoverflow:hiddenで親要素に影響を与えないようにしています。 左カラムmainは左寄せフロート(float:left;)して、右側のマージンをマイナス値(margin-right:-180px;)とする事で右カラムの入る隙間を作ります。 右カラムsideは上記で空いた隙間に入る幅(width:180px;)にし、右寄せフロート(float:right;)すると横並びになります。 この状態では、左カラムmainの上に右カラムsideが重なっている状態なので左カラムmainに長い文書を書くと右カラムsideの下に隠れてしまうため左カラムmain内に調整用ブロック要素maininを作り重なっている部分を右マージン(margin-right:180px;)で調整します 右側の幅を変更する時は、mainのmargin-rightのマイナス値とsideのwidthとmaininのmargin-rightの3つを同じに 欠点は、フロートを使っているのでmain(mainin)とsideの高さがそろいません。mainやsideに背景画像やボーダーがあると気になる場合があります。 ==== 右カラムを可変長にするには ==== HTML部の右カラムsideを左カラムmainの前に持ってくるのが簡単です。

メニュー

・この枠は固定長です。

・テキスト

サンプルページ

この枠は可変長です。ウインドウ幅により幅が伸び縮みします。

テキスト

テキスト

この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響

ソースコード(左右反転)

side側

テキスト

/div>

main側

テキスト

 ---- ===== PR ===== ===== table-cell ===== ==== デモ ====

サンプルページ

この枠は可変長です。ウインドウ幅により幅が伸び縮みします。

テキスト

テキスト

メニュー

この枠は固定長です。

テキスト

==== ソースコード ==== CSS部 .wrap{display:table;width:100%;} .main{display:table-cell;vertical-align:top;word-break:break-all;background:#eff;} .side{display:table-cell;vertical-align:top;width:320px;word-break:break-all;background:#ffe;} HTML部

main側

テキスト

side側

テキスト

 テーブル化して、外枠wrapを100%とし、右カラムsideの幅を指定すると残りが左カラムmainの幅になります。 floatと違いmainとsideの内の高さが違っても、mainとsideの高さは同じになるので背景色やborderがある場合には使いやすい。 テーブルをデザイン用に使ってもよいのか？と言う構造部分の問題はあるもののシンプルで動作的には問題ないと思う。 ==== 右カラムを可変長にするには ==== HTMLのmainとsideの順番を入れ替えるだけです。

side側

テキスト

main側

テキスト

 ---- [[start]]＞[[programming_start]]