3カラムレイアウト　レスポンシブで要素の位置を変えたい

前提

yahooのような3カラムレイアウトのサイトを制作しています。

実現したいこと

pcでは、左カラム　中央カラム　右カラム
で表示させていますが、

スマホサイズの時に
右カラムの記事の間に中央カラムを表示させたいです。
（左カラムは非表示させています。）

.main-centerの要素を
.main-rightの.nav-right-1と.nav-right-2の間に表示させたい

該当のソースコード

html
1 <div class="container">
2
3      <div class="main-left">
4         <h1>左カラム</h1>
5       　 <ul>
6           <li><a href="#">aa</a></li>
7           <li><a href="#">bb</a></li>
8         </ul>
9       </div>
10
11      <main class="main-center">
12         <h1>題名</h1>
13          <section>
14            <p>中央の要素</p>
15          </section>
16       </main>
17
18      <div class="main-right">
19        <div class="nav-right nav-right-1">
20          <h1> 右カラムの一つ目の要素</h1>
21          <ul class="menu">
22            <li><a href="#">aa</a></li>
23            <li><a href="#">bb</a></li>
24          </ul>
25        </div>
26        <aside class="nav-right nav-right-2">
27          <h1 class="txtl">右カラムの２つ目の要素</h1>
28          <p>ここに要素が入ります</p>
29        </aside>
30      </div>
31
32   </div>
33

css
1.container {
2  display:flex;
3  justify-content: space-between;
4}
5.main-left {
6  width: 20%;
7}
8.main-center {
9  width: 40%;
10}
11.main-right {
12  width: 35%;
13}
14@media screen and (max-width: 640px) and (min-width:320px)  {
15    /*　画面サイズが640pxから320pxまではここを読み込む　*/
16  .container {
17    flex-direction: column;
18  }
19  .main-left {
20    display: none;
21  }
22  .main-center {
23    order:2;
24    width: 100%;
25  }
26  .main-right {
27    order:1;
28    width: 100%;
29  }
30
31}

試したこと

.containerをflexで横並びにしているので、orderを使って並べようと思いましたが、
左カラムの中に要素が2つあり、その間に中央カラムを表示させることはできませんでした。

ご教示いただきたいです。

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

回答2件

ベストアンサー

IEのサポートが終了した現在なら、CSS Grid を使うのがベターでしょう。

HTML
1<div class="container">
2  <div class="main-left">
3    <h1>左カラム</h1>
4    　 <ul>
5      <li><a href="#">aa</a></li>
6      <li><a href="#">bb</a></li>
7    </ul>
8  </div>
9  <main class="main-center">
10    <h1>題名</h1>
11    <section>
12      <p>中央の要素</p>
13    </section>
14  </main>
15  <div class="nav-right nav-right-1">
16    <h1> 右カラムの一つ目の要素</h1>
17    <ul class="menu">
18      <li><a href="#">aa</a></li>
19      <li><a href="#">bb</a></li>
20    </ul>
21  </div>
22  <aside class="nav-right nav-right-2">
23    <h1 class="txtl">右カラムの２つ目の要素</h1>
24    <p>ここに要素が入ります</p>
25  </aside>
26</div>

css
1.container {
2  display: grid;
3  grid-template:
4    "left  center right-1"
5    "left  center right-2" /
6    20% 40% 35%;
7  gap: 20px;
8}
9.main-left {
10  grid-area: left;
11  background-color: pink;
12}
13.main-center {
14  grid-area: center;
15  background-color: aqua;
16}
17.nav-right {
18  background-color: Orange;
19}
20@media screen and (max-width: 640px) and (min-width: 320px) {
21  .container {
22    grid-template:
23      "right-1"
24      "center"
25      "right-2";    
26    gap: 20px;
27  }
28  .main-left {
29    display: none;
30  }
31}

CodePenサンプル

投稿2022/10/05 15:00

hatena19

総合スコア33715

ssee

