Q&A
表示されないというより、floatの指定により、area1の右側に表示されるようになっただけです。 area1 のwidthの数値を小さくしてみると分かりますよ。「エリア１の幅が大きい場合」というのが結局どのようにしたいのかイメージが非常にわきづらいです。もう少し具体的にお願いします（図示でも構いません）
現在htmlで画像の様に左右に表示エリアを設けたいと思っています。
エリア２を回り込みしないようoverflow: scrollを指定していて実現できました。
しかし、エリア１の幅が大きいとき（画面上エリア１のみ表示されるようなサイズ）、
エリア２が表示されなくなってしまいました。
＊やりたい事・実現したいこと
・エリア１とエリア２を横に表示
・エリア１の幅を10000pxのように大きい値にした場合もスクロールしてエリア２を表示
よろしくお願いします。
下が問題のHTML、CSSとなります。
<!DOCTYPE html> <html> <head> <style> #area1 { float: left; background-color: #FFCC00; width: 2000px; height: 100px; } #area2 { background-color: #FFCCAA; width: 100px; height: 400px; } #container { overflow: scroll; } </style> </head> <body> <div id="area1">エリア１</div> <div id="container"> <div id="area2">エリア２</div> </div> </body> </html>
回答4件
0
質問者さんの意図する表現はいくつか方法がありますが、現状はCSSの「float」の使い方が良くないので「エリア2」が表示されないです。
現状のHTMLを使うのであれば以下の方法もあります。
CSS
1/* 全要素にリセットを掛けます */ 2* { 3 margin: 0; 4 padding: 0; 5} 6 7/* floatの削除 */ 8#area1 { 9 background-color: #FFCC00; 10 width: 2000px; 11 height: 100px; 12} 13 14#area2 { 15 background-color: #FFCCAA; 16 width: 100px; 17 height: 400px; 18} 19 20/* positionの追加 */ 21#container { 22 position: absolute; 23 top: 0; 24 left: 2000px; 25 overflow: scroll; 26}
投稿2018/02/06 12:01
総合スコア3525
0
飛び道具writing-modeを使用する案。
HTML
1<div id="container"> 2 <div id="inner"> 3 <div id="area1">エリア１</div> 4 <div id="area2">エリア２</div> 5 </div> 6</div>
CSS
1#area1 { 2 background-color: #FFCC00; 3 width: 2000px; 4 height: 100px; 5} 6#area2 { 7 background-color: #FFCCAA; 8 width: 100px; 9 height: 400px; 10} 11#container { 12 overflow-x: scroll; 13} 14#inner { 15 writing-mode: vertical-lr; 16} 17#inner>div { 18 writing-mode: lr; 19} 20```**動くサンプル：**[https://jsfiddle.net/Luc21ey3/](https://jsfiddle.net/Luc21ey3/) 21 22--- 23 24【writing-mode - CSS | MDN】 25[https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode](https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode) 26 27【ブラウザにおける縦書き最新事情 - 縦書き実装の今 | CodeGrid】 28[https://app.codegrid.net/entry/vertical-script-1](https://app.codegrid.net/entry/vertical-script-1) 29 30【ＣＳＳ Ｗｒｉｔｉｎｇ Ｍｏｄｅの仕様解説│縦書きWeb普及委員会】 31[https://tategaki.github.io/explan1.html](https://tategaki.github.io/explan1.html) 32 33【縦書きレイアウト作成ノウハウ】 34[http://tategaki.github.io/commentaries/2016/01/04/commentary-know-how.html](http://tategaki.github.io/commentaries/2016/01/04/commentary-know-how.html) 35 36【日本らしさを表現！CSSで文字の縦書きに挑戦！ | Webクリエイターボックス】 37[https://www.webcreatorbox.com/tech/writing-mode](https://www.webcreatorbox.com/tech/writing-mode)
投稿2018/02/05 12:49
総合スコア69645
0
ベストアンサー
flexを使ってみては？
CSS
1 #container { 2 display: flex; 3 } 4 5 #container > * { 6 flex: none; 7 }
HTML
1 <div id="container"> 2 <div id="area1">エリア１</div> 3 <div id="area2">エリア２</div> 4 </div>
投稿2018/02/05 07:37
総合スコア13749
0
エリア2にscroll設定をするのはどうかと思いますが
両divをラップするdivを用意し、十分な幅を設定すればよいだけのような気がします。
sample
CSS
1.area1{ 2float: left; 3background-color: #FFCC00; 4height: 100px; 5} 6.area2{ 7float: left; 8background-color: #FFCCAA; 9width: 100px; 10height: 400px; 11} 12.wrap{ 13clear:both; 14 overflow-x:hidden; 15} 16.w100{width:100px;} 17.w2000{width:2000px;} 18.w2120{width:2120px;}
HTML
1<div class="wrap"> 2<div class="area1 w100">エリア１</div> 3<div class="area2">エリア２</div> 4</div> 5<div class="wrap w2120"> 6<div class="area1 w2000">エリア１</div> 7<div class="area2">エリア２</div> 8</div>
投稿2018/02/05 03:51
編集2018/02/05 04:46
総合スコア118207
あなたの回答
tips
プレビュー
