teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問SVG)ブラウザによって表示が変わってしまう

編集履歴

質問編集履歴

4

追記

2019/10/23 04:17

投稿

TAIniko
TAIniko

スコア32

test CHANGED
File without changes
test CHANGED
@@ -170,13 +170,21 @@
170
170
 
171
171
  **chrom**
172
172
 
173
+ 完成イメージ
174
+
173
175
  ![完成イメージ](66fd0247b7dec9e0862bffc0a3329da4.png)
174
176
 
175
177
  **firefox**
176
178
 
179
+ スマホサイズ縦
180
+
177
181
  ![スマホサイズ縦](eed020c48ec4fbdb0668ce488f05ed1e.png)
178
182
 
183
+ スマホサイズ横
184
+
179
185
  ![スマホサイズ横](33c788946093bbbc2ad1454ffa223400.png)
186
+
187
+ パソコンサイズ
180
188
 
181
189
  ![パソコンサイズ](833a90b4b414dc572412848854992dc6.png)
182
190
 

3

修正

2019/10/23 04:17

投稿

TAIniko
TAIniko

スコア32

test CHANGED
File without changes
test CHANGED
@@ -94,6 +94,76 @@
94
94
 
95
95
  ```
96
96
 
97
+ ```HTML
98
+
99
+ (index.html)
100
+
101
+ <!DOCTYPE html>
102
+
103
+ <html>
104
+
105
+ <head>
106
+
107
+ <meta charset="utf-8" />
108
+
109
+ <link rel="stylesheet" href="styles.css" />
110
+
111
+ <title>Index</title>
112
+
113
+ </head>
114
+
115
+ <body>
116
+
117
+ <div id="top-wrapper">
118
+
119
+ <div class="wrap-sample">
120
+
121
+ <!-- 共通部分 -->
122
+
123
+ <header>
124
+
125
+ <a href="index.html">Top</a>
126
+
127
+ <a href="about.html">About</a>
128
+
129
+ <a href="language.html">Language</a>
130
+
131
+ <a href="contact.html">Contact</a>
132
+
133
+ </header>
134
+
135
+ <!-- 共通部分終了 -->
136
+
137
+ <p>this is index.</p>
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+ <div id="content-wrapper">
144
+
145
+ <div class="projects">
146
+
147
+ <div class="box a">A</div>
148
+
149
+ <div class="box b">B</div>
150
+
151
+ <div class="box c">C</div>
152
+
153
+ <div class="box d">D</div>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+ </body>
160
+
161
+ </html>
162
+
163
+
164
+
165
+ ```
166
+
97
167
  よろしくお願いいたします。
98
168
 
99
169
  追記)問題点

2

追記

2019/10/23 04:15

投稿

TAIniko
TAIniko

スコア32

test CHANGED
File without changes
test CHANGED
@@ -95,3 +95,23 @@
95
95
  ```
96
96
 
97
97
  よろしくお願いいたします。
98
+
99
+ 追記)問題点
100
+
101
+ **chrom**
102
+
103
+ ![完成イメージ](66fd0247b7dec9e0862bffc0a3329da4.png)
104
+
105
+ **firefox**
106
+
107
+ ![スマホサイズ縦](eed020c48ec4fbdb0668ce488f05ed1e.png)
108
+
109
+ ![スマホサイズ横](33c788946093bbbc2ad1454ffa223400.png)
110
+
111
+ ![パソコンサイズ](833a90b4b414dc572412848854992dc6.png)
112
+
113
+
114
+
115
+ スマホサイズ横）重ねてあるSVGが表示されない
116
+
117
+ パソコンサイズ）重ねてあるSVGが表示されない、画像サイズが小さい

1

a

2019/10/23 04:09

投稿

TAIniko
TAIniko

スコア32

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,8 @@
18
18
 
19
19
  ```SVG
20
20
 
21
+ (sample.svg)
22
+
21
23
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" preserveAspectRatio="none" id="svg">
22
24
 
23
25
  <path d="M0 64 L32 64 S38 56 24 50 S6 60 0 50 Z" fill="rgb(204, 0, 0, 0.8)"></path>
@@ -27,6 +29,8 @@
27
29
  ```
28
30
 
29
31
  ```SVG
32
+
33
+ (bg.svg)
30
34
 
31
35
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
32
36