表示切り替えでhtml内に同名idが残る場合

Question

CSS初心者です。rails5.2で開発してます。

モバイルとPCでレイアウトが異るため、divで囲ってまるごと画面幅で切り替えようとしてます。

切り替えはヘッダ部にあたり、サイトロゴや、キーワード検索用のtextboxとsubmit buttonなどを置いてます。

モバイル時は３段に、PC時は２段にしたり、見た目だけを変更し機能的には同じになります。

そのため、以下のようにしてレイアウト切り替えはできそうですが、htmlソース上に同名のidが残ります。

このままだとidでjsで操作している場合や、html構文上良くないと思い、
片方のidを変えるか、と思いましたが同じ機能のものが２つ存在するのも何だか違うような気がしました。

このような場合、皆さんならどうされますでしょうか？

rails側でhtml書き出しを制御したが良いでしょうか？

初心者につき勘違いあればすみません。アドバイスいただけないでしょうか？

宜しくお願いします。

@media screen and (min-width:300px){
  body{
    color: pink;
  }
  .pc{ display: none;}
  .mobile{ display: block;}
}

@media screen and (min-width:700px){
  body{
    color: green;
  }
  .pc{ display: block;}
  .mobile{ display: none;}
}

※レイアウト部分は省略し、inputだけ記載

<div class="container">
  <div class="row">
    <!-- モバイル用のヘッダを表示 -->
    <div class="mobile">
      <!-- 省略 -->
      <input type="text" id="keyword">
      <!-- 省略 -->
      <input type="submit" id="search">
      <!-- 省略 -->
    </div>
    <!-- PC用のヘッダを表示 -->
    <div class="pc">
      <!-- 省略 -->
      <!-- 省略 -->
      <!-- 省略 -->  
      <input type="text" id="keyword">
      <!-- 省略 -->
      <!-- 省略 -->
      <!-- 省略 -->
      <input type="submit" id="search">
      <!-- 省略 -->
      <!-- 省略 -->
      <!-- 省略 -->
    </div>
  </div>
</div>

Comments

[miyabi_pudding]

> モバイルとPCでレイアウトが異るため

これを、画像でいいので質問に記載して下さい。
工夫次第で、一つのHTMLでレスポンシブ切り替えが可能かもしれませんので。

[pecchan]

https://teratail.com/questions/295702
上記の質問の件なのです。

まだ具体的なHTMLは作ってませんが、
row数が変わり、配置が変わります。

[miyabi_pudding]

であれば、hatena19さんの回答でいけますね。
Flexを使えば、要素の並ぶ順番を切り替えることができるので。
（逆順だけでなく、何番目を何番目に、と細かく指定できる）

[pecchan]

上記のURLの回答にありますように、flexではなく
メディアクエリが一番簡単との事でしたのでメディアクエリを採用したのです。
自分にはflexboxのorderで作るほどのスキルはないですorz

[pecchan]

すいません、やっと理解できました。
判定をメディアクエリで行い、デザインをFlexやGridで行うということですね。
メディアクエリだけで実現できると勘違いしてました。

[miyabi_pudding]

そういうことです。
flexで一発でやるのではなく、
メディアクエリで、ターゲット幅になった時に、
flexのプロパティを使い、順番など入れ替えるってわけです。
回答をヒントに自身で考え理解されているのは本当に素晴らしいと思います。
どうか頑張ってほしいです。

[pecchan]

お返事有難う御座います。
要領を得ず、すんなり理解できませんでした、すいません。
今日もずっと勉強しておりました^^;
とんでもないです、本当に有難う御座います。

Answer 1

それならnameを使用されては？

CSS 属性セレクタのサンプル(要素名[属性名=”値”])

現在どちらが表示されているかは

    <div id="mobile" class="mobile">
    <div id="pc" class="pc">

if(document.getElementById("pc").style.display != "none"){
// PC表示
}else if(document.getElementById("mobile").style.display != "none"){
// mobile表示
}

Comments

[kyoya0819]

1, MarkDown記法をご利用ください
2, mane -> name

[kuma_kuma_]

kyoya0819さん
ご指摘ありがとうございます。恥ずかしいスペルミスでした。

[pecchan]

kyoya0819さん
有難う御座います、理解できず悩んでいました。有難う御座います。

kuma_kuma_さん
有難う御座います、こういう方法もあるのですね！

Answer 2

機能（要素）は同じで、レイアウトが違うだけなら、要素はPC/モバイルで分けずにまとめておいて、CSSのメディアクエリでレイアウトを変更する設計にすればいいでしょう。

Flexboxを使えばOrderで要素の順番を変更できますので、たいていのレイアウト変更に対応できます。

CSS Gridを使ってもいいでしょう。

Comments

[pecchan]

有難う御座います。

https://teratail.com/questions/295702
はい、上記でhatena19様のご回答いただいたように、
「メディアクエリで入れ替る方法」を採用した所でした。

>CSSのメディアクエリでレイアウトを変更する設計にすればいいでしょう。
そのつもりで実装したつもりだったのですが、私の勘違いだったようです。
勉強し直します。