レフトナビにつきまして...

今の会社でページ作成を担当しているのですが、素人過ぎて調べても分かりません(>_<)
下記URLを制作しているのですが、右端にあるナビゲーションをレフトナビとして付与したいのですが、

いじってみると、重なってしまって上手く行きません...また、どのパソコンから見ても、画面の大小に関わらず、今のバランスのまま、画面の中心に持ってきたいです...もちろんレフトナビがある状態で。(ノД`)
ぜひご教授のほどお願いします！

kei344

2020/04/12 04:43

質問タグに「JAVA」がありますが、「JavaScript」の間違いでは？

退会済みユーザー

2020/04/12 08:01

そもそも仕事としてやっているものを、こんなところに堂々と載せていいんでしょうか？

kei344

2020/04/13 02:38

https://teratail.com/help/avoid-asking > 解決後に編集機能を用いて、質問内容を改変し、関係のない内容にしたり、内容を削除する行為は禁止しています。

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

回答1件

ベストアンサー

こちらで試してみたところ、以下のソースコードで実現できました。

スクロール時にナビゲーションが追従
ナビゲーション含めて中央に配置
画面幅を小さくしたときに崩れない

上記条件をすべて実現するのは、CSSだけだと難しそうです。2つまでなら同時に適用することができます、

案1: 画面幅が小さいときにどれだけ崩れてもいい、という場合 (1.と2.のパターン)
左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
ただし画面幅を小さくしたときにナビゲーションが左端にはみ出る

CSS
1#div-contents {
2    width: 720px;
3
4    /* display: inline-block; */
5    display: block; /* 追加。中央配置のため必要 */
6
7    font-size: 75%;
8
9    /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
10    padding-left: calc(200px + 20px);
11    margin: 0 auto; /* 追加。中央配置のため必要 */
12}

CSS
1div#rc_rightArea {
2    width: 200px;
3    height: 155px;
4    position: fixed;
5    top: 100px;
6
7    /* right: 0px; */
8    left: calc(50vw - 360px - 100px); /* 追加 */
9
10    /* display: inline-block; */
11    display: block; /* 変更 */
12
13    background-color: #ffffff;
14    z-index: 9999;
15    font-size: 14px;
16}

案2: ナビゲーションが追従しなくてもいい、という場合 (2.と3.のパターン)
左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない

CSS
1#div-contents {
2    width: 720px;
3
4    /* display: inline-block; */
5    display: block; /* 追加。中央配置のため必要 */
6
7    font-size: 75%;
8
9    /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
10    padding-left: calc(200px + 20px);
11
12    margin: 0 auto; /* 追加。中央配置のため必要 */
13    position: relative;
14}

CSS
1div#rc_rightArea {
2    width: 200px;
3    height: 155px;
4    position: absolute;
5    top: 100px;
6
7    /* right: 0px; */
8    left: 0; /* 追加 */
9
10    /* display: inline-block; */
11    display: block;  /* 変更 */
12
13    background-color: #ffffff;
14    z-index: 9999;
15    font-size: 14px;
16}

案3: ナビゲーションが左端にくっついてもいい、という場合 (1.と3.のパターン)
左側のサイドバー「div#rc_rightArea」は、左端にくっつくが、追従する

CSS
1body {
2    padding-left: 200px;
3}

CSS
1#div-contents {
2    width: 720px;
3
4    /* display: inline-block; */
5    display: block; /* 変更。中央配置のため必要 */
6
7    font-size: 75%;
8    margin: 0 auto; /* 追加。中央配置のため必要 */
9}

CSS
1div#rc_rightArea {
2    width: 200px;
3    height: 155px;
4    position: fixed;
5    top: 100px;
6
7    /* right: 0px; */
8    left: 0; /* 追加 */
9
10    /* display: inline-block; */
11    display: block; /* 変更 */
12
13    background-color: #ffffff;
14    z-index: 9999;
15    font-size: 14px;
16    left: 0;
17}