HTML/CSS のどんな質問にも優しく答えるｽﾚ 52

1 ：Name_Not_Found：2023/08/23(水) 18:52:13.52 ID:???.net

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/

133 ：Name_Not_Found：2023/09/14(木) 13:48:54.86 ID:???.net

dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな

134 ：Name_Not_Found：2023/09/14(木) 14:04:55.94 ID:???.net

>>132
<col>を用意してそれにwidthを指定したらよいのでは

135 ：132：2023/09/14(木) 15:05:02.01 ID:???.net

colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…

https://codepen.io/Nickey-the-looper/pen/MWZoPJv

136 ：Name_Not_Found：2023/09/14(木) 16:40:54.34 ID:???.net

grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
https://jsfiddle.net/dumov8ng/

137 ：Name_Not_Found：2023/09/15(金) 01:14:20.28 ID:???.net

Bootstrap で出来ないの？

138 ：Name_Not_Found：2023/09/15(金) 04:02:19.83 ID:9yhdlK5+.net

列数を増やしてしまえ

139 ：Name_Not_Found：2023/09/15(金) 04:07:26.56 ID:???.net

あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな

140 ：Name_Not_Found：2023/09/15(金) 04:58:56.21 ID:???.net

みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや…

141 ：Name_Not_Found：2023/09/15(金) 08:31:34.98 ID:???.net

一番下のお絵かきの画像

142 ：132：2023/09/15(金) 16:21:00.96 ID:???.net

>>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。

>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？

143 ：Name_Not_Found：2023/09/15(金) 16:24:10.05 ID:???.net

なぜgridはflexに負けたのですか？

144 ：Name_Not_Found：2023/09/15(金) 17:02:01.69 ID:???.net

>>141
あー、分かる人にはなんか表示されてるのか
納得

145 ：Name_Not_Found：2023/09/15(金) 17:06:03.89 ID:???.net

>>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ

146 ：Name_Not_Found：2023/09/15(金) 17:33:04.16 ID:???.net

というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし

147 ：Name_Not_Found：2023/09/15(金) 18:45:00.12 ID:???.net

>>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/

148 ：Name_Not_Found：2023/09/15(金) 21:31:12.70 ID:???.net

<div id="hoge">
　<ul>
　　<li>文１</li>
　　<li>文２</li>
　　<li>文３</li>
　</ul>
</div>

#hoge > ul li {
・・・
}

でW3C CSS検証かけると

#hoge > ul li 文法解析エラーが発生しました [empty string]

とエラーになってしまいます。
何がいけないのでしょうか？
CSS（表示）としては正常に働いています。

149 ：Name_Not_Found：2023/09/15(金) 22:26:35.76 ID:???.net

今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね

150 ：Name_Not_Found：2023/09/15(金) 23:09:19.85 ID:???.net

>>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？

151 ：Name_Not_Found：2023/09/16(土) 01:37:35.45 ID:???.net

gridがflexよりも優秀な時ってどういう時があるの？

152 ：Name_Not_Found：2023/09/16(土) 02:13:25.20 ID:???.net

少し上読めば？

153 ：Name_Not_Found：2023/09/16(土) 02:28:55.38 ID:???.net

>>152
たぶん同じ質問繰り返して荒らしてるだけだと思う

154 ：Name_Not_Found：2023/09/16(土) 21:04:55.77 ID:???.net

>>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はエラーなしです。

155 ：Name_Not_Found：2023/09/16(土) 21:29:04.44 ID:???.net

>>154
コピペしたけど↓は通ったよ
https://jigsaw.w3.org/css-validator/validator

156 ：Name_Not_Found：2023/09/16(土) 22:10:26.63 ID:???.net

>>154
もしかしてcss-validator.org使った？
正解はこっち https://jigsaw.w3.org/css-validator/

157 ：Name_Not_Found：2023/09/16(土) 22:57:43.87 ID:???.net

https://css-validator.org/validator.ja.html
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。

>>156
そこと何が違うのでしょうか？

158 ：Name_Not_Found：2023/09/16(土) 23:58:24.80 ID:???.net

古くて機能してない
そこじゃなくていいなら使うな

159 ：Name_Not_Found：2023/09/17(日) 00:02:03.02 ID:???.net

>>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975

border-radiusをなくしたらエラーでなかったよ

160 ：159：2023/09/17(日) 00:04:07.33 ID:???.net

原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め

161 ：Name_Not_Found：2023/09/17(日) 00:10:22.20 ID:???.net

バリデーターやツールはW3Cの本家サイトから辿った方が無難だね

Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/

162 ：Name_Not_Found：2023/09/17(日) 14:11:21.66 ID:???.net

コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。

スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
https://jsfiddle.net/tb62nuxh/

