HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (984ﾚｽ)
上下前次1-新
213: 2023/10/15(日)04:02 ID:??? AAS
vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに
214(2): 2023/10/15(日)12:16 ID:??? AAS
例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか？
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです)
215: 2023/10/15(日)13:33 ID:??? AAS
>>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが
216: 2023/10/15(日)13:36 ID:??? AAS
付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが
217(1): 2023/10/15(日)14:10 ID:??? AAS
>>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな
218(1): 2023/10/15(日)15:52 ID:??? AAS
ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。
>>217さんの最後の行の意味が良く分からなかったのですが、今の想定の表があくまでイメージですが↓以下のようになっています。
--
<div class="itemList">
__<div class="item sale">商品
__<div class="item soldout">商品
____ : (上記が商品数だけずらずら並ぶ)
で非表示用チェックボックスがONの時、以下のように一括でクラス付与、みたいな感じです。
$('.soldout').addClass('hide')
(.hideの適用スタイルがdisplay:none)
省7
219: 2023/10/15(日)22:57 ID:??? AAS
>>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ
220(1): 2023/10/15(日)23:19 ID:??? AAS
自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ
221: 2023/10/16(月)02:07 ID:??? AAS
取り扱ってすらいないのかわからない状態にするってこと？
222: 2023/10/16(月)03:23 ID:??? AAS
見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する
223(2): 2023/10/16(月)03:40 ID:R+2RS1w5(1) AAS
##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()
↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状
:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか？
よろしくお願いいたします
224: 2023/10/16(月)07:46 ID:??? AAS
>>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね
225: 2023/10/16(月)13:01 ID:??? AAS
>>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと
226: 2023/10/16(月)15:20 ID:??? AAS
has擬似クラスはいつになったらFirefoxで使えるようになるんだろ
227: 2023/10/16(月)15:28 ID:??? AAS
:hasみたいなのあればいいな（jsのcladdList.containsみたいなことやりたいな）としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある
228(1): 2023/10/16(月)18:42 ID:UcrE7pLb(1) AAS
皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか？
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい
229: 2023/10/16(月)20:04 ID:??? AAS
だからそれcssじゃねーだろ
失せろ
230: 2023/10/16(月)21:02 ID:??? AAS
いつものスレチｸｿに構うな
231: 2023/10/16(月)23:05 ID:??? AAS
displayつながりならよくね？
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし
232: 2023/10/17(火)00:40 ID:??? AAS
NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし
上下前次1-新書関写板覧索設栞歴
あと 752 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 1.307s*