質問編集履歴
4
url変更のため削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
また初めて投稿するので不備が多くあると思いますが、足りない情報は言っていただけるとありがたいです。
|
|
4
4
|
すぐに追加します。
|
|
5
5
|
|
|
6
|
-
https://ituki316.github.io/
|
|
7
|
-
現在上記URLでHP作成中ですが、背景画像がPCで見ると反映されていますが、スマホで見るとぼやけてしまいます。
|
|
8
6
|
[内容]
|
|
9
7
|
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォン(iPhoneのSafari)でgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
|
|
10
8
|
[pcの場合]
|
3
編集を追加しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,14 +13,14 @@
|
|
|
13
13
|
[スマホ(iPhoneのSafari)の場合]
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
```html
|
|
17
17
|
**HTML **
|
|
18
|
+
<div class="skill">
|
|
19
|
+
<h1 class="sec03">Skill</h1>
|
|
20
|
+
</div>
|
|
21
|
+
```
|
|
18
22
|
|
|
19
|
-
<div class="skill">
|
|
20
|
-
<h1 class="sec03">Skill</h1>
|
|
21
|
-
|
|
23
|
+
```css
|
|
22
|
-
|
|
23
|
-
|
|
24
24
|
**CSS **
|
|
25
25
|
.skill {
|
|
26
26
|
position: relative;
|
|
@@ -42,7 +42,12 @@
|
|
|
42
42
|
font-family: "Montserrat", sans-serif;
|
|
43
43
|
margin: 0;
|
|
44
44
|
}
|
|
45
|
+
```
|
|
45
46
|
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
46
51
|
### 試したこと
|
|
47
52
|
|
|
48
53
|
background-imageではなくimgを使い行なったところ綺麗な画像で表示できたが、写真が小さくなりすぎたため、できればpc画面に表示されているような綺麗なレスポンシブにしたい。
|
2
またプラスでURLを付随したので見ていただければ幸いです。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
また初めて投稿するので不備が多くあると思いますが、足りない情報は言っていただけるとありがたいです。
|
|
4
4
|
すぐに追加します。
|
|
5
5
|
|
|
6
|
+
https://ituki316.github.io/
|
|
7
|
+
現在上記URLでHP作成中ですが、背景画像がPCで見ると反映されていますが、スマホで見るとぼやけてしまいます。
|
|
6
8
|
[内容]
|
|
7
9
|
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォン(iPhoneのSafari)でgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
|
|
8
10
|
[pcの場合]
|
1
ご指摘ありがとうございます。コードを画面と同じものに編集しました。Takumibooさんのおっしゃられている通りiPhoneのSafariで確認しました。pc画面でスクショしたものに変更しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,40 +4,48 @@
|
|
|
4
4
|
すぐに追加します。
|
|
5
5
|
|
|
6
6
|
[内容]
|
|
7
|
-
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォンでgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
|
|
7
|
+
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォン(iPhoneのSafari)でgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
|
|
8
8
|
[pcの場合]
|
|
9
|
-
]
|
|
10
|
-
[スマホの場合]
|
|
11
|
-
|
|
12
10
|
|
|
11
|
+
[スマホ(iPhoneのSafari)の場合]
|
|
12
|
+
|
|
13
|
+
|
|
13
14
|
### 該当のソースコード
|
|
14
15
|
**HTML **
|
|
16
|
+
|
|
15
|
-
<div class="
|
|
17
|
+
<div class="skill">
|
|
16
|
-
<
|
|
18
|
+
<h1 class="sec03">Skill</h1>
|
|
17
19
|
</div>
|
|
18
20
|
|
|
21
|
+
|
|
19
22
|
**CSS **
|
|
20
|
-
.
|
|
23
|
+
.skill {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 0;
|
|
23
24
|
position: relative;
|
|
24
|
-
background: url(
|
|
25
|
+
background: url(book.png) no-repeat center center fixed;
|
|
25
26
|
-webkit-background-size: cover;
|
|
26
27
|
-moz-background-size: cover;
|
|
27
28
|
background-size: cover;
|
|
28
|
-
text-align: center;
|
|
29
29
|
color: #fff;
|
|
30
30
|
padding-top: 110px;
|
|
31
31
|
min-height: 900px;
|
|
32
32
|
letter-spacing: 2px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.sec03{
|
|
36
|
+
text-align: center;
|
|
37
|
+
font-size: 30px;
|
|
38
|
+
line-height: 1.8;
|
|
39
|
+
text-transform: uppercase;
|
|
33
40
|
font-family: "Montserrat", sans-serif;
|
|
41
|
+
margin: 0;
|
|
34
42
|
}
|
|
35
43
|
|
|
36
44
|
### 試したこと
|
|
37
45
|
|
|
38
46
|
background-imageではなくimgを使い行なったところ綺麗な画像で表示できたが、写真が小さくなりすぎたため、できればpc画面に表示されているような綺麗なレスポンシブにしたい。
|
|
39
47
|
|
|
40
|
-
chrome以外にpcのsafariで確認したが、正常に画像が反映した。そのためスマホの何かしらの影響が原因と考えられた。
|
|
48
|
+
chrome以外にpcのsafariで確認したが、正常に画像が反映した。そのためスマホ(iPhoneのSafari)の何かしらの影響が原因と考えられた。
|
|
41
49
|
|
|
42
50
|
javascriptのアニメーションが重いため動かないかと考えて、ファイルを消しましたが効果がなかったです。
|
|
43
51
|
|