実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。

163 ：Name_Not_Found：2023/09/17(日) 14:26:05.21 ID:???.net

.header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}

164 ：Name_Not_Found：2023/09/17(日) 14:38:50.16 ID:???.net

最新のSafariでもまだベンダプリフィクス要るのよね…

165 ：Name_Not_Found：2023/09/17(日) 15:23:24.95 ID:???.net

chromeだと動くからsafariで検証してたってことか

166 ：Name_Not_Found：2023/09/17(日) 18:46:28.15 ID:???.net

あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
https://jsfiddle.net/tb62nuxh/2/

>>163の内容だと -webkit～のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか？

167 ：Name_Not_Found：2023/09/17(日) 19:22:33.11 ID:???.net

>>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定

168 ：Name_Not_Found：2023/09/17(日) 19:37:42.81 ID:???.net

opacityだめなんだね
rgbaで指定するのがよいのかな

169 ：Name_Not_Found：2023/09/17(日) 19:58:27.43 ID:???.net

>>167
あぁ、ありがとうございます！
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。

170 ：Name_Not_Found：2023/09/18(月) 01:41:29.02 ID:???.net

ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。

具体的にどの程度の長さになるかはまだ作成していないためわからないです。

171 ：Name_Not_Found：2023/09/18(月) 02:12:45.85 ID:???.net

>>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど

>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし…

172 ：148：2023/09/18(月) 10:31:00.56 ID:???.net

>>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。

>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。

173 ：Name_Not_Found：2023/09/19(火) 21:47:17.97 ID:???.net

>>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。

174 ：Name_Not_Found：2023/09/19(火) 21:52:50.73 ID:???.net

>>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> https://jsfiddle.net/q48phobx/

175 ：Name_Not_Found：2023/09/20(水) 03:42:06.35 ID:???.net

defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる

176 ：Name_Not_Found：2023/09/20(水) 14:48:36.98 ID:???.net

お題に無い話を勝手に足されても困る

177 ：Name_Not_Found：2023/09/20(水) 14:57:13.99 ID:???.net

パっと見だとそもそもa d c部分はテーブルですらない

178 ：Name_Not_Found：2023/09/20(水) 16:12:09.27 ID:???.net

ちょっと何言ってるか分かんない

179 ：Name_Not_Found：2023/09/20(水) 16:18:11.65 ID:???.net

Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
ttps://gigazine.net/news/20230920-webkit-safari-17-0/

180 ：Name_Not_Found：2023/09/20(水) 16:27:25.24 ID:???.net

TwitterでiOS17のSafariでフォントの太さがーって騒いでるね

181 ：Name_Not_Found：2023/09/20(水) 19:25:50.13 ID:???.net

次のようなcssがあります。

#hoge_1:checked ~ #target_1 {
省略
}

このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか？

182 ：Name_Not_Found：2023/09/20(水) 19:34:36.77 ID:???.net

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな

[id^="hoge_"] でid属性がhoge_で始まるもの全てになる

183 ：Name_Not_Found：2023/09/21(木) 13:49:59.57 ID:???.net

コンテナクエリって使い道がイマイチわからん

184 ：Name_Not_Found：2023/09/21(木) 13:54:10.80 ID:???.net

「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち

@container
@layer
:scope

185 ：Name_Not_Found：2023/09/22(金) 14:15:55.45 ID:GQ+SUbJe.net

bootstrap5を使ってカルーセルを実現しようとしているのですが、モバイルデバイスで表示した場合に以下のような動きをしており、原因がわからないでいます。
・フリックで画像を切替えられない
・ただし、一度「prev」「next」のボタンを使った後はフリックも有効になる

該当部分のhtmlは以下のようになっています。
bootstrapのカルーセルに関するページを同じデバイスで閲覧すると、問題なく最初からフリックによる操作が出来ているのでなにかおかしいところがあるのだと思うのですが…
原因がわかる方はおられますでしょうか。よろしくお願い致します。

<div class="carousel carousel-dark slide" id="carousel-container" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="test d-block w-100" src="static/images/test_01.png">
</div>
<div class="carousel-item">
<img class="test d-block w-100" src="static/images/test_02.png">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-container" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-container" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>
</button>
</div>

186 ：Name_Not_Found：2023/09/22(金) 16:22:43.24 ID:???.net

そういう場合は
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/
ここにあるサンプルのHTMLコードと比較する
ってことで多分、最上位のコンテナに
data-bs-ride="carousel"
ってのが足りないので、コレ追加すれば上手くいくんじゃない？

ついでに
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/#via-data-attributes

> data-bs-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用されます。 data-bs-ride="carousel" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。

とのことなので、ボタン押さないとフリック出来ないというのは、この属性が無くて初期化されてなかったとか？

