回答編集履歴
2
追加
answer
CHANGED
|
@@ -22,4 +22,6 @@
|
|
|
22
22
|
.pc { display: none; }
|
|
23
23
|
.sp { display: block; }
|
|
24
24
|
}
|
|
25
|
-
```
|
|
25
|
+
```
|
|
26
|
+
繰り返しますがあくまでも**一般論**なので質問者さんの環境に合わない場合も十分考えられます。
|
|
27
|
+
以上長々と失礼しました。
|
1
切れていたので
answer
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
1
|
mts10806さんのようにレスポンシブデザインというものの方が良いかと
|
|
2
|
-
私からは実際どうすれば良いのかというお話をHTMLを基軸にします。
|
|
2
|
+
私からはスマホとパソコンで表示を変えるには実際どうすれば良いのかというお話をHTMLを基軸に**一般論**でします。
|
|
3
|
-
現在一般的に利用されている方法(自分も利用している方法)だとHTMLで
|
|
3
|
+
現在一般的に利用されている方法(自分も利用している方法)だとHTMLにviewportを埋め込みCSSで表示非表示を分岐する方法があります。
|
|
4
|
+
一応一例を挙げておきます。
|
|
5
|
+
```HTML
|
|
6
|
+
〜省略〜
|
|
7
|
+
<meta name="viewport"
|
|
8
|
+
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
9
|
+
〜省略〜
|
|
10
|
+
<div class="sp">
|
|
11
|
+
スマホだけ表示
|
|
12
|
+
</div>
|
|
13
|
+
<div class="pc">
|
|
14
|
+
パソコンだけ表示
|
|
15
|
+
</div>
|
|
16
|
+
〜省略〜
|
|
17
|
+
```
|
|
18
|
+
```CSS
|
|
19
|
+
.pc { display: block; }
|
|
20
|
+
.sp { display: none; }
|
|
21
|
+
@media only screen and (max-width: 750px) {
|
|
22
|
+
.pc { display: none; }
|
|
23
|
+
.sp { display: block; }
|
|
24
|
+
}
|
|
25
|
+
```
|