質問編集履歴

1

cssファイル、scssファイルの追加

2021/04/17 08:27

投稿

gsbzn_
gsbzn_

スコア4

test CHANGED
File without changes
test CHANGED
@@ -21,3 +21,171 @@
21
21
  ruby 2.6.2
22
22
 
23
23
  dockerを用いて開発しています。
24
+
25
+
26
+
27
+
28
+
29
+ welcome.scss
30
+
31
+ ```
32
+
33
+
34
+
35
+ #welcome-index {
36
+
37
+ .content-wrapper{
38
+
39
+ display: flex;
40
+
41
+
42
+
43
+ .content-block{
44
+
45
+ background-color: blueviolet;
46
+
47
+ width: 80%;
48
+
49
+ height: 200px;
50
+
51
+ }
52
+
53
+ .sidebar{
54
+
55
+ background-color: cornflowerblue;
56
+
57
+ width: 20%;
58
+
59
+ height: 200px;
60
+
61
+ }
62
+
63
+ }
64
+
65
+ }
66
+
67
+ ```
68
+
69
+ application.css.scss
70
+
71
+ ```
72
+
73
+ @import 'welcome';
74
+
75
+
76
+
77
+ /*
78
+
79
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
80
+
81
+ * listed below.
82
+
83
+ *
84
+
85
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
86
+
87
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
88
+
89
+ *
90
+
91
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
92
+
93
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
94
+
95
+ * files in this directory. Styles in this file should be added after the last require_* statement.
96
+
97
+ * It is generally better to create a new file per style scope.
98
+
99
+ *
100
+
101
+ *= require_tree .
102
+
103
+ *= require_self
104
+
105
+ */
106
+
107
+
108
+
109
+ #header {
110
+
111
+ display: flex;
112
+
113
+ align-items: center;
114
+
115
+ justify-content: space-between;
116
+
117
+ }
118
+
119
+
120
+
121
+ #header #nav {
122
+
123
+ list-style: none;
124
+
125
+ display: flex;
126
+
127
+ }
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+ #header #nav li {
136
+
137
+ width: 140px;
138
+
139
+ text-align: center;
140
+
141
+ background-color: #333;
142
+
143
+ height: 50px;
144
+
145
+ line-height: 50px;
146
+
147
+ margin-right: 2px;
148
+
149
+ }
150
+
151
+
152
+
153
+ #header #nav li a {
154
+
155
+ text-decoration: none;
156
+
157
+ color: #fff;
158
+
159
+ font-weight: bold;
160
+
161
+ padding: 20px;
162
+
163
+ }
164
+
165
+
166
+
167
+ #footer {
168
+
169
+ background-color: #333;
170
+
171
+ color: #fff;
172
+
173
+ text-align: center;
174
+
175
+ padding: 10px 0px;
176
+
177
+ font-size: 13px;
178
+
179
+ margin-top: 20px;
180
+
181
+ }
182
+
183
+
184
+
185
+ #footer p {
186
+
187
+ margin: 0px;
188
+
189
+ }
190
+
191
+ ```