teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問html、css　tableの画像配置について

編集履歴

質問編集履歴

4

解決いたしました！ありがとうございます。

2016/07/16 09:06

投稿

pa29monster
pa29monster

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ kei344さんに教えて頂いたやり方でうまくいきました。
2
+
3
+ 皆さんもご協力ありがとうございました。
4
+
5
+
6
+
1
7
  htmlを触り始めて一ヶ月ぐらいの初心者です。
2
8
 
3
9
  参考書やネットで調べながら少しずつホームページを作っています。

3

訂正

2016/07/16 09:05

投稿

pa29monster
pa29monster

スコア7

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
 
142
142
 
143
- </body>
143
+ </tbody>
144
144
 
145
145
  </table>
146
146
 

2

tableのスタイルシート追加

2016/07/16 06:40

投稿

pa29monster
pa29monster

スコア7

test CHANGED
File without changes
test CHANGED
@@ -16,19 +16,133 @@
16
16
 
17
17
 
18
18
 
19
- 画像Aの部分のhtml、CSSのスタイルはこのような感じです。
19
+ テーブルのhtml、CSSのスタイルはこのような感じです。
20
-
20
+
21
- 色々ありここだけしか貼れません
21
+ 上記の図とは多少ことなりますが貼っておきます。
22
+
23
+ 実際のテーブルにはAの左手前に名前欄とCの右後にリンクボタンが付いてあるので一応下記のスタイルに書いておきました。
22
24
 
23
25
 
24
26
 
25
27
  ```
26
28
 
29
+ <table>
30
+
31
+ <tbody>
32
+
33
+
34
+
35
+ <tr>
36
+
37
+ <td class="title01" colspan="5">
38
+
39
+ タイトル名
40
+
41
+ </td>
42
+
43
+ </tr>
44
+
45
+
46
+
47
+ <tr>
48
+
49
+ <td width="170">
50
+
51
+ 名前
52
+
53
+ </td>
54
+
55
+ <td width="110">
56
+
57
+ A
58
+
59
+ </td>
60
+
61
+ <td width="190">
62
+
63
+ B
64
+
65
+ </td>
66
+
67
+ <td width="110">
68
+
69
+ C
70
+
71
+ </td>
72
+
73
+ <td width="90">
74
+
75
+ PAGE JUMP
76
+
77
+ </td>
78
+
79
+ </tR>
80
+
81
+
82
+
83
+ <tr>
84
+
27
- <td class="fitting_left">
85
+ <td class="nameA">
86
+
28
-
87
+ NAME
88
+
89
+ <span class="nameA">NAMEの補足</span>
90
+
91
+ </td>
92
+
93
+
94
+
95
+ <td class="A">
96
+
29
- <img src="A.jpg">
97
+ <img src="A.jpg">
30
-
98
+
31
- </td>
99
+ </td>
100
+
101
+
102
+
103
+ <td class="B">
104
+
105
+ <img src="B.jpg">
106
+
107
+ </td>
108
+
109
+
110
+
111
+ <td class="C">
112
+
113
+ <img src="C">
114
+
115
+ </td>
116
+
117
+
118
+
119
+ <td class="pagejunp">
120
+
121
+ <a href="http:・・・">
122
+
123
+ <img src="pagejunp.jpg" style="width:75px;">
124
+
125
+ </a>
126
+
127
+
128
+
129
+ <a href="http:・・・">
130
+
131
+ <img src="pagejunp02.jpg" style="width:75px;">
132
+
133
+ </a>
134
+
135
+
136
+
137
+ </td>
138
+
139
+ </tr>
140
+
141
+
142
+
143
+ </body>
144
+
145
+ </table>
32
146
 
33
147
  ```
34
148
 
@@ -38,15 +152,89 @@
38
152
 
