回答編集履歴
2
teratailの貼り付けバグのため修正。
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
CSSで横並ぶさせるには。
|
|
2
|
+
|
|
1
3
|
【よこ並びのCSS。】
|
|
2
4
|
[http://lopan.jp/layout/](http://lopan.jp/layout/)
|
|
3
5
|
|
1
teratailの貼り付けバグのため修正。
answer
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
picture要素をとりあえず使ってみた。（画像の分岐をもっと
|
|
9
|
+
「HTML5で」とあるので、picture要素をとりあえず使ってみた。（画像の分岐をもっと意味あるものにしたら良かった）
|
|
10
|
-
書き始めてからGridにすればよかったと
|
|
11
10
|
|
|
11
|
+
|
|
12
12
|
```CSS
|
|
13
13
|
.pict {
|
|
14
14
|
max-width: 800px;
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
<!-- 以下省略 -->
|
|
66
66
|
</div>
|
|
67
67
|
```**動くサンプル：**[https://jsfiddle.net/0whcwhyk/2/](https://jsfiddle.net/0whcwhyk/2/)
|
|
68
|
+
**動くサンプル（表示用）：**[https://jsfiddle.net/0whcwhyk/2/show/](https://jsfiddle.net/0whcwhyk/2/show/)
|
|
68
69
|
|
|
69
70
|
---
|
|
70
71
|
|
|
@@ -87,4 +88,11 @@
|
|
|
87
88
|
[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)
|
|
88
89
|
|
|
89
90
|
【なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 | Rriver】
|
|
90
|
-
[https://parashuto.com/rriver/responsive-web/picture-srcset-use-case](https://parashuto.com/rriver/responsive-web/picture-srcset-use-case)
|
|
91
|
+
[https://parashuto.com/rriver/responsive-web/picture-srcset-use-case](https://parashuto.com/rriver/responsive-web/picture-srcset-use-case)
|
|
92
|
+
|
|
93
|
+
【Google Chromeブラウザでスマートフォンサイトをチェックする：Google Chrome完全ガイド - ＠IT】
|
|
94
|
+
[http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html](http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html)
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
書いてた回答が消えた･･･。（再構成版）
|