teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

修正

2020/03/23 00:37

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -12,4 +12,23 @@
12
12
  追記:
13
13
  こちらも直接は関係ないですが、タイプミスです。
14
14
  誤: `type="image/pmg"`
15
- 正: `type="image/png"`
15
+ 正: `type="image/png"`
16
+
17
+ ---
18
+
19
+ > もしそうならばパソコン上でスマホの画面のように見るやり方を教えて頂きたいです。
20
+
21
+ 「@media CSS」「CSS レスポンシブ」などで検索すると、やりかたを見つけられると思います。
22
+ CSSの記述としては例えば以下です。
23
+
24
+ ```CSS
25
+ /* 画面幅が480px以下のときに以下のCSSが適用される */
26
+ @media screen and (max-width: 480px) {
27
+ body {
28
+ background: #f00; /* 画面幅480px以下のときは背景を赤にする */
29
+ }
30
+ .sidebar {
31
+ display: none; /* 画面幅480px以下のときは.sidebarを非表示にする */
32
+ }
33
+ }
34
+ ```

2

追記

2020/03/23 00:37

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -7,4 +7,9 @@
7
7
 
8
8
  追記:
9
9
  直接は関係なさそうですが`<link>`は`<head>`の中に加えるのが一般的です。
10
- ![<link>が<head>の中にない](edba7b7f8b447f85463138f38ea6488e.png)
10
+ ![<link>が<head>の中にない](edba7b7f8b447f85463138f38ea6488e.png)
11
+
12
+ 追記:
13
+ こちらも直接は関係ないですが、タイプミスです。
14
+ 誤: `type="image/pmg"`
15
+ 正: `type="image/png"`

1

修正

2020/03/23 00:04

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -3,4 +3,8 @@
3
3
 
4
4
  `<meta name=”viewport” content=”width=device-width,initial-scale=1.0>`
5
5
  ↓以下のように書き換えてみてください。
6
- `<meta name="viewport" content="width=device-width,initial-scale=1.0">`
6
+ `<meta name="viewport" content="width=device-width,initial-scale=1.0">`
7
+
8
+ 追記:
9
+ 直接は関係なさそうですが`<link>`は`<head>`の中に加えるのが一般的です。
10
+ ![<link>が<head>の中にない](edba7b7f8b447f85463138f38ea6488e.png)