固定と可変で作る。スマホサイトで片方を横幅可変にするやり方
よく読まれている記事
スマートフォンサイトで、２つの要素を並べている場合、
デバイスの違いで、横幅が変わるときに、片方を固定幅、もう片方を可変幅にしたい場合があります。
左固定、右固定の場合と、vertical-align: middle;を使いたい場合との３種類のサンプルを作りました。
方法1 ネガティブmarginを利用する
ネガティブマージンを指定することでfloatでちょうど回り込むようにするやり方です。
cssでやること
- 固定するdivには、widthをpx指定します。
- 可変するdivには、widthを100%指定します。
- 可変するdivに、固定するdivのwidthのサイズ分のmargin-leftを-(ネガティブマージン)で指定します。
- 可変するdivの中にdivを作ります。
- 中のdivに固定するdivのwidthのサイズ分のmargin-leftを指定します。
方法2 display: table;を利用する
vertical-align: middle;を利用したい場合にはこちらを利用します。
ポイントは、table-layout: fixed;です。
table-layoutプロパティに「fixed」を指定する場合、幅が指定されていない列には残りの幅が均等に割り当てられますので、これを利用します。
cssでやること
- 全体を囲むdivに
12345display: table;table-layout: fixed;width: 100%;
- 固定するdivには、widthをpx指定します。display: table-cell;を指定します。
- 可変するdivには、widthを100%;で指定します。display: table-cell;を指定します。
- 可変するdivの中にdivを作ります。
- 中のdivにinputタグを置く場合は、width: 100%;を指定します。
リンク先のサンプルを表示
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<h2>サンプル１ 左：固定、右：可変</h2> <div class="box sample1"> <div class="boxLeft border"> 固定の内容 </div> <div class="boxRight"> <div class="boxRightInner border"> ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。 </div> </div> </div> <h2>サンプル２ 左：固定、右：可変</h2> <div class="box sample2"> <div class="boxLeft"> <div class="boxLeftInner border"> ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。ここに可変の内容が入ります。 </div> </div> <div class="boxRight border"> 固定の内容 </div> </div> <h2>サンプル３ 左：固定、右：可変 フォーム利用</h2> <div class="box sample3"> <div class="boxLeft border"> 固定の内容 </div> <div class="boxRight"> <div class="boxRightInner border"> <input type="text" > </div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/*.sample1 */ .box:after { content:"."; height:0; clear:both; display:block; visibility:hidden; } .box { zoom:100%; } .sample1 .boxLeft{ float: left; width: 100px; } .sample1 .boxRight{ float: right; /*leftでも可*/ width: 100%; margin-left: -100px; } .sample1 .boxRightInner{ margin-left: 100px; } /*.sample2 */ .box:after { content:"."; height:0; clear:both; display:block; visibility:hidden; } .box { zoom:100%; } .sample2 .boxLeft{ float: left; width: 100%; margin-left: -100px; } .sample2 .boxLeftInner{ margin-left: 100px; } .sample2 .boxRight{ float: right; /*leftでも可*/ width: 100px; } /*.sample3 */ .box { display: table; table-layout: fixed; width: 100%; } .sample3 .boxLeft{ display: table-cell; width: 100px; } .sample3 .boxRight{ display: table-cell; width: 100%; } .sample3 .boxRightInner{ padding: 10px; } .sample3 .boxRightInner input{ width: 100%; } |