この文書の現在のバージョンと選択したバージョンの差分を表示します。
— |
css_2column [2018/05/14 21:17] (現在) 管理者 作成 |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | {{tag>プログラミング関連 CSS}} | ||
+ | [[start]]>[[programming_start]] | ||
+ | ====== CSS 片側可変・片側固定の2カラムレイアウト ====== | ||
+ | htmlで片側可変・片側固定の2カラムレイアウトにする2つの方法。 | ||
+ | ---- | ||
+ | ===== PR ===== | ||
+ | <html> | ||
+ | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
+ | <!-- respon_0 --> | ||
+ | <ins class="adsbygoogle" | ||
+ | style="display:block" | ||
+ | data-ad-client="ca-pub-9251612436023685" | ||
+ | data-ad-slot="1409739163" | ||
+ | data-ad-format="auto"></ins> | ||
+ | <script> | ||
+ | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
+ | </script> | ||
+ | </html> | ||
+ | ===== floatとネガティブマージン ===== | ||
+ | ==== デモ ==== | ||
+ | <html> | ||
+ | <style> | ||
+ | .wrap_test1{overflow:hidden;background:#eee;width:100%;min-width:500px;border:1px solid #000;} | ||
+ | .main_test1{float:left;width:100%;margin-right:-180px;background:#eff;} | ||
+ | .mainin_test1{margin-right:180px;word-break:break-all;background:#efe;} | ||
+ | .side_test1{float:left;width:180px;word-break:break-all;background:#ffe;} | ||
+ | </style> | ||
+ | |||
+ | <div class="wrap_test1"> | ||
+ | <div class="main_test1"> | ||
+ | <div class="mainin_test1"> | ||
+ | <h1>サンプルページ</h1> | ||
+ | <p>この枠は可変長です。ウインドウ幅により幅が伸び縮みします。</p> | ||
+ | <p>テキスト</p> | ||
+ | <p>テキスト</p> | ||
+ | <p>この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響</p></div> | ||
+ | </div> | ||
+ | <div class="side_test1"> | ||
+ | <h1>メニュー</h1> | ||
+ | <p>・この枠は固定長です。</p> | ||
+ | <p>・テキスト</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | ==== ソースコード ==== | ||
+ | CSS部 | ||
+ | <code 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;} | ||
+ | </code> | ||
+ | |||
+ | HTML部 | ||
+ | <code html> | ||
+ | <div class="wrap"> | ||
+ | <div class="main"> | ||
+ | <div class="mainin"><h1>main側</h1><p>テキスト</p></div> | ||
+ | </div> | ||
+ | <div class="side"><h1>side側</h1><p>テキスト</p>/div> | ||
+ | </div> | ||
+ | </code> | ||
+ | |||
+ | ==== 説明 ==== | ||
+ | 上記のデモとソースでは左カラムをウインドウ幅に対して可変長、右カラムを固定長としています。 | ||
+ | |||
+ | 説明のためフロートを解除すると次のような状態となります。 | ||
+ | <html> | ||
+ | <style> | ||
+ | .wrap_test2{overflow:hidden;width:100%;min-width:500px;background:#eee;border:1px solid #000;} | ||
+ | .main_test2{width:100%;margin-right:-180px;background:#eff;border:2px solid #aff;} | ||
+ | .mainin_test2{margin-right:180px;word-break:break-all;background:#efe;border:2px solid #afa;} | ||
+ | .side_test2{width:180px;word-break:break-all;background:#ffe;border:2px solid #ffa;} | ||
+ | </style> | ||
+ | <div class="wrap_test2"> | ||
+ | <p>wrap - overflow:hidden;width:100%;min-width:500px</p> | ||
+ | <div class="main_test2"><p>main - float:left;width:100%;margin-right:-180px;</p> | ||
+ | <div class="mainin_test2"><p>mainin - margin-right:180px;word-break:break-all;</p></div> | ||
+ | </div> | ||
+ | <div class="side_test2"><p>side - float:right;width:180px;word-break:break-all;</p></div> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | 幅を可変にするために外側の枠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の前に持ってくるのが簡単です。 | ||
+ | |||
+ | <html> | ||
+ | <div class="wrap_test1"> | ||
+ | <div class="side_test1"> | ||
+ | <h1>メニュー</h1> | ||
+ | <p>・この枠は固定長です。</p> | ||
+ | <p>・テキスト</p> | ||
+ | </div> | ||
+ | <div class="main_test1"> | ||
+ | <div class="mainin_test1"> | ||
+ | <h1>サンプルページ</h1> | ||
+ | <p>この枠は可変長です。ウインドウ幅により幅が伸び縮みします。</p> | ||
+ | <p>テキスト</p> | ||
+ | <p>テキスト</p> | ||
+ | <p>この下に隙間ができるのは左側の最終段落のマージンか右側の高さの影響</p></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | ソースコード(左右反転) | ||
+ | |||
+ | <code html> | ||
+ | <div class="wrap"> | ||
+ | <div class="side"><h1>side側</h1><p>テキスト</p>/div> | ||
+ | <div class="main"> | ||
+ | <div class="mainin"><h1>main側</h1><p>テキスト</p></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </code> | ||
+ | ---- | ||
+ | |||
+ | ===== PR ===== | ||
+ | <html> | ||
+ | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
+ | <!-- respon_0 --> | ||
+ | <ins class="adsbygoogle" | ||
+ | style="display:block" | ||
+ | data-ad-client="ca-pub-9251612436023685" | ||
+ | data-ad-slot="1409739163" | ||
+ | data-ad-format="auto"></ins> | ||
+ | <script> | ||
+ | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | ===== table-cell ===== | ||
+ | ==== デモ ==== | ||
+ | <html> | ||
+ | <style> | ||
+ | .wrap_test3{display:table;width:100%;border:solid 1px #000;} | ||
+ | .main_test3{display:table-cell;vertical-align:top;word-break:break-all;background:#eff;} | ||
+ | .side_test3{display:table-cell;vertical-align:top;width:180px;word-break:break-all;background:#ffe;} | ||
+ | </style> | ||
+ | <div class="wrap_test3"> | ||
+ | <div class="main_test3"> | ||
+ | <h1>サンプルページ</h1> | ||
+ | <p>この枠は可変長です。ウインドウ幅により幅が伸び縮みします。</p> | ||
+ | <p>テキスト</p> | ||
+ | <p>テキスト</p> | ||
+ | </div> | ||
+ | <div class="side_test3"> | ||
+ | <h1>メニュー</h1> | ||
+ | <p>この枠は固定長です。</p> | ||
+ | <p>テキスト</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | ==== ソースコード ==== | ||
+ | CSS部 | ||
+ | <code 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;} | ||
+ | </code> | ||
+ | HTML部 | ||
+ | <code html> | ||
+ | <div class="wrap"> | ||
+ | <div class="main"><h1>main側</h1><p>テキスト</p></div> | ||
+ | <div class="side"><h1>side側</h1><p>テキスト</p></div> | ||
+ | </div> | ||
+ | </code> | ||
+ | テーブル化して、外枠wrapを100%とし、右カラムsideの幅を指定すると残りが左カラムmainの幅になります。 | ||
+ | |||
+ | floatと違いmainとsideの内の高さが違っても、mainとsideの高さは同じになるので背景色やborderがある場合には使いやすい。 | ||
+ | |||
+ | テーブルをデザイン用に使ってもよいのか?と言う構造部分の問題はあるもののシンプルで動作的には問題ないと思う。 | ||
+ | |||
+ | ==== 右カラムを可変長にするには ==== | ||
+ | HTMLのmainとsideの順番を入れ替えるだけです。 | ||
+ | |||
+ | <code html> | ||
+ | <div class="wrap"> | ||
+ | <div class="side"><h1>side側</h1><p>テキスト</p></div> | ||
+ | <div class="main"><h1>main側</h1><p>テキスト</p></div> | ||
+ | </div> | ||
+ | </code> | ||
+ | |||
+ | ---- | ||
+ | [[start]]>[[programming_start]] |