187 ：185：2023/09/23(土) 02:27:06.04 ID:f5iOHgtl.net

>186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。

188 ：Name_Not_Found：2023/09/23(土) 06:28:56.05 ID:???.net

>>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの？
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる？

189 ：Name_Not_Found：2023/09/24(日) 19:12:05.18 ID:xZzXY+Iq.net

質問です

<meta name="viewport" content="initial-scale=1, minimum-scale=0, user-scalable=yes">

を指定すると、横幅の広いページの場合（ページの横幅が画面サイズより大きい倍）には縮小表示できますが、
縦長のページの場合（ページの横幅が小さく、縦幅が画面サイズより大きい場合）、縮小表示できないようです。
どうすれば縦長のページで縮小表示できるようになりますか？
（縦長のコンテンツを縮小して一目で確認できるようにしたいです）

Android の Chrome、iPadOS の Safari で確認しました


（ページの横幅が画面サイズより小さい場合、minimum-scale=0 が無視されて scale=1 までしか縮小できないような。
ウェブページは一般的に縦長で縦にスクロールして読むものなので、横幅さえ画面に収まる（ように縮小できた）ならそれ以上は縮小できないように仕様で決まっているか、各ブラウザが制限を設けているのでしょうか？

力技として、
<meta name="viewport" content="width=10000">
とすると縮小できるようになりますが、横幅が無駄にめちゃくちゃ広いページになってしまいます）

https://jsfiddle.net/14xepgrb/2/

190 ：Name_Not_Found：2023/09/24(日) 19:22:28.27 ID:???.net

できません

191 ：Name_Not_Found：2023/09/25(月) 14:53:29.68 ID:???.net

IE11が亡くなった今だからこそ
使ってる／使いたいおすすめCSSを教えて！
transform使わずにscale、translate、rotateが地味に便利

192 ：Name_Not_Found：2023/09/25(月) 16:41:05.06 ID:???.net

文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。

調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。

193 ：Name_Not_Found：2023/09/25(月) 18:12:55.34 ID:???.net

>>192
ツールチップを表示させたいってこと？

HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
ttps://dev.ore-shika.com/post/css-tooltip/

194 ：Name_Not_Found：2023/09/25(月) 19:22:12.53 ID:???.net

>>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。

195 ：Name_Not_Found：2023/09/26(火) 20:04:00.18 ID:???.net

ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
https://jqueryui.com/tooltip/

HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点

196 ：Name_Not_Found：2023/10/01(日) 12:43:45.64 ID:???.net

https://wikiwiki.jp/postmodern/

197 ：Name_Not_Found：2023/10/07(土) 02:43:14.60 ID:umF+3V+1.net

質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか？？

198 ：Name_Not_Found：2023/10/08(日) 01:52:00.06 ID:???.net

自動で収集されてるんだとは思うんですが、海外の怪しい通販サイトのソースに自分のサイトの文章が無意味に引用されてるっぽいんですけど、これって防ぐ手立てないんですか？

199 ：Name_Not_Found：2023/10/08(日) 01:58:42.63 ID:???.net

公開されてる以上防ぐのは不可能
ドメインからサーバーが特定できれば大元に通報するなりできるけど
大体はサーバー会社も外国の訳わからん所だからな

200 ：198：2023/10/08(日) 03:21:43.16 ID:???.net

ですよね。なんかセキュリティ面で致命的なミスなり欠陥なりあるのかなあとも悩みましたが、まあそういうものだと思って諦めます

201 ：Name_Not_Found：2023/10/14(土) 09:28:38.28 ID:???.net

https://i.imgur.com/kJUPURh.jpg
家族等などにも紹介してプラス\4000をゲットできます
tk..tk [あぼーん用]

202 ：Name_Not_Found：2023/10/14(土) 16:39:32.23 ID:K05jjQAy.net

｢あいうえお【ここで改行】かきくけこ｣と書いた場合、｢お｣の直後に半角スペースが１個挿入されて改行されてしまう。
これを防ぐ方法は？

203 ：Name_Not_Found：2023/10/14(土) 16:52:17.07 ID:K05jjQAy.net

訂正
【ここで改行】ってのは、ソースコード上の改行であって、改行命令ではない。
だから、｢あいうえお かきくけこ｣っていう半角スペース込みの出力になってしまう。

204 ：Name_Not_Found：2023/10/14(土) 16:56:20.78 ID:???.net

<br>使ったらダメなの？

205 ：Name_Not_Found：2023/10/14(土) 17:06:12.84 ID:???.net

正規表現で改行コードぶちこめないなら無理

206 ：Name_Not_Found：2023/10/14(土) 17:06:46.58 ID:???.net

