HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (902ﾚｽ)
HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 http://mevius.5ch.net/test/read.cgi/hp/1692784333/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
136: Name_Not_Found [sage] 2023/09/14(木) 16:40:54.34 ID:??? grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで ・tableの最上段にダミーでtr1行追加 ・更にbと同一幅のセルを左から4番目に追加 ・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので） ってのはどうでしょう？ https://jsfiddle.net/dumov8ng/ http://mevius.5ch.net/test/read.cgi/hp/1692784333/136
137: Name_Not_Found [sage] 2023/09/15(金) 01:14:20.28 ID:??? Bootstrap で出来ないの？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/137
138: Name_Not_Found [] 2023/09/15(金) 04:02:19.83 ID:9yhdlK5+ 列数を増やしてしまえ http://mevius.5ch.net/test/read.cgi/hp/1692784333/138
139: Name_Not_Found [sage] 2023/09/15(金) 04:07:26.56 ID:??? あとは行にtable追加するとか 昔はよくやってたけど今はもっと便利な方法があるのかな http://mevius.5ch.net/test/read.cgi/hp/1692784333/139
140: Name_Not_Found [sage] 2023/09/15(金) 04:58:56.21 ID:??? みんな>>132の説明でどんなテーブルかわかるん？ 俺全然わかんねえや… http://mevius.5ch.net/test/read.cgi/hp/1692784333/140
141: Name_Not_Found [sage] 2023/09/15(金) 08:31:34.98 ID:??? 一番下のお絵かきの画像 http://mevius.5ch.net/test/read.cgi/hp/1692784333/141
142: 132 [sage] 2023/09/15(金) 16:21:00.96 ID:??? >>136さんと138さんの方法で出来ました！ 大変助かりました、ありがとうのざいます。 gridはよくわからなかったので勉強してみます。 >>137 まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/142
143: Name_Not_Found [sage] 2023/09/15(金) 16:24:10.05 ID:??? なぜgridはflexに負けたのですか？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/143
144: Name_Not_Found [sage] 2023/09/15(金) 17:02:01.69 ID:??? >>141 あー、分かる人にはなんか表示されてるのか 納得 http://mevius.5ch.net/test/read.cgi/hp/1692784333/144
145: Name_Not_Found [sage] 2023/09/15(金) 17:06:03.89 ID:??? >>143 別に勝ち負けないじゃん？ flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ http://mevius.5ch.net/test/read.cgi/hp/1692784333/145
146: Name_Not_Found [sage] 2023/09/15(金) 17:33:04.16 ID:??? というか今でもflex使うけど 単に横一列縦一列に並べるなら絶対flexのが早いし http://mevius.5ch.net/test/read.cgi/hp/1692784333/146
147: Name_Not_Found [sage] 2023/09/15(金) 18:45:00.12 ID:??? >>142 >>135のcodepen見て>>136作ったけど、>>132の画像ちゃんと見てなかったから一応修正 https://jsfiddle.net/xjo2qLcy/ 結局のところtable-layout: fixedの場合は table-layout - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/table-layout#%E5%80%A4 > 表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。 ってことなので、先頭行がcolspanで結合してる場合には後続のセル幅のコントロールが少し面倒 colタグ使ってもセルが結合してると難しいね あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる https://jsfiddle.net/q48phobx/ http://mevius.5ch.net/test/read.cgi/hp/1692784333/147
148: Name_Not_Found [sage] 2023/09/15(金) 21:31:12.70 ID:??? <div id="hoge"> <ul> <li>文１</li> <li>文２</li> <li>文３</li> </ul> </div> #hoge > ul li { ・・・ } でW3C CSS検証かけると #hoge > ul li 文法解析エラーが発生しました [empty string] とエラーになってしまいます。 何がいけないのでしょうか？ CSS（表示）としては正常に働いています。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/148
149: Name_Not_Found [sage] 2023/09/15(金) 22:26:35.76 ID:??? 今となってはflexとgridなしは考えられないな 昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね http://mevius.5ch.net/test/read.cgi/hp/1692784333/149
150: Name_Not_Found [sage] 2023/09/15(金) 23:09:19.85 ID:??? >>148 #hoge > ul li { background : #f00; } はエラー無しで通るから、どこかでミスタイプしてたりしない？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/150
151: Name_Not_Found [sage] 2023/09/16(土) 01:37:35.45 ID:??? gridがflexよりも優秀な時ってどういう時があるの？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/151
152: Name_Not_Found [sage] 2023/09/16(土) 02:13:25.20 ID:??? 少し上読めば？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/152
153: Name_Not_Found [sage] 2023/09/16(土) 02:28:55.38 ID:??? >>152 たぶん同じ質問繰り返して荒らしてるだけだと思う http://mevius.5ch.net/test/read.cgi/hp/1692784333/153
154: Name_Not_Found [sage] 2023/09/16(土) 21:04:55.77 ID:??? >>150 ダメですか？ #hoge > ul li { color: #03f; text-decoration: none; margin-bottom: 5px; border-radius: 5px; padding: 2px 10px; background: #ddd; outline: none; display: inline-block; } #hoge > ul li:hover { color: #06c; background: #fff; border-radius: 5px; } ちなみにHTMLはエラーなしです。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/154
155: Name_Not_Found [sage] 2023/09/16(土) 21:29:04.44 ID:??? >>154 コピペしたけど↓は通ったよ https://jigsaw.w3.org/css-validator/validator http://mevius.5ch.net/test/read.cgi/hp/1692784333/155
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 747 ﾚｽあります
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
AAｻﾑﾈｲﾙ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.007s