回答編集履歴

4

コード修正

2022/12/12 03:20

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -47,19 +47,13 @@
47
47
  figure {
48
48
  width: 80%;
49
49
  display: grid;
50
- grid-template-rows: 200px auto;
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
- font-size: 13px;
55
+ justify-self: center;
61
- padding-top: 15px;
62
- align-self: start;
56
+ align-self: center;
63
57
  }
64
58
  ```
65
59
 

3

コード修正

2022/12/12 03:01

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -47,7 +47,7 @@
47
47
  figure {
48
48
  width: 80%;
49
49
  display: grid;
50
- grid-template-rows: auto, auto;
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

誤字修正

2022/12/12 02:37

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -3,7 +3,7 @@
3
3
  > 以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。
4
4
 
5
5
  `position: absolute;`を設定した要素は、top, bottom, left, right で位置指定しなければ、元の位置に配置されます。つまり、img要素の下に配置されます。
6
- `top: 90px;`を指定した時点で、基準点(親要素の上)から90pxの位置に配置されます。
6
+ `top: 90px;`を指定した時点で、基準点(親要素の上)から90pxの位置に配置されます。
7
7
 
8
8
  > .name に right: を設定してみましたが、うまく中央に揃えることができませんでした。
9
9
 

1

追記

2022/12/12 02:35

投稿

hatena19
hatena19

スコア33620

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
+