「ここで改行」は<br>の意味かと思ったけど
エディタ上での改行ってことか

207 ：Name_Not_Found：2023/10/14(土) 17:11:07.62 ID:???.net

エディタなら閉じタグの変なところで改行するとかコメントアウトするとか色んな小技が編み出されてきたが
そんなことしなきゃいけない時はHTML設計がおかしい

208 ：Name_Not_Found：2023/10/14(土) 17:28:30.34 ID:???.net

>>202
改行しない

209 ：Name_Not_Found：2023/10/14(土) 20:31:38.17 ID:???.net

ソースコード上は改行したいけど、出力は改行したくないってこと？

210 ：Name_Not_Found：2023/10/15(日) 01:25:33.56 ID:???.net

あいうえお<!--
-->かきくけこ

211 ：Name_Not_Found：2023/10/15(日) 02:38:18.97 ID:n/jmxEKA.net

>>209　その通り
>>210　おぉ、その手があったか！　でも、何か汚い感じするｗ

212 ：Name_Not_Found：2023/10/15(日) 04:02:15.10 ID:???.net

昔からこれでやってんだよ
実際クソ汚い
テーブルコーディングとかと同レベルの古代遺物
嫌ならソースでは改行しないかCSSで無茶しろ

213 ：Name_Not_Found：2023/10/15(日) 04:02:32.95 ID:???.net

vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに

214 ：Name_Not_Found：2023/10/15(日) 12:16:52.93 ID:???.net

例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか？
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです)

215 ：Name_Not_Found：2023/10/15(日) 13:33:07.24 ID:???.net

>>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが

216 ：Name_Not_Found：2023/10/15(日) 13:36:03.20 ID:???.net

付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが

217 ：Name_Not_Found：2023/10/15(日) 14:10:45.39 ID:???.net

>>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな

218 ：Name_Not_Found：2023/10/15(日) 15:52:54.90 ID:???.net

ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。

>>217さんの最後の行の意味が良く分からなかったのですが、今の想定の表があくまでイメージですが↓以下のようになっています。
--
<div class="itemList">
__<div class="item sale">商品
__<div class="item soldout">商品
____ : (上記が商品数だけずらずら並ぶ)

で非表示用チェックボックスがONの時、以下のように一括でクラス付与、みたいな感じです。
$('.soldout').addClass('hide')
(.hideの適用スタイルがdisplay:none)
--

「親のクラスを切り替える」というのは、CSSで
.itemList.hide_soldout > .soldout {
diaplay: none;
} を準備し、
$('.itemList').addClass('hide_soldout')

ということなのでしょうか？？

219 ：Name_Not_Found：2023/10/15(日) 22:57:20.44 ID:???.net

>>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ

220 ：Name_Not_Found：2023/10/15(日) 23:19:54.82 ID:???.net

自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ

221 ：Name_Not_Found：2023/10/16(月) 02:07:40.13 ID:???.net

取り扱ってすらいないのかわからない状態にするってこと？

222 ：Name_Not_Found：2023/10/16(月) 03:23:13.80 ID:???.net

見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する

223 ：Name_Not_Found：2023/10/16(月) 03:40:07.94 ID:R+2RS1w5.net

##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()

↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状

:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか？
よろしくお願いいたします

224 ：Name_Not_Found：2023/10/16(月) 07:46:21.62 ID:???.net

>>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね

225 ：Name_Not_Found：2023/10/16(月) 13:01:06.23 ID:???.net

>>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと

226 ：Name_Not_Found：2023/10/16(月) 15:20:19.80 ID:???.net

has擬似クラスはいつになったらFirefoxで使えるようになるんだろ

227 ：Name_Not_Found：2023/10/16(月) 15:28:01.51 ID:???.net

:hasみたいなのあればいいな（jsのcladdList.containsみたいなことやりたいな）としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある

228 ：Name_Not_Found：2023/10/16(月) 18:42:33.88 ID:UcrE7pLb.net

皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか？
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい

229 ：Name_Not_Found：2023/10/16(月) 20:04:57.54 ID:???.net

だからそれcssじゃねーだろ
失せろ

230 ：Name_Not_Found：2023/10/16(月) 21:02:25.00 ID:???.net

いつものスレチｸｿに構うな

231 ：Name_Not_Found：2023/10/16(月) 23:05:55.10 ID:???.net

displayつながりならよくね？
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし

232 ：Name_Not_Found：2023/10/17(火) 00:40:37.80 ID:???.net

NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし

233 ：Name_Not_Found：2023/10/22(日) 14:26:43.83 ID:???.net

borderのdashedって
破線の長さ、間隔をCSSで設定することはできませんよね？
Figmaが線の「高度な設定」内で破線と間隔指定できるので
なにか対策あるのかと思いまして