teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問CSSを非同期で反映させたいです。

編集履歴

質問編集履歴

4

HTMLの修正

2021/09/24 03:36

投稿

naoki1128
naoki1128

スコア3

test CHANGED
File without changes
test CHANGED
@@ -78,13 +78,9 @@
78
78
 
79
79
  <tr>
80
80
 
81
- <th>
82
-
83
- <div class="chat-message-left"><%= chat.message %></div>
81
+ <th class="chat-message-left"><%= chat.message %></th>
84
-
82
+
85
- <div class="chat-time-left" > <%= time_ago_in_words(chat.created_at) %></div>
83
+ <th class="chat-time-left"><%= time_ago_in_words(chat.created_at) %></th>
86
-
87
- </th>
88
84
 
89
85
  <th></th>
90
86
 
@@ -96,13 +92,9 @@
96
92
 
97
93
  <th></th>
98
94
 
99
- <th>
100
-
101
- <div class= "chat-message-right"><%= chat.message %></div>
95
+ <th class="chat-message-right"><%= chat.message %></th>
102
-
96
+
103
- <div class="chat-time-right" > <%= time_ago_in_words(chat.created_at) %></div>
97
+ <th class="chat-time-right"><%= time_ago_in_words(chat.created_at) %></th>
104
-
105
- </th>
106
98
 
107
99
  </tr>
108
100
 
@@ -144,9 +136,9 @@
144
136
 
145
137
  ```js
146
138
 
147
- $('.message').append("<div><%= @chat.message %></div>");
139
+ $('.message').append("<th><%= @chat.message %></th>");
148
-
140
+
149
- $('.message').append("<div><%= time_ago_in_words(@chat.created_at) %></div>");
141
+ $('.message').append("<th><%= time_ago_in_words(@chat.created_at) %></th>");
150
142
 
151
143
  $('input[type=text]').val("")
152
144
 

3

jsの変更

2021/09/24 03:36

投稿

naoki1128
naoki1128

スコア3

test CHANGED
File without changes
test CHANGED
@@ -144,9 +144,9 @@
144
144
 
145
145
  ```js
146
146
 
147
- $('.message').append("<p style='text-align: left;'><%= @chat.message %></p>");
147
+ $('.message').append("<div><%= @chat.message %></div>");
148
-
148
+
149
- $('.message').append("<p><%= time_ago_in_words(@chat.created_at) %></p>");
149
+ $('.message').append("<div><%= time_ago_in_words(@chat.created_at) %></div>");
150
150
 
151
151
  $('input[type=text]').val("")
152
152
 

2

htmlの変更

2021/09/24 03:06

投稿

naoki1128
naoki1128

スコア3

test CHANGED
File without changes
test CHANGED
@@ -80,9 +80,9 @@
80
80
 
81
81
  <th>
82
82
 
83
- <p style="text-align: left;", class="chat-message-left"><%= chat.message %></p>
83
+ <div class="chat-message-left"><%= chat.message %></div>
84
-
84
+
85
- <p style="text-align: left;", class="chat-time-left" > <%= time_ago_in_words(chat.created_at) %></p>
85
+ <div class="chat-time-left" > <%= time_ago_in_words(chat.created_at) %></div>
86
86
 
87
87
  </th>
88
88
 
@@ -98,9 +98,9 @@
98
98
 
99
99
  <th>
100
100
 
101
- <p style="text-align: right;", class= "chat-message-right"><%= chat.message %></p>
101
+ <div class= "chat-message-right"><%= chat.message %></div>
102
-
102
+
103
- <p style="text-align: right;", class="chat-time-right" > <%= time_ago_in_words(chat.created_at) %></p>
103
+ <div class="chat-time-right" > <%= time_ago_in_words(chat.created_at) %></div>
104
104
 
105
105
  </th>
106
106
 

1

cssの追記

2021/09/24 03:04

投稿

naoki1128
naoki1128

スコア3

test CHANGED
File without changes
test CHANGED
@@ -152,6 +152,52 @@
152
152
 
153
153
  ```
154
154
 
155
+ ```css
156
+
157
+ .chat-message-left{
158
+
159
+ border-radius: 0%;
160
+
161
+ background-color: lightgreen;
162
+
163
+ width: 220px;
164
+
165
+ margin-left: 5px;
166
+
167
+ }
168
+
169
+ .chat-message-right{
170
+
171
+ border-radius: 0%;
172
+
173
+ background-color: lightgreen;
174
+
175
+ margin-right: 5px;
176
+
177
+ }
178
+
179
+ .chat-time-left{
180
+
181
+ margin-left: 5px;
182
+
183
+ font-size: 10px;
184
+
185
+ color: rgb(77, 77, 77);
186
+
187
+ }
188
+
189
+ .chat-time-right{
190
+
191
+ margin-left: 5px;
192
+
193
+ font-size: 10px;
194
+
195
+ color: rgb(77, 77, 77);
196
+
197
+ }
198
+
199
+ ```
200
+
155
201
  ### 試したこと
156
202
 
157
203
  https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/