39
153
  ```
40
154
 
155
+ table td{
156
+
157
+ border:2px solid #715500;
158
+
159
+ }
160
+
161
+
162
+
163
+ table td.title01{
164
+
165
+ background:url(tytle01.jpg) repeat;
166
+
167
+ background-size:contain;
168
+
169
+ color:white;
170
+
171
+ height:30px;
172
+
173
+ font-size:18px;
174
+
175
+ font-weight:bold;
176
+
177
+ }
178
+
179
+
180
+
181
+ table td.nameA{
182
+
183
+ width:100px;
184
+
185
+ color:black;
186
+
187
+ font-size:14px;
188
+
189
+ text-align:left;
190
+
191
+ padding-left:10px;
192
+
193
+ font-weight:bold;
194
+
195
+ line-height:1.5;
196
+
197
+ background-color:#FFFECD;
198
+
199
+ }
200
+
201
+
202
+
203
+ td span.nameA{
204
+
205
+ display:block;
206
+
207
+ color:black;
208
+
209
+ font-size:11px;
210
+
211
+ text-align:right;
212
+
213
+ padding-right:20px;
214
+
215
+ margin:5px 0 10px;
216
+
217
+ border-bottom:1px solid red;
218
+
219
+ padding-bottom:5px;
220
+
221
+ width:140px;
222
+
223
+ }
224
+
225
+
226
+
41
227
  table td.A{
42
228
 
43
- position:relative;
229
+ position:relative;
44
230
 
45
231
  height:100;
46
232
 
47
- }
233
+ }
48
-
234
+
235
+
236
+
49
- table td.A img{
237
+ table td.A img{
50
238
 
51
239
  width:110px;
52
240
 
@@ -68,23 +256,105 @@
68
256
 
69
257
  vertical-align:middle;
70
258
 
71
- }
259
+ }
72
-
73
-
74
-
260
+
261
+
262
+
75
- table td.A img:hover{
263
+ table td.A img:hover{
76
264
 
77
265
  width:156px;
78
266
 
79
267
  z-index:9999;
80
268
 
81
- }
269
+ }
270
+
271
+
272
+
273
+ table td.B_size{
274
+
275
+ width:200px;
276
+
277
+ height:100px;
278
+
279
+ background:url(back.png) no-repeat;
280
+
281
+ background-size:35px;
282
+
283
+ }
284
+
285
+
286
+
287
+ table td.B img{
288
+
289
+ width:200px;
290
+
291
+ }
292
+
293
+
294
+
295
+ table td.C{
296
+
297
+ position:relative;
298
+
299
+ height:100px;
300
+
301
+ }
302
+
303
+
304
+
305
+ table td.C img{
306
+
307
+ width:110px;
308
+
309
+ position:absolute;
310
+
311
+ top:0;
312
+
313
+ right:0;
314
+
315
+ left: 0;
316
+
317
+ bottom: 0;
318
+
319
+ margin:auto;
320
+
321
+ transition:0.2s;
322
+
323
+ }
324
+
325
+ table td.C img:hover{
326
+
327
+ width:156px;
328
+
329
+ z-index:9999;
330
+
331
+
332
+
333
+ table td.pagejunp{
334
+
335
+ width:100px;
336
+
337
+ height:100px;
338
+
339
+ }
340
+
341
+
342
+
343
+ table td.pagejunp img{
344
+
345
+ padding:4px;
346
+
347
+ }
348
+
349
+
82
350
 
83
351
  ```
84
352
 
85
353
  何か間違いはあるでしょうか？
86
354
 
355
+ もっと別の簡単スタイルシート等あると思いますが頭がパニックに
356
+
87
- 画像Ｃのところも同じ設定をしています。
357
+ なるのでこのスタイルをベースに訂正等お願いします。
88
358
 
89
359
  ちなみにDOCTYPEというのも最新をちゃんと設定ししました。
90
360
 

1

図とhtmlタグの追加

2016/07/16 06:29

投稿

pa29monster
pa29monster

スコア7

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,8 @@
5
5
 
6
6
 
7
7
  ここで本題です。
8
+
9
+ ![イメージ説明](001332b1f3374fa96f7971d4e7d6c40d.jpeg)
8
10
 
9
11
 
10
12
 
@@ -14,9 +16,27 @@
14
16
 
15
17
 
16
18
 
17
- 画像AのCSSのスタイルはこのような感じです。
19
+ 画像Aの部分のhtml、CSSのスタイルはこのような感じです。
20
+
21
+ 色々ありここだけしか貼れません
18
22
 
19
23
 
24
+
25
+ ```
26
+
27
+ <td class="fitting_left">
28
+
29
+ <img src="A.jpg">
30
+
31
+ </td>
32
+
33
+ ```
34
+
35
+
36
+
37
+
38
+
39
+ ```
20
40
 
21
41
  table td.A{
22
42
 
@@ -60,7 +80,7 @@
60
80
 
61
81
  }
62
82
 
63
-
83
+ ```
64
84
 
65
85
  何か間違いはあるでしょうか？
66
86
 
@@ -68,6 +88,6 @@
68
88
 
69
89
  ちなみにDOCTYPEというのも最新をちゃんと設定ししました。
70
90
 
71
-
91
+ 可能性の話でもいいです。わかる範囲内で回答お願いします。
72
92
 
73
93
  初心者なもので出来るだけ分かりやすく教えて頂けるとうれしいです。