Q&A
>但しメディアクエリを使わずにできれば
その理由はなんでしょう？メディアクエリがないということはjsで処理するような手間になると思いますが？
画像とテキストを横並びに配置することはできました。
こちらをレスポンシブデザイン（画像の横並びを縦に表示する）に対応できるようにしたい。
但しメディアクエリを使わずにできればと考えています。
何卒宜しくお願い致します。
<style>
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex .image {
width: 50%;
margin: 20px;
padding: 20px;
}
.flex .right {
margin: 0 0 0 20px;
padding: 20px;
}
.flex .title {
margin: 0px;
padding: 0px;
font-weight: bold;
font-size: 18px;
}
.flex .text {
margin: 10px 0 0;
padding: 0;
}
</style>
<div class="flex">
<a href=""><img class="image" src="" alt=""></a>
<div class="right">
<p class="title">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
表示速度が遅くなったり、キャッシュが原因で変更が反映されない可能性があったりなどです。お手数をおかけしますがよろしくお願いします
繰り返しになりますが、javascriptで処理をするという認識でよいですか？
メディアクエリなしに場合分けをすることはできませんが
場合によってはUserAgentをつかってサーバー側でCSSを変えるという手もないことはないですが現実的ではないでしょう
いえ、できればjavascriptも使わない方法があればよいです
ウェブ上で「メディアクエリを使わずに画像とテキストを横並びに配置しレスポンシブデザインに対応したい」と調べると色々出てきましたが、私では解決できませんでした、
javascriptやメディアクエリを使わずにレスポンシブデザイン対応できるような記載だったので、こちらから質問させていただきました。
私もUserAgentをつかってサーバー側でCSSを変えるという手法は現実的ではないと思います
難しいようであればそのように理解します
お手数をおかけしますが何卒宜しくお願い致します
以前の質問でもお伺いしましたが、折り返しではなくて、縦並びなのですね？
画像とテキスト横並びのものを、レスポンシブデザインに対応し、スマホなど小さい画面では縦に並べるほうほうです
『画像の横並びを縦に表示する』とありましたが、コードには画像は一つでした。上記お答えも画像が一つであるように読めます。画像は必ずひとつなのですか？
画像は一つではありません、同じように画像とテキストを繰り返し配置しようと考えています。宜しくお願い致します
繰り返しということは、画像テキスト画像テキストのような構造ですか？ それとも画像画像画像テキストテキストのような構造もありえますか？
画像またはテキストが横並びになるのは2つまで、という理解をしていますが、それは合っていますでしょうか？
画像は一つではありません、同じように画像とテキストを繰り返し配置しようと考えています。宜しくお願い致します
『同じように画像とテキストを繰り返し配置』とは、ご提示のコードで言うと .flex が繰り返される、というようなイメージで理解していますが、これは合っていますでしょうか？
回答3件
0
ベストアンサー
質問者さんの想定するレスポンシブデザインというのが不明瞭ですが、
とりあえず下記でどうでしょうか。
仕様
コンテンツの最大幅 1000px
コンテンツの最小幅 300px
画面幅640px以上
イメージとテキストの幅 50% で2列
画面幅640px未満
イメージとテキストの幅 100% で1列
CSS
1.flex { 2 max-width: 1020px; 3 margin: 20px auto; 4 display: grid; 5 gap: 20px; 6 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 7} 8.flex img { 9 width: 100%; 10 height: 100%; 11}
CodePenサンプル
Responsive layout without CSS media queries
上記で想定と違うのなら、
上記のように明確に仕様を提示してください。
投稿2025/03/17 14:35
総合スコア34292
0
以前のご質問で自己解決されていますが、同様にflex-wrap: wrapでいいのでは。
補足コメントでこれではダメな要因をヒアリングしてみたのですが、特になさそうな感じでした。
投稿2025/03/17 08:31
総合スコア37345
もちろん使っています
質問でご提示のコードでは使っていないようでしたが、ご提示いただいているコードと問題が起きているコードが異なるということでしょうか。
情報が共有されませんと、具体的にどういう問題が起きているのかを第三者からは確認できないため、有効な回答はつきにくいです。
問題が再現するコードをご提示ください。
一度、「質問するときのヒント」をお読みになってみるといいかと思います。
https://teratail.com/help/question-tips#questionTips35
あ、いや、ご提示のコードと実際のコードは一致しているが、回答が上手く伝わっていないのかもしれませんね。失礼しました。
『flex-wrap: wrapでいいのでは』という回答の意図は、CSSに flex-wrap: wrap; を追加してはいかがでしょうか？ というものでした。
具体的に追加する場所はここです。
.flex {
【ここ】
なお、回答ではセミコロンを省略していますが、これを忘れますと文法エラーとなりますのでお気をつけて。
また、以前の質問にもあった heads という独自タグを使用する環境で作業をされているのであれば、別のCSSを適用されている影響があるのかもしれません。
念のため、サンプルを置いておきますね。
https://jsfiddle.net/Lhankor_Mhy/L802m4gc/
0
状況がわかりませんが、スタティックにwidthを指定した状態でflexを利用すれば改行させることは可能です
html
1<style> 2.flex { 3display: flex; 4flex-wrap:wrap; 5} 6.flex a:has( .image) { 7margin:0; 8display:block; 9min-width: 50%; 10} 11.flex .right { 12max-width:300px; 13} 14</style> 15<div class="flex"> 16<a href=""><img class="image" src="" alt="" width=100 height=100></a> 17<div class="right"> 18<p class="title">テキストテキストテキストテキストテキストテキストテキストテキスト</p> 19<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 20</div> 21</div>
投稿2025/03/17 06:19
総合スコア117413
ご回答頂き誠にありがとうございます
画像とテキストが縦に並ぶようになりましたが、画像サイズを指定することでスマホでは画像が画面からはみ出たりしてしまいます。
画像自体もレスポンシブデザインに合わせて大きさを変えることはできませんか？
宜しくお願い致します
takami3さんの中で「レスポンシブデザイン」とはなんでしょう？
私のサンプルはflexデザインで溢れたら改行というだけなので、
溢れさせれば縦になりますし、そうでなければ横に並びます。
ページのwidthを条件にできないわけですから、明確に場合分けの条件が必要になります
あなたの回答
tips
プレビュー
