teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問HTMLCSSの＜hr＞について

編集履歴

質問編集履歴

3

css追加

2017/03/14 13:01

投稿

revoiot
revoiot

スコア188

test CHANGED
File without changes
test CHANGED
@@ -136,6 +136,38 @@
136
136
 
137
137
  }
138
138
 
139
+ .maincontents{
140
+
141
+ float:right;
142
+
143
+ width:770px;
144
+
145
+ background-color:#FFB6C1;
146
+
147
+ margin:auto;
148
+
149
+ }
150
+
151
+ .boxsidebar{
152
+
153
+ float:left;
154
+
155
+ background-color:#228b22;
156
+
157
+ width:230px;
158
+
159
+
160
+
161
+ }
162
+
163
+ .boxall{
164
+
165
+ width:1000px;
166
+
167
+ margin:auto;
168
+
169
+ }
170
+
139
171
 
140
172
 
141
173
  ```

2

画像の追加

2017/03/14 13:01

投稿

revoiot
revoiot

スコア188

test CHANGED
File without changes
test CHANGED
@@ -139,3 +139,7 @@
139
139
 
140
140
 
141
141
  ```
142
+
143
+
144
+
145
+ ![イメージ説明](eae5f95f425c6abbc32e8be9263b247c.png)

1

HTMLとCSS訂正版

2017/03/14 12:56

投稿

revoiot
revoiot

スコア188

test CHANGED
File without changes
test CHANGED
@@ -26,49 +26,13 @@
26
26
 
27
27
 
28
28
 
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
29
  **HTML**
66
30
 
67
31
  ```ここに言語を入力
68
32
 
69
33
  <div class= "boxall">
70
34
 
71
- <div align="center" class="boxsidebar">
35
+ <div class="boxsidebar">
72
36
 
73
37
  <img src="box img/box sidebar/search-in.gif" alt="">
74
38
 
@@ -76,61 +40,39 @@
76
40
 
77
41
  <div class="categorylist">
78
42
 
79
- <li>ネックレス</li>
43
+ <ul>
80
44
 
81
- <hr width="100px" align="left"><li>リング</li>
45
+ <li>ネックレス</li>
82
46
 
83
- <hr width="100px" align="left"><li>ピンキーリング</li>
47
+ <li>リング</li>
84
48
 
85
- <hr width="100px" align="left"><li>ピアス</li>
49
+ <li>ピンキーリング</li>
86
50
 
87
- <hr width="100px" align="left"><li>ブレスレット</li>
51
+ <li>ピアス</li>
88
52
 
89
- <hr width="100px" align="left"><li>チャーム</li>
53
+ <li>ブレスレット</li>
90
54
 
91
- <hr width="100px" align="left"><li>チェーン</li>
55
+ <li>チャーム</li>
92
56
 
93
- <hr width="100px" align="left"><li>メンズ</li>
57
+ <li>チェーン</li>
94
58
 
95
- <hr width="100px" align="left"><li>キャンドル</li>
59
+ <li>メンズ</li>
96
60
 
97
- <hr width="100px" align="left"><li>ボックスフラワー<br>ブリザーブドフラワー</li>
61
+ <li>キャンドル</li>
98
62
 
99
- <hr width="100px" align="left"><li>ワンピース</li>
63
+ <li>ボックスフラワー<br>ブリザーブドフラワー</li>
100
64
 
101
- <hr width="100px" align="left"><li>クローズ</li>
65
+ <li>ワンピース</li>
102
66
 
103
- <hr width="100px" align="left"><li>その他</li>
67
+ <li>クローズ</li>
104
68
 
69
+ <li>その他</li>
70
+
105
- <hr width="100px" align="left"><li>全ての商品</li>
71
+ <li>全ての商品</li>
72
+
73
+ </ul>
106
74
 
107
75
  </div>
108
-
109
- <img src="box img/box sidebar/press-news.gif" alt="">
110
-
111
- <img src="box img/box sidebar/search-scene.gif" alt="">
112
-
113
- <img src="box img/box sidebar/search.gif" alt="">
114
-
115
- <img src="box img/box sidebar/free-shipping.gif" alt="">
116
-
117
- <img src="box img/box sidebar/shipping-guide.gif" alt="">
118
-
119
- <img src="box img/box sidebar/blog.gif" alt="">
120
-
121
- <img src="box img/box sidebar/facebook.gif" alt="">
122
-
123
- <img src="box img/box sidebar/twitter.gif" alt="">
124
-
125
- <img src="box img/box sidebar/line.gif" alt="">
126
-
127
- <img src="box img/box sidebar/instagram.gif" alt="">
128
-
129
- <img src="box img/box sidebar/qrcode.gif" alt="">
130
-
131
- </div>
132
-
133
- コード
134
76
 
135
77
  ```
136
78
 
@@ -139,6 +81,8 @@
139
81
  **CSS**
140
82
 
141
83
  ```ここに言語を入力
84
+
85
+ @charset "utf-8";
142
86
 
143
87
 
144
88
 
@@ -162,20 +106,36 @@
162
106
 
163
107
  font-size:12px;
164
108
 
165
- padding-left:30px;
109
+ width:200px;
166
110
 
167
- width:200px;
111
+ display:table;
112
+
113
+ padding-left:0;
168
114
 
169
115
  }
170
116
 
171
117
 
172
118
 
173
- .hr{
119
+ ul li{
174
120
 
175
- border:10px dashed "black";
121
+ border-bottom:1px dashed black;
122
+
123
+ width:100px;
124
+
125
+ align:left;
126
+
127
+ list-style:none;
128
+
129
+ display:table;
176
130
 
177
131
  }
178
132
 
179
- コード
133
+ ul {
134
+
135
+ align:left;
136
+
137
+ }
138
+
139
+
180
140
 
181
141
  ```