質問編集履歴
2
イメージ画像を挿入しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -263,4 +263,55 @@
|
|
|
263
263
|
表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。
|
|
264
264
|
|
|
265
265
|
### 補足
|
|
266
|
+
【一旦の想定形】
|
|
267
|
+
下図のようにユーザーがどの設問のラジオボタンを選択するか
|
|
268
|
+
視覚的にわかりやすいようにすることを想定しています。
|
|
269
|
+
1. どのラジオボタンを選択しようとしているかhoverで背景色が付く（青）
|
|
270
|
+
```CSS
|
|
271
|
+
.fm-matrix td.fm-cell:hover{
|
|
272
|
+
background-color: #c2daff;
|
|
273
|
+
}
|
|
266
|
-
|
|
274
|
+
```
|
|
275
|
+
2.そのラジオボタンがどの表頭と表側にあたるものなのかを示すために背景色が付く
|
|
276
|
+
```CSS
|
|
277
|
+
.fm-matrix td.fm-x{
|
|
278
|
+
vertical-align: top;
|
|
279
|
+
border-top: none !important;
|
|
280
|
+
border-bottom: none !important;
|
|
281
|
+
border-right: none !important;
|
|
282
|
+
z-index: 100;/*表頭の文字を視認するための指定。z-indexで最上位にしておかないと文字が見えなくなる*/
|
|
283
|
+
position: relative;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.fm-matrix tr:not(:first-child):hover {
|
|
287
|
+
background-color: #f3f8ff;
|
|
288
|
+
z-index: 0;
|
|
289
|
+
position: relative;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.fm-matrix td.fm-cell{
|
|
293
|
+
border-bottom: none !important;
|
|
294
|
+
border-right: none !important;
|
|
295
|
+
position: relative;/*::afterのabsoluteを指定するため*/
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.fm-matrix td.fm-cell:hover::after {
|
|
299
|
+
background-color: #f3f8ff;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.fm-matrix td.fm-cell:hover::after{
|
|
303
|
+
content: "";
|
|
304
|
+
position: absolute;
|
|
305
|
+
top: -100vh;/*fm-cellからの位置調整*/
|
|
306
|
+
left: 0;
|
|
307
|
+
width: 100%;
|
|
308
|
+
height: 200vh;/*高さ（表頭からの長さ）*/
|
|
309
|
+
z-index: -1;/*この指定をつけることで「背景」として表示される*/
|
|
310
|
+
}
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
315
|
+
【現在の問題】
|
|
316
|
+
表頭と表側に背景色を指定してしまうと「どの表頭と表側にあたるものなのかを示すための背景色」が表示されなくなってしまう。
|
|
317
|
+
|
1
テーブルイメージをマークダウンで書き直しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
テーブルレイアウトを用いて設問を作り、表頭・表側から重なり合ったセルを選ぶレイアウトとして
|
|
3
3
|
以下の構成をCSSのみでの実現ができないか考えています。
|
|
4
4
|
---
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
| | A0 | A1 | A2 | A3 |
|
|
6
|
+
| :-: | :--------: | :----: | :----: | :----: |
|
|
7
|
-
B0
|
|
7
|
+
| B0 | | 表頭１ | 表頭２ | 表頭３ |
|
|
8
|
-
B1
|
|
8
|
+
| B1 | 表側１ | ● | ○ | ○ |
|
|
9
|
-
B2
|
|
9
|
+
| B2 | 表側２ | ○ | ○ | ○ |
|
|
10
|
-
B3
|
|
10
|
+
| B3 | 表側３ | ○ | ○ | ○ |
|
|
11
|
-
B4
|
|
11
|
+
| B4 | 表側４ | ○ | ○ | ○ |
|
|
12
12
|
|
|
13
13
|
0. 表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり、且つ、そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。
|
|
14
14
|
2. テーブル全体に背景色がついても１．の効果は優先される。
|