回答編集履歴

2

代替案の提示

2019/01/17 01:28

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -121,3 +121,113 @@
121
121
 
122
122
 
123
123
  CSSやHTMLはこれで全部ですか?
124
+
125
+
126
+
127
+ ---
128
+
129
+
130
+
131
+ ### 代替案の提示
132
+
133
+
134
+
135
+ ```html
136
+
137
+ <html>
138
+
139
+ <head>
140
+
141
+ <meta charset="utf-8">
142
+
143
+ <title>test</title>
144
+
145
+ <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
146
+
147
+ </head>
148
+
149
+ <body>
150
+
151
+ <div class="testdiv">
152
+
153
+ <input class='testbutton' type="button" value="ログアウト">
154
+
155
+ <button type="button" class='testbutton2' name="test" value="logout">ログアウト2
156
+
157
+ </button>
158
+
159
+ </div>
160
+
161
+ </body>
162
+
163
+ </html>
164
+
165
+ ```
166
+
167
+
168
+
169
+ ```css
170
+
171
+ .testdiv {
172
+
173
+ text-align:center;/*真ん中寄せ*/
174
+
175
+ }
176
+
177
+
178
+
179
+ .testbutton {/*ログアウト1*/
180
+
181
+ height:60px;
182
+
183
+ width:100px;
184
+
185
+ border-radius: 10px; /*角丸にする*/
186
+
187
+ background-color:#ffa500;
188
+
189
+ }
190
+
191
+
192
+
193
+ .testbutton:hover {
194
+
195
+ background-color:#ff8c00;
196
+
197
+ }
198
+
199
+
200
+
201
+ .testbutton2 {/*ログアウト2*/
202
+
203
+ height:60px;
204
+
205
+ width:100px;
206
+
207
+ border-radius: 10px; /*角丸にする*/
208
+
209
+ background-color:#ffa500;
210
+
211
+ }
212
+
213
+
214
+
215
+ .testbutton2:hover {
216
+
217
+ background-color:#ff8c00;
218
+
219
+ }
220
+
221
+ ```
222
+
223
+
224
+
225
+ ![イメージ説明](a71eda3d8ba98452707c5cfb89be8881.png)
226
+
227
+
228
+
229
+ ボタン作成時にdivを背景として使わないという方法もあるので一応書いておきます。
230
+
231
+ どうしてもdivで設定しなければいけないんだという強い希望があるのでしたら
232
+
233
+ また考えます

1

追記

2019/01/17 01:28

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -13,6 +13,34 @@
13
13
  もしその認識であっているのであれば、div要素にCSSを追加してやればいいだけな気がします。
14
14
 
15
15
 
16
+
17
+ ```html
18
+
19
+ <html>
20
+
21
+ <head>
22
+
23
+ <meta charset="utf-8">
24
+
25
+ <title>test</title>
26
+
27
+ <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
28
+
29
+ </head>
30
+
31
+ <body>
32
+
33
+ <div class="header-list">
34
+
35
+ <a href="#" class="logout">ログアウト</a>
36
+
37
+ </div>
38
+
39
+ </body>
40
+
41
+ </html>
42
+
43
+ ```
16
44
 
17
45
 
18
46
 
@@ -65,3 +93,31 @@
65
93
  }
66
94
 
67
95
  ```
96
+
97
+
98
+
99
+ ---
100
+
101
+ ### 画面での実行結果(追記)
102
+
103
+ ![![イメージ説明](a42bb5ee77eca2b39e580c3e4ecd6d16.png)]
104
+
105
+
106
+
107
+ う~ん?色変わるんですけどこういうことではないのですか?
108
+
109
+
110
+
111
+ F12→ディベロッパーツール表示→更新ボタン右クリック→キャッシュの消去とハードの再読み込み
112
+
113
+
114
+
115
+ は行ってるんですもんね?
116
+
117
+
118
+
119
+ 想定としている動作はこの画像で合っているのでしょうか?
120
+
121
+
122
+
123
+ CSSやHTMLはこれで全部ですか?