回答編集履歴
1
コードの説明を追加
test
CHANGED
|
@@ -37,3 +37,15 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### コードの説明
|
|
44
|
+
|
|
45
|
+
`.col-4:before`では、正方形のエリアを作成しています。
|
|
46
|
+
|
|
47
|
+
`height: 100%`は、position指定以外では、うまく効かないので、`padding-top: 100%;`で高さを設定します。
|
|
48
|
+
|
|
49
|
+
すると、どんな幅になっても正方形になります。
|
|
50
|
+
|
|
51
|
+
そのエリアに対して`input`をぴったり配置させるため、`.col-4`を親として`position`指定をしています。
|