画面半分(可変)のスライドを位置固定して置きたい

下記画像のようなことを実現したいです。

コンテンツ最小幅は1200px、右カラムは900px固定、左は画面幅に合わせて可変です。(最小幅300px)
右カラムを固定して左カラムが可変になる所までは出来ました。

html
1<div class="main_con"> 
2<!--
3左カラム
4-->
5<div class="main_l">
6<div class="main_l_box1">
7
8<ul>
9	<li><a href="XXX"><img src="images/bg01.jpg" alt=""></a></li>
10	<li><img src="images/bg02.jpg" alt=""></li>
11	<li><a href="XXX"><img src="images/bg03.jpg" alt=""></a></li>
12	<li><a href="XXX"><img src="images/bg04.jpg" alt=""></a></li>
13</ul>
14
15<script>
16$( function(){
17	$('.main_l_box1').shortslider({
18		speed : 8000,
19		style : 'fade',
20		auto : true,
21		PrevNext: false,
22		indicator: false,
23		});
24});
25</script>
26</div>
27<!--↑main_l_box1-->
28</div>
29<!--
30右カラム
31-->
32<div class="main_r">
33<div class="item_box_con">
34スクロールテスト<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
41スクロールテスト<br>
42</div>
43<!--↑アイテム全幅-->
44</div>
45<!--↑right_con--> 
46</div>
47<!--↑main_con-->

css
1.main_con{
2	display: -webkit-flex;
3	display: -moz-flex;
4	display: -ms-flex;
5	display: -o-flex;
6	display: flex;
7	flex-wrap: wrap;
8	min-width:1200px;
9}
10
11.main_l {
12  -webkit-flex: 1;
13  flex: 1;
14  position: relative;
15}
16.main_l_box1{
17	padding:25px;
18	box-sizing:border-box;
19	/*position:relative;*/
20	/*
21	position:fixed;
22	height:100vh;
23	*/
24	overflow:hidden;
25}
26
27.main_l_box1 img{
28}
29
30.main_r {
31  width: 900px;
32}

これを踏まえて、左カラムに可変サイズのスライドを置き、右カラムを下にスクロールしても固定になるようにしたいのですがうまく出来ません。
*スライドはフェードがあったので、jQuery Short Sliderを利用しました。

親divの「.main_l_box1」に「position:fixed;」を入れると固定になるのですが、画像が「.main_l」の幅をはみ出して画像の幅(960x1080)を表示してしまいます。
「.main_l」や「.main_l_box1」に「overflow:hidden;」を入れてみたのですが、同じくはみ出してしまって変化がありません。

また、「position:fixed;」を抜くとスライドサイズが変化するのですが、最小幅300pxにすると左端を表示してしまいます。
これを画像中央表示させたいです。

さらに、スライドの角を取りたいのですが、こちらもうまく出来ません。
こちらは、画像固定がうまく出来れば問題ないのかもしれませんが…

css
1.main_l_box1 img{
2	border-radius: 30px; 
3	-webkit-border-radius: 30px;
4	-moz-border-radius: 30px;
5}

としてみましたが、左上だけにしか角丸が付きません。
(その他3か所は隠れているので当然ですが…)

以上、問題点が多いですが、どのようにしたら解決するでしょうか?

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

回答2件

css
1* {padding: 0; margin: 0; } /* リセット用 */
2.main_con{
3    display: -webkit-flex; /* 不要 */
4    display: -moz-flex; /* 不要 */
5    display: -ms-flex; /* 不要 */
6    display: -o-flex; /* 不要 */
7    display:-ms-flexbox; /* IE11対応 */
8    display:flex;
9    flex-wrap: wrap;
10    min-width:1200px;
11}
12
13.main_l {
14    -webkit-flex: 1; /* 不要 */
15    flex: 1;         /* 削除 */
16    width: calc(100% - 900px); /* 追加 */
17    padding:25px;   /* .main_l_box1から移動 */
18    box-sizing:border-box;  /* .main_l_box1から移動 */
19    position: relative;
20}
21.main_l_box1{
22    position: fixed;  /* 追加 */
23    padding:25px;   /* .削除 */
24    box-sizing:border-box; /* 削除 */
25    overflow:hidden;
26    max-width: calc(100% - 950px); /* 追加 */
27    border-radius: 30px; /* 追加 */ 
28}
29
30.main_l_box1 img{
31}
32
33.main_r {background: #ccc;
34    width: 900px;
35}

これで動くと思います。

position: fixed; はwidth が効かないので、実際のサイズをcalc()で計算させます。
これで「.main_l_box1 」に border-radius: 30px; が適用されるようになりますよ^^

【ご注意!! 】
既に必要なくなっていたり、意味不明なベンダープレフィックスは
出来るだけ載せないようにして下さいね^^;;

投稿2020/07/31 10:23

-millmill-

総合スコア676

答えは

css
1.main_con { overflow: hidden; height: 100vh; }
2.main_r   { overflow: scroll; }

です。

position などいりません。

Demo

