質問編集履歴
1
markdown と実際の問題点のスクショを記載して読む方がわかりやすい文章にしました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Railsでの
|
|
1
|
+
Railsでデータベースの記事を表示したい(初学者です)
|
test
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
+
### Postテーブルのデーターを下の画像のように横に並べて三つずつ表示したいです。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### 下の"New posts"以下に記事を一列三つの記事で表示していきたいのですが現状の状態は一列に六つに収まっています。
|
|
8
|
+
|
|
9
|
+
|
|
3
10
|
|
|
4
11
|
|
|
5
|
-
railsのeach文を使って画面に画像を出力して二列にしたいです。
|
|
6
|
-
|
|
7
|
-
画面に６個の記事(container)を二列で表示させたいのですが画面いっぱいに記事（container）が押し込まれて表示されます。
|
|
8
|
-
|
|
9
|
-
containerの横幅は32%で指定しています。
|
|
10
|
-
|
|
11
|
-
### 発生している問題・エラーメッセージ
|
|
12
|
-
|
|
13
|
-
[(https://gyazo.com/4c3d5af57eeaff816f9dae747989e5f8)]←理想
|
|
14
|
-
|
|
15
|
-
[(https://gyazo.com/ae272b2cca4f1ac7a0073ca58315c68f)]←現実
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
エラーメッセージ
|
|
20
|
-
|
|
21
|
-
```
|
|
22
12
|
|
|
23
13
|
|
|
24
14
|
|
|
@@ -26,9 +16,21 @@
|
|
|
26
16
|
|
|
27
17
|
|
|
28
18
|
|
|
29
|
-
```r
|
|
19
|
+
```controller
|
|
30
20
|
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
def index
|
|
24
|
+
|
|
25
|
+
@new_posts = Post.order('created_at DESC').limit(6)
|
|
26
|
+
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
-
**
|
|
31
|
+
```コントローラーでは六つの記事を新しい順で**postテーブル**から**@new_posts**に代入。
|
|
32
|
+
|
|
33
|
+
```html
|
|
32
34
|
|
|
33
35
|
<div class ="posts">
|
|
34
36
|
|
|
@@ -40,37 +42,11 @@
|
|
|
40
42
|
|
|
41
43
|
</div>
|
|
42
44
|
|
|
45
|
+
```eachメソッドで**@new_posts**を呼び出し**posts__container**にブロック変数**postのimage**を配置。
|
|
43
46
|
|
|
47
|
+
```css
|
|
44
48
|
|
|
45
|
-
**posts_controller.rb**
|
|
46
|
-
|
|
47
|
-
def index
|
|
48
|
-
|
|
49
|
-
@slider_posts = Post.all
|
|
50
|
-
|
|
51
|
-
@posts = Post.order('created_at DESC').limit(3)
|
|
52
|
-
|
|
53
|
-
@new_posts = Post.order('created_at DESC').limit(6)
|
|
54
|
-
|
|
55
|
-
end
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
**_main.posts.scss**
|
|
60
|
-
|
|
61
|
-
.posts{
|
|
62
|
-
|
|
63
|
-
margin: 50px 120px 50px;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
height: 320px;
|
|
68
|
-
|
|
69
|
-
display: flex;
|
|
70
|
-
|
|
71
|
-
justify-content: space-between;
|
|
72
|
-
|
|
73
|
-
|
|
49
|
+
posts__container{
|
|
74
50
|
|
|
75
51
|
width: 32%;
|
|
76
52
|
|
|
@@ -78,19 +54,29 @@
|
|
|
78
54
|
|
|
79
55
|
border-radius: 10px;
|
|
80
56
|
|
|
81
|
-
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
```**posts__container**は親要素に対して32%で均等に配置されるように横幅を指定。
|
|
82
60
|
|
|
83
61
|
|
|
84
62
|
|
|
85
63
|
### 試したこと
|
|
86
64
|
|
|
87
|
-
cont
|
|
65
|
+
仮説❶controllerのなかでメソッドを使って**三つ取得したら改行**みたいなメソッドを書く。
|
|
88
66
|
|
|
89
|
-
|
|
67
|
+
仮説❷htmlのなかに**if文を入れて三つ目で改行をtrueにする。**
|
|
68
|
+
|
|
69
|
+
仮説❸cssでposition を使ってcontainerを固定してみる。
|
|
90
70
|
|
|
91
71
|
|
|
92
72
|
|
|
73
|
+
どんなコードの書き方(each文を使わなくても表示させる方法)などご教授いただきたいです。
|
|
74
|
+
|
|
75
|
+
よろしくお願いします。
|
|
76
|
+
|
|
93
77
|
### 補足情報（FW/ツールのバージョンなど）
|
|
78
|
+
|
|
79
|
+
|
|
94
80
|
|
|
95
81
|
ruby '2.6.5'
|
|
96
82
|
|