2022/10/07 09:23

css gridの存在を知りませんでした… ご回答ありがとうざいます！

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

CSSのみでの実装方法が分かりませんでしたので、JavaScriptで動的に生成してみました。
他の方からの回答がなかった時にでも、参考にしていただければ…。

動作確認用サンプル：https://jsfiddle.net/o680fjsc/1/

処理内容

ページ読み込み時に、右カラム1つ目の要素のクローンを作成
.main-centerの上のdiv#clone-containerの中に、クローンを挿入
クローンと、元々の右カラム1つ目の要素の表示非表示の切り替えは、cssで画面幅によってdisplay:block <-> noneを切り替えています。

コード例

html
1 <div class="container">
2
3   <div class="main-left">
4     <h1>左カラム</h1>
5     　 <ul>
6       <li><a href="#">aa</a></li>
7       <li><a href="#">bb</a></li>
8     </ul>
9   </div>
10
11
12   <div id="clone-container" class="clone-container">
13     <!-- クローンをここに動的に生成 -->
14   </div>
15
16   <main id="main-center" class="main-center">
17     <h1>題名</h1>
18     <section>
19       <p>中央の要素</p>
20     </section>
21   </main>
22
23   <div class="main-right">
24     <div id="nav-right-1" class="nav-right nav-right-1">
25       <h1> 右カラムの一つ目の要素</h1>
26       <ul class="menu">
27         <li><a href="#">aa</a></li>
28         <li><a href="#">bb</a></li>
29       </ul>
30     </div>
31     <aside class="nav-right nav-right-2">
32       <h1 class="txtl">右カラムの２つ目の要素</h1>
33       <p>ここに要素が入ります</p>
34     </aside>
35   </div>
36
37 </div>

css
1.container {
2  display: flex;
3  justify-content: space-between;
4}
5
6.main-left {
7  width: 20%;
8  background-color: pink;
9}
10
11.main-center {
12  width: 40%;
13  background-color: skyblue;
14}
15
16/* PCのとき、クローン非表示 */
17.clone-container {
18  display: none;
19}
20
21.main-right {
22  width: 35%;
23}
24
25.nav-right-1,
26.nav-right-2 {
27  background-color: yellow;
28}
29
30@media screen and (max-width: 640px) and (min-width:320px) {
31
32  /*　画面サイズが640pxから320pxまではここを読み込む　*/
33  .container {
34    flex-direction: column;
35  }
36
37  .main-left {
38    display: none;
39  }
40
41  .main-center {
42    order: 1;
43    width: 100%;
44  }
45  
46  .clone-container {
47    display: block;
48  }
49
50  .main-right {
51    order: 2;
52    width: 100%;
53  }
54  
55  /* SPのとき、クローンじゃない右カラム1つ目の要素を非表示 */
56  .nav-right-1:not(.is-cloned) {
57    display: none;
58  }
59}

javascript
1// ページ読み完了時に、placeClone()関数を実行
2window.addEventListener('load', placeClone);
3
4/*
5 * クローンを生成して、配置する関数
6 */
7function placeClone() {
8  // 要素を取得
9  const container = document.querySelector('#clone-container');
10  const navRight1 = document.querySelector('#nav-right-1');
11  
12  const clone = navRight1.cloneNode(true); // #nav-right-1のクローンを作成  
13  clone.id = 'nav-right-1-clone'; // id変更
14  clone.classList.add('is-cloned'); // クラス追加
15  container.append(clone); // クローンを#clone-containerの中に配置
16}

投稿2022/10/05 06:42

Cocode

総合スコア2314

Cocode

2022/10/05 06:59

CSS flexboxを使わず、gridにするとマス目に名前をつけられて、名前を指定して配置できるので、おそらくこの方法でできるのです。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines 有識者を待ちましょう。私の回答は最終手段で…！

ssee

2022/10/05 11:23

回答いただきありがとうございます！

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

あなたの回答