Q&A
「メディアクエリ」てやつでしょうか？
ありがとうございます！
思いがけない方法でした！
CSSを勉強し始めたばかりの超初心者です。
メルカリ風のヘッダを作ろうとしてます。
どうやって実装できるのか分からず質問させていただきます。
モバイルなど画面幅が狭い時は3段になり、
広い時は2段になります。
分からないのが、右端のボタン２つ（新規会員登録とログイン）が、
3段時は、1番上の行に。
2段時は、2段目の行に移動するんです。
これはFlexboxのorderだけで実現できるのでしょうか？
orderは、colの順番を指定するものと解釈してます。
フレームワークはbootstrap4を入れてます。
実装の考え方だけでも結構です。何かヒントいただけないでしょうか？
宜しくお願いします。
html
1<div class="container"> 2 <div class="row"> 3 <div class="col-2">ロゴ</div> 4 <div class="col-10">新規会員登録、 ログイン</div> 5 </div> 6 <div class="row"> 7 <div class="col-12">テキストボックス</div> 8 </div> 9 <div class="row"> 10 <div class="col-12">カテゴリから探す</div> 11 </div> 12</div>
回答2件
0
ベストアンサー
メルカリのサイトを検証ツールで見てみると、
PC用(2段)のヘッダーとスマホ用（3段）のヘッダーを別に用意して、メディアクエリで表示/非表示を切りえてますね。
まあ、これが一番簡単な実装法でしょう。
Flex の order でやるなら、現状のHTMLでは無理ですね。
要素内での順番を入れ替えることはできても、別の要素に移動させることはできませんのて。
Flex - Bootstrap 4.2 - 日本語リファレンス
もし、ひとつのHTMLでFlexbox と order でレイアウトを変更するなら、 Bootstrapを使うより自分でCSS書いた方がシンプルで分かり安くできそうです。
あるいは、CSS Grid を使うのもシンプルにできそうです。
投稿2020/10/03 08:42
総合スコア34075
0
メルカリで確認しました。
メルカリではJQueryを使用していました。
(多分他の部分のコントロールがあるから)
ただこの部分に関していえばcssのレスポンシブ対応だけで可能です
やっている方法は
「ボタンは2つあった！」
です。
PCの時は[新規会員登録][ログイン]は下のボタンのみ表示
モバイル等の画面が狭い場合は上のボタンのみ表示
と切り替えているだけです。
投稿2020/10/03 08:37
総合スコア2506
> 「メディアクエリ」てやつでしょうか？
そうです。
結局はPC用画面とモバイル用画面が2種類あって
画面の幅で切り替えていたという事です。
回答有難う御座います。
お二人にベストアンサーをお付けしたかったのですが、１つしか付けれないため・・・。
先だったhatena19さんにさせていただきました。すみません。
いいえ、いいんです。
一生使う事のないと思っていたセリフを書けただけで幸せです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/03 08:48