Q&A
Markdown がテーブルに対応してますので、記述し直してほしいな、と思いました。質問の解読に苦戦中です。
https://teratail.com/help#about-markdown
実現したいこと
テーブルレイアウトを用いて設問を作り、表頭・表側から重なり合ったセルを選ぶレイアウトとして
以下の構成をCSSのみでの実現ができないか考えています。
| A0 | A1 | A2 | A3 | |
|---|---|---|---|---|
| B0 | 表頭１ | 表頭２ | 表頭３ | |
| B1 | 表側１ | ● | ○ | ○ |
| B2 | 表側２ | ○ | ○ | ○ |
| B3 | 表側３ | ○ | ○ | ○ |
| B4 | 表側４ | ○ | ○ | ○ |
- 表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり、且つ、そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。
- テーブル全体に背景色がついても１．の効果は優先される。
- 表頭に背景色を指定しても１．の効果は優先される。
- 表側に背景色を指定しても１．の効果は優先される。
発生している問題・分からないこと
- ３と４の結果が得られない
表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。
該当のソースコード
HTML
1<table id="hage" class="matrix"> 2 <tbody> 3 <tr> 4 <td></td> 5 <td class="fm-x"> 6 <span>Ａああああああああああああああ</span> 7 </td> 8 <td class="fm-x"> 9 <span>Ｂあいいいいいいいいいいいい</span> 10 </td> 11 <td class="fm-x"> 12 <span>Ｃううううううううううううう</span> 13 </td> 14 <td class="fm-x"> 15 <span>いいいいいいいいいいい</span> 16 </td> 17 <td class="fm-x"> 18 <span>っっっっっっっっっっｇ</span> 19 </td> 20 </tr> 21 <tr> 22 <td class="fm-y"> 23 <span>1あああああああああああ</span> 24 </td> 25 <td class="fm-cell"> 26 <label> 27 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 28 <span></span> 29 </label> 30 </td> 31 <td class="fm-cell"> 32 <label> 33 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 34 <span></span> 35 </label> 36 </td> 37 <td class="fm-cell"> 38 <label> 39 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 40 <span></span> 41 </label> 42 </td> 43 <td class="fm-cell"> 44 <label> 45 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 46 <span></span> 47 </label> 48 </td> 49 <td class="fm-cell"> 50 <label> 51 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 52 <span></span> 53 </label> 54 </td> 55 </tr> 56 <tr> 57 <td class="fm-y"> 58 <span>2いいいいいいいいいいいいいい</span> 59 </td> 60 <td class="fm-cell"> 61 <label> 62 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 63 <span></span> 64 </label> 65 </td> 66 <td class="fm-cell"> 67 <label> 68 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 69 <span></span> 70 </label> 71 </td> 72 <td class="fm-cell"> 73 <label> 74 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 75 <span></span> 76 </label> 77 </td> 78 <td class="fm-cell"> 79 <label> 80 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 81 <span></span> 82 </label> 83 </td> 84 <td class="fm-cell"> 85 <label> 86 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 87 <span></span> 88 </label> 89 </td> 90 </tr> 91 <tr> 92 <td class="fm-y"> 93 <span>3うううううううううううううううううう</span> 94 </td> 95 <td class="fm-cell"> 96 <label> 97 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 98 <span></span> 99 </label> 100 </td> 101 <td class="fm-cell"> 102 <label> 103 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 104 <span></span> 105 </label> 106 </td> 107 <td class="fm-cell"> 108 <label> 109 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 110 <span></span> 111 </label> 112 </td> 113 <td class="fm-cell"> 114 <label> 115 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 116 <span></span> 117 </label> 118 </td> 119 <td class="fm-cell"> 120 <label> 121 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 122 <span></span> 123 </label> 124 </td> 125 </tr> 126 <tr> 127 <td class="fm-y"> 128 <span>4ええええええええええええええええええええ</span> 129 </td> 130 <td class="fm-cell"> 131 <label> 132 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 133 <span></span> 134 </label> 135 </td> 136 <td class="fm-cell"> 137 <label> 138 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 139 <span></span> 140 </label> 141 </td> 142 <td class="fm-cell"> 143 <label> 144 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 145 <span></span> 146 </label> 147 </td> 148 <td class="fm-cell"> 149 <label> 150 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 151 <span></span> 152 </label> 153 </td> 154 <td class="fm-cell"> 155 <label> 156 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 157 <span></span> 158 </label> 159 </td> 160 </tr> 161 </tbody> 162</table>
CSS
1.fm-matrix{ 2 border-collapse: collapse !important; 3} 4 5.fm-matrix td.fm-x span{ 6 -webkit-white-space: nowrap; 7 white-space: nowrap; 8 -ms-writing-mode: tb-lr; 9 writing-mode: vertical-lr; 10 word-wrap: break-word; 11 overflow-wrap: break-word; 12} 13 14.fm-matrix td.fm-x{ 15 vertical-align: top; 16 border-top: none !important; 17 border-bottom: none !important; 18 border-right: none !important; 19 z-index: 100; 20 position: relative; 21} 22 23.fm-matrix td.fm-y{ 24 padding:8px 15px 10px 0; 25 word-wrap: break-word; 26 border-bottom: none !important; 27 border-left: none !important; 28 border-right: none !important; 29 margin-top: -1px; 30} 31 32.fm-matrix tr:not(:first-child):hover { 33 background-color: #f3f8ff; 34 z-index: 0; 35 position: relative; 36} 37 38.fm-matrix td.fm-cell{ 39 border-bottom: none !important; 40 border-right: none !important; 41 position: relative; 42} 43 44 45.fm-matrix td.fm-cell:hover{ 46 background-color: #c2daff; 47} 48 49.fm-matrix td.fm-cell:hover::after { 50 background-color: #f3f8ff; 51} 52 53.fm-matrix td.fm-cell:hover::after{ 54 content: ""; 55 position: absolute; 56 top: -100vh; 57 left: 0; 58 width: 100%; 59 height: 200vh; 60 z-index: -1; 61}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。
補足
【一旦の想定形】
下図のようにユーザーがどの設問のラジオボタンを選択するか
視覚的にわかりやすいようにすることを想定しています。
- どのラジオボタンを選択しようとしているかhoverで背景色が付く（青）
CSS
1.fm-matrix td.fm-cell:hover{ 2 background-color: #c2daff; 3}
2.そのラジオボタンがどの表頭と表側にあたるものなのかを示すために背景色が付く
CSS
1.fm-matrix td.fm-x{ 2 vertical-align: top; 3 border-top: none !important; 4 border-bottom: none !important; 5 border-right: none !important; 6 z-index: 100;/*表頭の文字を視認するための指定。z-indexで最上位にしておかないと文字が見えなくなる*/ 7 position: relative; 8} 9 10.fm-matrix tr:not(:first-child):hover { 11 background-color: #f3f8ff; 12 z-index: 0; 13 position: relative; 14} 15 16.fm-matrix td.fm-cell{ 17 border-bottom: none !important; 18 border-right: none !important; 19 position: relative;/*::afterのabsoluteを指定するため*/ 20} 21 22.fm-matrix td.fm-cell:hover::after { 23 background-color: #f3f8ff; 24} 25 26.fm-matrix td.fm-cell:hover::after{ 27 content: ""; 28 position: absolute; 29 top: -100vh;/*fm-cellからの位置調整*/ 30 left: 0; 31 width: 100%; 32 height: 200vh;/*高さ（表頭からの長さ）*/ 33 z-index: -1;/*この指定をつけることで「背景」として表示される*/ 34}
【現在の問題】
表頭と表側に背景色を指定してしまうと「どの表頭と表側にあたるものなのかを示すための背景色」が表示されなくなってしまう。
補足願います。
『ポイントした』とは、この場合どういう意味ですか？ クリックやホバーとは違う感じですか？
Lhankor_Mhyさま
コメントありがとうございます。
取り急ぎ、補足に対しての回答ですが
「ポイントした」というのはホバーをしたと同義に捉えていただいてください。
わかりにくい書き方で申し訳ありません。
引き続きよろしくお願い致します。
回答1件
0
ベストアンサー
1の解釈の仕方が複数あると思うのですが、『表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり』、且つ、『そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。』と読むのであれば、こうでしょうか。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 table { 10 background-color: ivory; 11 } 12 13 .fm-x, 14 .fm-y { 15 background-color: wheat; 16 } 17 18 19 .fm-y:hover { 20 background-color: darkorange; 21 22 tr:has(&) .fm-cell { 23 background-color: gold; 24 } 25 } 26 27 .fm-x:hover { 28 background-color: darkorange; 29 30 tbody:has(&:nth-child(2)) .fm-cell:nth-child(2), 31 tbody:has(&:nth-child(3)) .fm-cell:nth-child(3), 32 tbody:has(&:nth-child(4)) .fm-cell:nth-child(4), 33 tbody:has(&:nth-child(5)) .fm-cell:nth-child(5), 34 tbody:has(&:nth-child(6)) .fm-cell:nth-child(6) { 35 background-color: gold; 36 } 37 } 38 39 .fm-cell:hover { 40 background-color: tomato; 41 } 42 </style> 43</head> 44 45<body> 46 47 <table id="hage" class="matrix"> 48 <tbody> 49 <tr> 50 <td></td> 51 <td class="fm-x"> 52 <span>Ａああああああああああああああ</span> 53 </td> 54 <td class="fm-x"> 55 <span>Ｂあいいいいいいいいいいいい</span> 56 </td> 57 <td class="fm-x"> 58 <span>Ｃううううううううううううう</span> 59 </td> 60 <td class="fm-x"> 61 <span>いいいいいいいいいいい</span> 62 </td> 63 <td class="fm-x"> 64 <span>っっっっっっっっっっｇ</span> 65 </td> 66 </tr> 67 <tr> 68 <td class="fm-y"> 69 <span>1あああああああああああ</span> 70 </td> 71 <td class="fm-cell"> 72 <label> 73 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 74 <span></span> 75 </label> 76 </td> 77 <td class="fm-cell"> 78 <label> 79 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 80 <span></span> 81 </label> 82 </td> 83 <td class="fm-cell"> 84 <label> 85 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 86 <span></span> 87 </label> 88 </td> 89 <td class="fm-cell"> 90 <label> 91 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 92 <span></span> 93 </label> 94 </td> 95 <td class="fm-cell"> 96 <label> 97 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 98 <span></span> 99 </label> 100 </td> 101 </tr> 102 <tr> 103 <td class="fm-y"> 104 <span>2いいいいいいいいいいいいいい</span> 105 </td> 106 <td class="fm-cell"> 107 <label> 108 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 109 <span></span> 110 </label> 111 </td> 112 <td class="fm-cell"> 113 <label> 114 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 115 <span></span> 116 </label> 117 </td> 118 <td class="fm-cell"> 119 <label> 120 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 121 <span></span> 122 </label> 123 </td> 124 <td class="fm-cell"> 125 <label> 126 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 127 <span></span> 128 </label> 129 </td> 130 <td class="fm-cell"> 131 <label> 132 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 133 <span></span> 134 </label> 135 </td> 136 </tr> 137 <tr> 138 <td class="fm-y"> 139 <span>3うううううううううううううううううう</span> 140 </td> 141 <td class="fm-cell"> 142 <label> 143 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 144 <span></span> 145 </label> 146 </td> 147 <td class="fm-cell"> 148 <label> 149 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 150 <span></span> 151 </label> 152 </td> 153 <td class="fm-cell"> 154 <label> 155 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 156 <span></span> 157 </label> 158 </td> 159 <td class="fm-cell"> 160 <label> 161 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 162 <span></span> 163 </label> 164 </td> 165 <td class="fm-cell"> 166 <label> 167 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 168 <span></span> 169 </label> 170 </td> 171 </tr> 172 <tr> 173 <td class="fm-y"> 174 <span>4ええええええええええええええええええええ</span> 175 </td> 176 <td class="fm-cell"> 177 <label> 178 <input name="hoge" id="hoge_1_1" type="radio" value="0"> 179 <span></span> 180 </label> 181 </td> 182 <td class="fm-cell"> 183 <label> 184 <input name="hoge" id="hoge_1_2" type="radio" value="4"> 185 <span></span> 186 </label> 187 </td> 188 <td class="fm-cell"> 189 <label> 190 <input name="hoge" id="hoge_1_3" type="radio" value="8"> 191 <span></span> 192 </label> 193 </td> 194 <td class="fm-cell"> 195 <label> 196 <input name="hoge" id="hoge_1_4" type="radio" value="12"> 197 <span></span> 198 </label> 199 </td> 200 <td class="fm-cell"> 201 <label> 202 <input name="hoge" id="hoge_1_5" type="radio" value="16"> 203 <span></span> 204 </label> 205 </td> 206 </tr> 207 </tbody> 208 </table> 209</body> 210 211</html>
質問の変更を受けて追記
css
1 @layer base { 2 table { 3 background-color: ivory; 4 } 5 6 .fm-x, 7 .fm-y { 8 background-color: wheat; 9 } 10 } 11 12 .fm-cell { 13 transition: background-color 0.3s; 14 } 15 16 .fm-cell:hover { 17 background-color: tomato; 18 } 19 20 :where(tbody:has(.fm-cell:hover:nth-child(2))) td:nth-child(2), 21 :where(tbody:has(.fm-cell:hover:nth-child(3))) td:nth-child(3), 22 :where(tbody:has(.fm-cell:hover:nth-child(4))) td:nth-child(4), 23 :where(tbody:has(.fm-cell:hover:nth-child(5))) td:nth-child(5), 24 :where(tbody:has(.fm-cell:hover:nth-child(6))) td:nth-child(6) { 25 background-color: gold; 26 } 27 28 :where(tr:has(.fm-cell:hover)) td { 29 background-color: gold; 30 }
投稿2024/09/25 12:17
編集2024/09/26 13:50総合スコア36898
Lhankor_Mhyさま
回答をいただき、誠にありがとうございます。
ご教授いただいたテーブルでも素晴らしいものではあるのですが、
想定イメージをうまく伝えきれておらずに大変失礼いたしました。
補足にてよりイメージが伝わりやすいよう、イメージ画像を加えさせていただきました。
ご確認を頂けましたら幸いです。
表頭（A1）や表側（B１）をポイントした時には何もしなくていい、ということでいいですか？
「表頭（A1）や表側（B１）をポイントした時」は正直、考えてはいなかったんですが【想定形】のように背景が付いたらすごくベストだと思いました。
では、とりあえず削除して追記しますね。
遅い時間にもかかわらず、本当にありがとうございます。
どうぞよろしくお願いいたします
ああ、違いますかね？ 表頭と表側の背景色も変えるのかな？
修正しました。これで大丈夫ですか？
わかりにくい説明の中、修正にご尽力いただきまして本当にありがとうございます。
修正後のテーブルを確認させていただきました！
想定した板通りの実装です！
本当にありがとうございます。
ソースをぜひ参考にさせていただきます！
本当に本当にありがとうございました！！
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
Lhankor_Mhyさま
解決の回答後に差し出がましいのですが
<style></style>の中の記述をCSSのかたちにしていただくことは可能でしょうか？
できましたらよろしくお願いいたします
styleタグを削除しました。
ご要望を読み取れていないかもしれません。その際はコメントでお知らせください。
お世話になっております。
当方の実装環境ではsassが使えないため
scss記法にしているところをCSSの記述にして頂けると幸いです。
非常にお手間をお願いしてしまい申し訳ありませんが
どうかよろしくお願い致します
あ、そういうことでしたら、これは scss ではなくて CSS で書いていますので問題なく使えるはずです。
ただ、ブラウザのアップデートを年単位でしていないとかだと、動作しない場合もあるかもしれません。
比較的最近実装されたものだと、このあたりでしょうか。
https://caniuse.com/css-cascade-layers
https://caniuse.com/css-has
https://caniuse.com/css-nesting
CSSネストが、一番最近だと思いますので、iOSなどで17にアップデートしてないユーザーだと動作しないと思います。そちらを外した形にしますか？
ご回答ありがとうございます
また回答が遅くなり申し訳ありません
この度実装をしようとしている本番使用のものは
WEBアプリに実装するものでして、利用者に対して汎用性を必要とするものになるんです。
ネストなどに対応していないブラウザの利用は
通常では考えにくいのですが
ユーザーファーストの観点から、ご面倒をお願いしてしまい申し訳ありませんが、出来れば平易なCSS記述で行われていると助かります。
Lhankor_Mhyさまにおかれましては
解決後にもかかわらず何度ものお願いで申し訳ありませんが
どうかよろしくお願い致します。
ご要望を理解しましたが、:has() を外すことはどうしてもできないので、ご了解ください。
前述の通り、CSSネストだけ使わないように書き直しますね。
:hasの件は承知いたしました。
どうぞよろしくお願い致します。
Lhankor_Mhyさま
CSSの書き換えにご対応いただき、本当に本当にありがとうございました。
その後、当方の実装環境でも沿うてイメージ通りの挙動の確認が行えました。
それで、1点お伺いをしたいのですが
表頭（タテ軸）に対して背景をつけるのにnth-childを増やしていますが
設問が増えるたびにCSSの記述も増やしていかないとダメなものでしょうか？
もっともJavaScriptなどを用いれば話が早いことではあるのですが
CSSで出来る限り実装と表現を行って欲しいとの制約もありまして…
参考までにお伺いできればと思っております。
五月雨のコメントで申し訳ありませんが、お手すきの際にでも返信をいただけましたら幸いです。
よろしくお願いいたします。
ご理解の通りです。
ただ、多い分には問題が起きないはずなので、たとえば一度99ぐらいまでコピペで作っておけば列数が100以上になるまでは問題なく機能するはずです。
scss でオンラインコンパイルすればすぐ書けますし。
https://sass-lang.com/playground/#eJxlzLEOwiAUBdCdr7iJHWDAhLG4+CstUB6R9iVPrDGEf9fd9QzHufvGgqlgE97h0Ej4lQnzjK4A/6YkSbeV48fT8tTXbbch1eqJzyT+aGQDlRr1pU9lGGOAFv8YHesSHvl3H9EGriwemWu8YaihvnwiLBM=
WEBアプリとのことですので、そこまで増えることはなさそうかなと思っていたのですが、いかがでしょうか。
Lhankor_Mhyさま
改めてご回答をいただきありがとうございます。
あらかじめ多くを記述しておいてそれで対応・・・という認識があっていたので問題ございません。
オンラインで生成いただいたソースを参考に忍ばせておくことにしました。
本当にここまでご対応をいただきまして本当にありがとうございました！
沼も解決をして実装に向けて動き出すことができました。
本当に本当にありがとうございました！
フォローさせていただければと思っているのですが、よろしいでしょうか？
お役に立てたようで何よりです。
フォロー、光栄です。今後ともよろしくお願いいたします。
ありがとうございます！
多々ご迷惑をお掛けしてしまうかもしれませんが
こちらこそよろしくお願いいたします。
あなたの回答
tips
プレビュー
