Q&A
スマホかどうかで判断するのでしょうか？
widthで判断すれば良いと思います
（PCでもブラウザ幅を縮めればどうように見える）
現在、下記の様に、divで囲って、
画像・文章・画像・文章 と表示させています。
それを、スマホからの閲覧時に、
画像・文章
画像・文章 と表示させたいと思っています。
class**では、
display: table-cell;
vertical-align: middle;
margin: 0;
を指示しています。
コードはコードブロックで記載してください。
```ここに言語名
ここにコード
```
という形式です。
また、CSSも同じくコードで記載してください。
また、現状と、理想形の画面をキャプチャで構いませんので、画像を載せていただくと、回答しやすくなるかと思いますので、よろしくお願いします。
最後に、"携帯"とはスマートフォンデバイスで、よろしいですか？
"携帯"だと、ガラケーも含まれているので、対応方法がまるで変わってきてしまいます。
はい、勿論、width480でも構わないと思っていますが、やり方がわかりません。
「携帯」の定義を教えてください。
すいません、本文に、［スマホからの閲覧時］と記載していたので、わかって頂けると思ってしまいました。
なるほど。
だいたいの方は、質問タイトルに注目しますので、
タイトルの方も表記を統一された方が、勘違いが生まれないかと思いますよ。
コードブロックの記載と、CSSの記載はどうかお願いします。
> 本文に、［スマホからの閲覧時］と記載
いや、そういうことじゃなくて
・widthで判断するのか？
・user-agentで判断するのか？
・その他何らかの手段で判断するのか？
ということではないのでしょうか？
> ［スマホからの閲覧時］と記載していたので、わかって頂けると
スマホの定義を、という話になりますが……
surface duo はどっちでしょう？
回答4件
0
たとえばこんな感じで
投稿2020/02/25 07:03
総合スコア114962
<style>
@media screen and (min-width: 481px) {
.hoge{display:flex;}
}
</style>
<div class="hoge">
<p><img src="1.jpg" width="80" height="100" alt=""/></p>
<p class="tex"> ～～～～です。</p>
<p><img src="2.jpg" width="80" height="100" alt=""/></p>
<p class="tex">～～～～です。</p>
</div>
0
ベストアンサー
皆様
質問の仕方が悪かったようで失礼致しました。
481以上でfloatというやり方にしようと思います。
そちらもよくわかっていないので、
再度質問を立てようと思います。
ありがとうございました。
投稿2020/02/26 02:34
退会済みユーザー
総合スコア0
> 481以上でfloat
flexが台頭してからはfloatは微妙なのでよくよく検討してから実装してください
0
スクリーンサイズからの回答がついているようなので、UAでの判別についてQiitaの記事を挙げます。
[ jQuery ] ユーザーエージェント判定 - Qiita
UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita
投稿2020/02/25 08:08
総合スコア36138
0
"携帯"は、
スマホデバイスを指しているとして、回答いたします。
メディアスクリーンを使えば、できるかと思います。
コメントにある通り、横480pxで切り分けるなら下記になります。
css
1@media screen and (max-width: 480px) { 2 /* この中に、横480px以下のデバイスの場合、更新したい各CSSセレクター、プロパティを書いていく */ 3 selector { 4 property: value; 5 } 6 /* 上記は仮で入れている、無効な記載なので、実際に使う時は当てたいものを記載してください。 */ 7}
あと、HTMLにも、画面に対しての設定が必要になります。
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 5<!-- 他head情報 --> 6</head> 7<body> 8 <!-- 内容 --> 9</body> 10</html>
投稿2020/02/25 07:04
編集2020/02/25 07:47総合スコア9528
あなたの回答
tips
プレビュー
