現在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>

m.ts10806

2018/02/05 02:50

表示されないというより、floatの指定により、area1の右側に表示されるようになっただけです。 area1 のwidthの数値を小さくしてみると分かりますよ。「エリア１の幅が大きい場合」というのが結局どのようにしたいのかイメージが非常にわきづらいです。もう少し具体的にお願いします（図示でも構いません）

Poo

2018/02/05 02:55

回答ありがとうございます！確かにarea1のwidthを小さくしたら表示されました！　イメージなのですが極端な話area1のwidthが10000pxのときでも横にスクロールしていったらarea2が表示できる状態にしたいです。今はarea1のwidthを小さくしないと表示されないという問題に困っております。

kei344

2018/02/05 03:04

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

Poo

2018/02/05 04:25

指摘ありがとうございます。修正しました。

行動規範の内容に同意します

回答4件

質問者さんの意図する表現はいくつか方法がありますが、現状は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

yoshinavi

総合スコア3523

飛び道具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

kei344

総合スコア69407

ベストアンサー

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

x_x

総合スコア13749

エリア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

yambejp

総合スコア114839

Poo

2018/02/05 04:23 編集

回答ありがとうございます！area2にscrollを設定していたのはarea1の高さよりarea2の高さの値が大きくなった場合でも左右に分けて表示したかったためです。（area2ほうが高い場合、area2が回り込んでしまいます）scroll設定以外にもっと良い方法がありましたら教えていただけないでしょうか？ divでラップする方法検討してみます。ありがとうございます。