回答編集履歴

1

サンプル追加

2021/12/07 04:09

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -41,3 +41,35 @@
41
41
 
42
42
 
43
43
  こまかいレイアウトは分からないので、そちらで調節してください。
44
+
45
+
46
+
47
+ 追記
48
+
49
+ ---
50
+
51
+ [CSS3 - gridを使って画像とtextを逆さまにした状態で、txtの画像も大きくしたい。|teratail](https://teratail.com/questions/372615)
52
+
53
+ 上記の質問の回答用サンプルを書いていたら、削除リクエストされたようで、投稿できないので、ここに置いておきます。
54
+
55
+
56
+
57
+ gridを使うよりflexでレイアウトしたほうがシンプルになるので、そちらで作成しました。
58
+
59
+
60
+
61
+ 左右入れ替えは`flex-direction: row-reverse;`で、
62
+
63
+ 画像とテキストブロックの重なりは、ネガティブマージンで、
64
+
65
+ それぞれ実装しました。
66
+
67
+
68
+
69
+ 下記のサンプルでご確認ください。
70
+
71
+ サイズや余白、重なり具合は適当ですので、ご希望に合わせて調整してください。
72
+
73
+
74
+
75
+ [CodePenサンプル](https://codepen.io/hatena19/pen/LYzGowX?editors=0100)