回答編集履歴
2
srcsetの記述で、拡張子が抜けていたので、修正
answer
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
また、最近では、Retinaディスプレイ対応のために、srcsetを使用しております。
|
|
24
24
|
```html
|
|
25
25
|
<!-- 原寸（1xの画像）は、200px × 200px、そのサイズで表示させたい場合 -->
|
|
26
|
-
<img src="test.jpg" srcset="test.jpg 1x,test@2x 2x" width="200" height="200" alt="テスト画像">
|
|
26
|
+
<img src="test.jpg" srcset="test.jpg 1x,test@2x.jpg 2x" width="200" height="200" alt="テスト画像">
|
|
27
27
|
```
|
|
28
28
|
srcも同時に定義すれば、srcsetがきかないブラウザに関してもsrcで定義した画像が表示されるので、
|
|
29
29
|
安心です。
|
1
auto値に関しての言及取り消しと、srcsetの使用に関しての言及を追加
answer
CHANGED
|
@@ -6,8 +6,11 @@
|
|
|
6
6
|
CSSで大きさを決めなくて済むなど、
|
|
7
7
|
利点はけっこうありますよ。
|
|
8
8
|
ただ、おっしゃる通り、レスポンシブデザインで大きさを決めたくないって時は、少々わずらわしかったりはしますけどね。
|
|
9
|
-
（そういう時は、widthに100%とか入れてます。
|
|
9
|
+
~~（そういう時は、widthに100%とか入れてます。
|
|
10
|
-
↑ただしこの書き方はIE9だと、横幅が認識されません 笑）
|
|
10
|
+
↑ただしこの書き方はIE9だと、横幅が認識されません 笑）~~
|
|
11
|
+
上記取り消し部分について、<img width="100%" height="auto">と入れるやり方の際とのつもりでしたが、
|
|
12
|
+
width、heightには、autoという値がないとのご指摘をいただきましたので、
|
|
13
|
+
取り消します。
|
|
11
14
|
|
|
12
15
|
あと、SEOにも影響があります。
|
|
13
16
|
というのも、ユーザビリティ（パフォーマンスが高いということ）が高く、HTMLとして正しい構文で記述され、エラーがないページの方が、SEOにおいての評価が高くなるからです。
|
|
@@ -15,4 +18,13 @@
|
|
|
15
18
|
|
|
16
19
|
なので、僕は、いまだに、スマホのページのHTMLだったとしても、必ずwidthとheightはつけております。
|
|
17
20
|
（スマホの場合は、画像の実寸を入れている）
|
|
18
|
-
その上で、スマホやレスポンシブの場合はCSSで大きさをコントロール、ってやってますね。
|
|
21
|
+
その上で、スマホやレスポンシブの場合はCSSで大きさをコントロール、ってやってますね。
|
|
22
|
+
|
|
23
|
+
また、最近では、Retinaディスプレイ対応のために、srcsetを使用しております。
|
|
24
|
+
```html
|
|
25
|
+
<!-- 原寸（1xの画像）は、200px × 200px、そのサイズで表示させたい場合 -->
|
|
26
|
+
<img src="test.jpg" srcset="test.jpg 1x,test@2x 2x" width="200" height="200" alt="テスト画像">
|
|
27
|
+
```
|
|
28
|
+
srcも同時に定義すれば、srcsetがきかないブラウザに関してもsrcで定義した画像が表示されるので、
|
|
29
|
+
安心です。
|
|
30
|
+
この場合でも、必ず、width、heightは入れるようにしております。
|