Q&A
【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips
モバイル版で、ボタンを並列にしたいのですが、CSSではどの様に表現すればいいのでしょうか？
因みにPC版では、並列なのですがスマホ版になると縦並びになります。
回答2件
0
ベストアンサー
なぜ、パソコンでは並列にすることができて、スマホではできないのかを考えましょう。
画面の表示幅が足らないからだと思います。
モバイル版で、ボタンを並列にしたいのですが、CSSではどの様に表現すればいいのでしょうか？
メディアクエリやレスポンシブで対応すれば良いかと思います。
この質問ではこんな回答しかできないです。
具体的な回答を要求するのであれば、具体的な質問を要求します。
正直この質問では情報量が少ないです。
投稿2020/06/07 02:09
総合スコア2076
ご回答ありがとうございます。
全く初心者ですので、どの様に解決策に繋がる具体的な説明をすれば良いかわかりませんが、今WPのテーマ（ストーク）内の２カラムショートコードを使って、並列にしております。
↓このショートコードです↓
[colwrap]
[col2][/col2]
[col2][/col2]
[/colwrap]
k011510さんが、仰る通りモバイル版になると表示幅が足りないので直列になっているのかと思います。ただ、モバイル版の幅に変更するとPC版のレイアウトがおかしくなってしまい、どの様にレスポンシブ対応に変更すればいいかわかっておりません。
> ただ、モバイル版の幅に変更するとPC版のレイアウトがおかしくなってしまい、どの様にレスポンシブ対応に変更すればいいかわかっておりません。
メディアクエリで画面の表示幅が何px以下の時にはこのスタイリングをという形で行えば良いかと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries
ありがとうございます。解決しました！
0
モバイル用にわざわざcssを切り替えているのでしょうけど
その設定を利用しなければPCと同等になるはずです
投稿2020/06/07 02:08
総合スコア116724
ご回答ありがとうございます。
WPのテーマ（ストーク）を使っておりまして、基本的にはレスポンシブ対応になっているので、PC版とスマホ版は同じCSSで対応しております。
現状テーマ内の２カラムショートコードで、並列を保っておりますが、スマホ版になると直列になってしまうという状況です。また、ボタン幅をSP様に変更するとPC版のレイアウトが崩れてしまいますのでどの様に解決すればいいのか見えておりません。
完全に初心者ですので、解決策に繋がる質問ができているのかわかりませんが、ご了承願います。
あなたの回答
tips
プレビュー