追記：overflow: scroll使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、overflow-yを使ってください。左右だけでほしいなら、overflow-xを使ってください。

追記：.main_l の中の画像を中央に固定したい場合はこうしてください：

css
1.main_l {
2  overflow: hidden;  /* width を内容に影響されないように */
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

追記：上下の余白をなくしたいと依頼されました：

css
1.main_l_box1 { height: 100vh; }

追記：ひたすら 100vh 設定したら左側他の調整が難しくなりそうなので、下記のようでは内容の高さが固定されなくても左側を満たします。flex の方向を縦にします。画像の高さが十分であれば上下に余白がなくなれます。けど、ウィンドが短くなると、左右に余白が出るので、画像に min-width を設定してください。

css
1.main_l { flex-direction: column; }

追記：コメントの実例を改めてみたら、その効果は画像の width を 100vw に固定したものです。下記のようで設定できます。

css
1.main_l img { width: 100vw; }

追記：完璧に余白ないようにするには、img 要素ではなく、background を使います。目が不自由な方のために、a 要素に role="img" をつけて、aria-label="説明文" もつけます。

html
1<ul>
2    <li style="background-image: url(images/bg01.jpg)">
3        <a href="XXX" role="img" aria-label="画像1"></a>
4    </li>
5    <li style="background-image: url(images/bg2.jpg)">
6        <a href="XXX" role="img" aria-label="画像2"></a>
7    </li>
8    <li style="background-image: url(images/bg03.jpg)">
9        <a href="XXX" role="img" aria-label="画像3"></a>
10    </li>
11    <li style="background-image: url(images/bg04.jpg)">
12        <a href="XXX" role="img" aria-label="画像4"></a>
13    </li>
14</ul>

css
1.main_l li {
2  background-position: center center;
3  background-size: cover;
4}

追記：左側で写真のスライドみたいなのを作りたいとコメントいただいたので、CSS Transition で簡単な実装を追記します。

まずは ul を捨てて、一つの a だけ残してください。

html
1<div class="main_l">
2    <a role="img"></a>
3</div>

a に main_l を満たすための CSS：

css
1.main_l { display: block; }
2.main_l a {
3  display: block;
4  width: 100%;
5  height: 100%;
6}

a の background を設定します。background-image を後で JavaScript に設定します。

css
1.main_l a {
2  background-position: center center;
3  background-size: cover;
4}

JavaScript について、まずは設定を説明しましょう：

javascript
1let config = {
2  selector: ".main_l a",
3  bgUrls: [
4    "https://placehold.jp/1000x1000.png?text=Slide%201",
5    "https://placehold.jp/1000x1000.png?text=Slide%202",
6    "https://placehold.jp/1000x1000.png?text=Slide%203",
7    "https://placehold.jp/1000x1000.png?text=Slide%204"
8  ],
9  fadeDelay: 1,
10  interval: 5,
11  onTransition: currentUrl => {
12    let mainL = document.querySelector(".main_l a");
13    mainL.setAttribute(
14      "href",
15      `#anchor_${currentUrl.substring(currentUrl.length - 1)}`
16    );
17    mainL.setAttribute(
18      "aria-label",
19      `Slide ${currentUrl.substring(currentUrl.length - 1)}`
20    );
21  }
22};

selector はスライドになる要素の CSS 選択符です。複数の要素が見つかる場合、最初の要素を使います。

bgUrls は背景画像の URL の Array です。

fadeDelay は画像の切り替えのとき fade 動画の長さです。単位は秒。

interval は画像の切り替えの間隔時間です。単位は秒。

onTransition は毎回画像切り替えの際に実行したい関数です。関連のため、切り替え後表示する画像の URL を引数で渡します。これで切り替えごとURLによってリンクを変えます。

実装は下記のようになります：

javascript
1(function(config) {
2  // background を変える要素を選択
3  let mainL = document.querySelector(config.selector);
4
5  // background 画像を事前ロード
6  // じゃないと第一回コードする際 fade-in 動画見えない
7  let bgUrls = config.bgUrls;
8  function preloadImgUrls(urlArr) {
9    for (let url of urlArr) {
10      let img = new Image();
11      img.src = url;
12    }
13  }
14  preloadImgUrls(bgUrls);
15
16  // 最初の background を設定、今の background への index を記録
17  // 次の background 循環で取得
18  let currentBg = 0;
19  mainL.style.backgroundImage = `url(${bgUrls[currentBg]})`;
20  function getNextBgUrl() {
21    currentBg = (currentBg + 1) % bgUrls.length;
22    return bgUrls[currentBg];
23  }
24
25  // fade 動画を設定
26  let fadeDelay = config.fadeDelay;
27  mainL.style.transition = `opacity ${fadeDelay}s ease-in-out`;
28  async function waitForMs(ms) {
29    return new Promise(resolve => setTimeout(resolve, ms));
30  }
31  async function fadeOut() {
32    mainL.style.opacity = 0;
33    await waitForMs(fadeDelay * 1000);
34  }
35  async function fadeIn() {
36    await waitForMs(20); // fix animation fade in
37    // ここまたないと fade-in 動画たまに見えない
38    mainL.style.opacity = "";
39    await waitForMs(fadeDelay * 1000);
40  }
41
42  // 背景画像の循環を起動
43  let onTransition = config.onTransition;
44  onTransition(bgUrls[currentBg]);
45  setInterval(async () => {
46    await fadeOut();
47    let url = getNextBgUrl();
48    mainL.style.backgroundImage = `url(${url})`;
49    onTransition(url);
50    await fadeIn();
51  }, config.interval * 1000);
52})(config);

Demo で実装の様子を見れます。

投稿2020/07/21 12:25

編集2020/07/31 10:34

YufanLou

総合スコア466

beginner25487

2020/07/22 00:52

回答ありがとうございます。左固定で右だけスクロールについては希望通りになりました。右側に左右スクロールバーが出ていましたが、 .main_r { overflow-y: scroll;} で消す事が出来ました。

YufanLou

2020/07/22 00:56

お見事です！macOSで左右スクロールバーが見えないため見落としました。追記します。

beginner25487

2020/07/22 02:03

*こちらは、別件として投稿しなおした方が良いでしょうか… 左側が画面サイズに合わせでサイズ変更できるようになったのですが、中の画像が追従してくれません。画面幅を狭くすると、画像の縦横比(?または、divの縦横比??)のまま小さくなっていくので、画像の左上だけが表示され、その下に余白が出来てしまいます。また、ブラウザの高さを狭くすると、下側の角丸が切れてしまいます。(高さに追従せず画面サイズが固定) 「css 画像中央フィットさせる」で検索して、「object-fit: cover;」や「width:auto;～」(ここを参照https://1design.jp/web-development/css/1844)とやってみましたが希望通りにはなりませんでした。解決方法を色々探していたら、自分の希望の動きを見つけました。 https://maison.mercari.com/ スライドではなく画像ですが…トップの左の画像ですね。このように表示させるにはどうしたらよいでしょうか? 他のスクリプトを利用する必要がありますか?

YufanLou

2020/07/22 04:10

問題に追記しても大丈夫だと思います。

beginner25487

2020/07/22 06:20 編集

更なるありがとうございます。しかし、とても惜しいです… 縦方向の伸縮に関しては完璧に出来ました。角丸もしっかりと全部の角についています。しかし、横方向を伸縮させると、中心に向かって小さくなってしまい、上下に余白が出来てしまいました。 (あ…よく見ると、参考サイトもある程度小さくなると上下に余白が出来てしまいますね…) 出来る事なら、上下の余白は出ないようにしたいのですが、これは解決難しいでしょうか…

YufanLou

2020/07/23 11:23

いくつかの解決法を追記しました。お役に立てたら幸いです。

beginner25487

2020/07/30 08:07

返答遅くなって申し訳ありません。言われる通り、main_lのdiv内にぴったり画像を入れるために背景画像を利用してみようと思います。色々と追加したらうまくいかなくなって元に戻せなくなりそうです… 現状をこちらにアップしてみました。 https://jsfiddle.net/beginner25487/38xgvc4r/ (jsfiddleの利用方法あってるでしょうか…) 左画像は小さく上中央に表示されています。角丸は上部のみついています。背景を利用する場合、CSSの「.main_l img」「.main_l_box1 img」は不要になってきますかね… その代わり、「main_l_box1」を「main_l」100%まで広げるとかが必要でしょうか?

YufanLou

2020/07/30 09:12

jsfiddle を使うとき、外部依存を設定する必要があります。左側のResources文字をクリックして、jQueryと jQuery Short SliderのURLを入れてから実行できます。 jQuery Short Slider のコードを読んで調べた結果、あれは img 要素に依存してサイズを設定し、img がないと常に 320x200 に設定されています。色々試してみましたが、こちらから手が及ばないみたいです。

beginner25487

2020/07/31 00:53

ありがとうございます。次回からはそのようにします。さて… jQuery Short Sliderにこだわりは無いので、例えばですがjQueryを使って背景画像をフェードで切り替え、「main_l(main_l_box1の方?)」全体にリンクを掛ければ同じような事が出来ないでしょうか… BgSwitcher(http://rewish.github.io/jquery-bgswitcher/)が背景をフェードで入れ替え可能なのでこれを利用して、div枠全体をリンクする(https://www.ipentec.com/document/html-css-link-entire-div-frame)でリンクをする… と、ここまで書き込んで、この方法ではリンクが1つしかセット出来ない事に気が付きました… 背景画像に連動してリンクも変えるなんてことは無理ですよね…

YufanLou

2020/07/31 10:00

> 背景画像に連動してリンクも変えるなんてことは無理ですよねそれはできますよ。他のライブラリーはその機能が実装していないだけです。実装手法によって例えば CSS Transition で実装されたら window.ontransitionstart で連動できますけど、 jQuery でそれ聞くのかわかりません。とはいえ、CSS Transition で実装するのが難しくありません。試して実装しましたものを追記します。

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

あなたの回答