回答編集履歴
4
コード修正
test
CHANGED
@@ -47,19 +47,13 @@
|
|
47
47
|
figure {
|
48
48
|
width: 80%;
|
49
49
|
display: grid;
|
50
|
-
grid-template-rows:
|
50
|
+
grid-template-rows: max-content auto;
|
51
|
-
justify-items: center;
|
52
|
-
align-items: center;
|
53
51
|
}
|
54
52
|
.icon, .name {
|
55
53
|
grid-column-start: 1;
|
56
54
|
grid-row-start: 1;
|
57
|
-
}
|
58
|
-
.icon-directon {
|
59
|
-
color: #b3aeb5;
|
60
|
-
f
|
55
|
+
justify-self: center;
|
61
|
-
padding-top: 15px;
|
62
|
-
align-self:
|
56
|
+
align-self: center;
|
63
57
|
}
|
64
58
|
```
|
65
59
|
|
3
コード修正
test
CHANGED
@@ -47,7 +47,7 @@
|
|
47
47
|
figure {
|
48
48
|
width: 80%;
|
49
49
|
display: grid;
|
50
|
-
grid-template-rows:
|
50
|
+
grid-template-rows: 200px auto;
|
51
51
|
justify-items: center;
|
52
52
|
align-items: center;
|
53
53
|
}
|
@@ -55,5 +55,11 @@
|
|
55
55
|
grid-column-start: 1;
|
56
56
|
grid-row-start: 1;
|
57
57
|
}
|
58
|
+
.icon-directon {
|
59
|
+
color: #b3aeb5;
|
60
|
+
font-size: 13px;
|
61
|
+
padding-top: 15px;
|
62
|
+
align-self: start;
|
63
|
+
}
|
58
64
|
```
|
59
65
|
|
2
誤字修正
test
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
> 以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。
|
4
4
|
|
5
5
|
`position: absolute;`を設定した要素は、top, bottom, left, right で位置指定しなければ、元の位置に配置されます。つまり、img要素の下に配置されます。
|
6
|
-
`top: 90px;`を指定した時点で、基準点(親要素の
|
6
|
+
`top: 90px;`を指定した時点で、基準点(親要素の左上)から90pxの位置に配置されます。
|
7
7
|
|
8
8
|
> .name に right: を設定してみましたが、うまく中央に揃えることができませんでした。
|
9
9
|
|
1
追記
test
CHANGED
@@ -34,3 +34,26 @@
|
|
34
34
|
text-align: left; /* 追加 */
|
35
35
|
}
|
36
36
|
```
|
37
|
+
|
38
|
+
追記
|
39
|
+
---
|
40
|
+
`position: absolute;`で位置決めするというのはどちらかというと古い手法です。
|
41
|
+
今ならflexとかgridでレイアウトを決めるのが、いいでしょう。シンプルにできるし、レスポンシブ対応も楽です。
|
42
|
+
|
43
|
+
flexだとHTMLを修正する必要がありますが、gridならHTMLの修正は必要ないです。
|
44
|
+
flexのサンプルは他の方から既に出てますので、gridを使ったコード例を提示しておきます。
|
45
|
+
|
46
|
+
```css
|
47
|
+
figure {
|
48
|
+
width: 80%;
|
49
|
+
display: grid;
|
50
|
+
grid-template-rows: auto, auto;
|
51
|
+
justify-items: center;
|
52
|
+
align-items: center;
|
53
|
+
}
|
54
|
+
.icon, .name {
|
55
|
+
grid-column-start: 1;
|
56
|
+
grid-row-start: 1;
|
57
|
+
}
|
58
|
+
```
|
59
|
+
|