teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問バックグラウンドカラーの幅を短くしたい

編集履歴

質問編集履歴

1

背景色の長さの変更方法

2019/09/08 03:13

投稿

Pin2
Pin2

スコア14

test CHANGED
@@ -1 +1 @@
1
- ボックス内のテキストを左寄せしたい
1
+ バックグラウンドカラーの幅を短くしたい
test CHANGED
@@ -1,16 +1,16 @@
1
+ ![イメージ説明](a845e9f4a8552f739ede0aebfeded796.png)
2
+
3
+
4
+
5
+
6
+
7
+ 上記の画像
8
+
1
- ### ヘディングのテキストボックス内のテキストを左寄せしたいです。
9
+ ・緑色の部分の長さを短く調整したいです。
2
-
3
-
4
-
5
- margin: auto;でボックスを中央にし
10
+
6
-
7
- ボックス内のテキストを左寄せするために
8
-
9
- text-align: left;を書いていますができません。
10
-
11
-
12
-
13
- またh1要素をボックスの中央に配置したいのですが。
11
+ ・英語で書かれている文章を中央寄せしたいです。
12
+
13
+
14
14
 
15
15
 
16
16
 
@@ -30,11 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- *{ text-align: center;
33
+
34
-
35
-
36
-
37
- }
38
34
 
39
35
 
40
36
 
@@ -44,15 +40,17 @@
44
40
 
45
41
 
46
42
 
47
- ____ h1{
43
+ h1{
48
44
 
49
45
  background-color: #336600;
50
46
 
51
47
  color: white;
52
48
 
49
+ padding: 20px 0px 20px 0;
50
+
53
- width: 250px;
51
+ width: 220px;
54
-
52
+
55
- height: 60px;
53
+ height: 20px;
56
54
 
57
55
  margin: auto;
58
56
 
@@ -62,11 +60,33 @@
62
60
 
63
61
  text-align: center;
64
62
 
63
+
64
+
65
+ }
66
+
67
+
68
+
69
+ p{
70
+
71
+ font-size: 13px;
72
+
73
+ padding-right: 300px;
74
+
75
+ padding-left: 400px;
76
+
77
+ text-align: left
78
+
79
+ }
80
+
81
+
82
+
65
- }____
83
+ .wifi{
84
+
66
-
85
+ text-align: center;
86
+
67
-
87
+ }
68
-
88
+
69
- ****.main{
89
+ .main{
70
90
 
71
91
  background-color: #99CC00;
72
92
 
@@ -74,15 +94,19 @@
74
94
 
75
95
  font-size: 13px;
76
96
 
77
- width: 800px;
78
-
79
- height: 60px;
80
-
81
- margin: auto;
97
+ margin-left: auto;
82
-
98
+
83
- text-align: left;
99
+ margin-right: auto;
100
+
84
-
101
+ }
102
+
103
+
104
+
85
- }****
105
+ .header{
106
+
107
+ padding-left: 265px;
108
+
109
+ }
86
110
 
87
111
 
88
112
 
@@ -96,6 +120,8 @@
96
120
 
97
121
  border-left: 5px;
98
122
 
123
+ text-align: center;
124
+
99
125
  }
100
126
 
101
127
  .under{
@@ -104,7 +130,35 @@
104
130
 
105
131
  margin: auto;
106
132
 
107
-
133
+ text-align: center;}
134
+
135
+
136
+
137
+ .footer{
138
+
139
+ font-size: 13px;
140
+
141
+ text-align: center;
142
+
143
+ }
144
+
145
+
146
+
147
+ .info{
148
+
149
+
150
+
151
+ text-align: right;
152
+
153
+ }
154
+
155
+
156
+
157
+ ul{
158
+
159
+
160
+
161
+ text-align: center;
108
162
 
109
163
  }
110
164
 
@@ -130,7 +184,7 @@
130
184
 
131
185
 
132
186
 
133
- <div class="body">
187
+ <div class="wifi">
134
188
 
135
189
  <img src="Wi2_PC_Banner.png">
136
190
 
@@ -148,33 +202,23 @@
148
202
 
149
203
  <div class="main">
150
204
 
151
- <div class="p">
205
+
152
206
 
153
207
  <p>ご利用いただくWi-Fiネットワークの通信は、暗号化されておらず通信を傍受されるおそれがあります。
154
208
 
155
209
  <br>あらかじめご了承の上でご利用くださいますよう、お願いいたします。</p>
156
210
 
211
+
212
+
157
- </div>
213
+ </div>
158
-
159
- </div>
214
+
160
-
161
-
162
-
163
- <div class="under">
215
+
164
216
 
165
217
  <p>スターバックス コーヒー ジャパン 株式会社のご協力のもとワイヤ・アンド・ワイヤレスがサービス提供を行っております。</p>
166
218
 
167
- </div>
219
+
168
-
169
-
170
-
220
+
171
- <hr color="gray" width="750" height="0.3px" >
221
+ <hr color="gray" width="750" height="thin" >
172
-
173
- </div>
174
-
175
-
176
-
177
- <div class="footer">
178
222
 
179
223
 
180
224
 
@@ -190,6 +234,8 @@
190
234
 
191
235
 
192
236
 
237
+ <div class="info">
238
+
193
239
  <p>Copyright © WIRE AND WIRELESS All rights reserved.</p>
194
240
 
195
241
  </div>