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

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/

**Name_Not_Found** · 2023/08/28(月) 15:50:41.12

>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ

てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて

**Name_Not_Found** · 2023/08/28(月) 15:52:19.50

↑検索エンジンのページ以外でな

**Name_Not_Found** · 2023/08/28(月) 15:57:53.01

何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい

**Name_Not_Found** · 2023/08/28(月) 15:57:59.87

>>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある

> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)

**Name_Not_Found** · 2023/08/28(月) 15:58:35.36

>>86
コテつけろ

**Name_Not_Found** · 2023/08/28(月) 16:02:30.63

>>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて

**Name_Not_Found** · 2023/08/28(月) 16:36:17.04

SOHOやフリーで本当に細々と食ってる奴の134人目
https://mevius.5ch.net/test/read.cgi/hp/1687357689/

**Name_Not_Found** · 2023/08/28(月) 20:19:33.70

質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ

**Name_Not_Found** · 2023/08/31(木) 19:38:35.37

divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん

**Name_Not_Found** · 2023/08/31(木) 20:21:01.23

召喚すな

**Name_Not_Found** · 2023/09/01(金) 07:38:32.84

なにそのdivdiv君って何？
xhtml星から生まれたの？

**Name_Not_Found** · 2023/09/02(土) 00:22:15.14

ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし

**Name_Not_Found** · 2023/09/02(土) 01:21:26.04

質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる

**Name_Not_Found** · 2023/09/03(日) 16:28:20.78

質問です

div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。

display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか？
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。

https://i.imgur.com/sXA8Rcs.png
https://jsfiddle.net/0dghepau/13/

**Name_Not_Found** · 2023/09/03(日) 16:39:34.32

>>96
子もflexにすると親の高さを継承する

**Name_Not_Found** · 2023/09/03(日) 16:42:57.69

>>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。

https://jsfiddle.net/7kq2mvbd/10/

**Name_Not_Found** · 2023/09/03(日) 16:45:27.91

>>97
ありがとうございます
できました

https://jsfiddle.net/7kq2mvbd/12/

**Name_Not_Found** · 2023/09/05(火) 18:05:42.35

比較的最近リリースされたCSSで使えるのってなんかある？

Scroll-driven Animations
@scope

この辺も便利なんだろうけどペースが早いわ

**Name_Not_Found** · 2023/09/06(水) 10:07:05.38

最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい

**Name_Not_Found** · 2023/09/06(水) 11:11:36.87

リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな

**Name_Not_Found** · 2023/09/06(水) 11:41:43.45

>>102
さんくす！
scroll-gap　
→ググってもでてこんな

代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな

overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス

**Name_Not_Found** · 2023/09/06(水) 12:00:44.35

scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう

**Name_Not_Found** · 2023/09/06(水) 12:31:57.86

>>103
すまんscroll-paddingだったわｗ

overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ

**Name_Not_Found** · 2023/09/06(水) 12:53:16.71

CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる

**Name_Not_Found** · 2023/09/06(水) 13:33:15.44

cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い

**Name_Not_Found** · 2023/09/06(水) 13:35:09.53

なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか

**Name_Not_Found** · 2023/09/06(水) 13:35:38.72

ああ、たしかにイージングは欲しいね

**Name_Not_Found** · 2023/09/07(木) 01:49:29.45

>>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった

**Name_Not_Found** · 2023/09/07(木) 10:48:14.19

CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする

**Name_Not_Found** · 2023/09/07(木) 11:32:09.08

>>111
speedが遅い😭

**Name_Not_Found** · 2023/09/07(木) 12:41:04.67

>>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな

**Name_Not_Found** · 2023/09/07(木) 13:32:24.71

>>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる

**Name_Not_Found** · 2023/09/09(土) 14:57:01.91

flexでもgridでもgapが使えるの最高すぎる

**Name_Not_Found** · 2023/09/09(土) 16:31:00.55

gap最高だよね！超便利　なぜなかったか不思議なくらい

**Name_Not_Found** · 2023/09/09(土) 18:45:24.00

なにこの良スレ

**Name_Not_Found** · 2023/09/09(土) 19:11:42.35

<ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>

こんなHTMLで下記のように最大の文字数(この場合は全角５文字)を基準として各子要素を同じ幅で割り振りたいのですがどうすればいいですかね
flexでもgridでもかまわないのですが
<li> にwidthをあてて別に差し支えはないのですが、同様な記述が10数カ所あるもんでもう少しスッキリできないかと…

・◎◎◎　　・◎◎　　　・◎◎◎◎◎
・◎◎　　　・◎◎◎◎　・◎◎◎◎

**Name_Not_Found** · 2023/09/09(土) 19:35:25.38

grid-template-column: repeat(3, 1fr);

**Name_Not_Found** · 2023/09/09(土) 20:20:45.75

>>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ

**Name_Not_Found** · 2023/09/09(土) 20:24:25.64

auto-fillかauto-fit好きな方

**Name_Not_Found** · 2023/09/09(土) 20:31:29.72

grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは

**Name_Not_Found** · 2023/09/09(土) 21:50:56.10

auto-fit大好き

**Name_Not_Found** · 2023/09/10(日) 00:28:44.28

flexboxしか使わんけどgrid必要な場面がまったくない

**Name_Not_Found** · 2023/09/10(日) 03:20:37.16

auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる

**Name_Not_Found** · 2023/09/10(日) 05:50:08.75

>>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる

**Name_Not_Found** · 2023/09/12(火) 13:16:44.22

チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。

□全部　□円形　□四角形　□青色　□緑色

とチェックボックスが並んでおり、その下には

丸くて青色・四角くて青色・丸くて緑色・四角くて緑色

・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
（１）円形かつ四角形のオブジェクトを可視化
（２）円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
（上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです）

**Name_Not_Found** · 2023/09/12(火) 14:47:08.43

自分は2

**Name_Not_Found** · 2023/09/12(火) 14:52:45.66

個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば

**Name_Not_Found** · 2023/09/12(火) 17:22:16.78

>>127
俺も 2

**Name_Not_Found** · 2023/09/12(火) 19:02:35.63

自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ

2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる

**Name_Not_Found** · 2023/09/14(木) 13:06:02.38

tableの作り方で質問です。
こんなテーブルを作ろうと思っています。

a: colspan=2
b: colspan=2
c: colspan=4
d: 指定不要
e: colspan=2
f: 指定不要

とすればよいと思うのですが、
テーブル全体の幅やeとfの中身のテキスト量にかかわらず
eとfの幅が均等な状態を維持したいです。
その場合、どのように設定すればよいでしょうか。

必要な情報かわからないですが以下補足です。
aとdのwidthは固定、
bはテーブル全体の幅からaの幅を引いた幅
cは未固定（テーブル全体の幅）
eとfはテーブル全体の幅からdの幅を引いた幅を2分した大きさとなるようにしたいです。

**Name_Not_Found** · 2023/09/14(木) 13:48:54.86

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

**Name_Not_Found** · 2023/09/14(木) 14:04:55.94

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

**132** · 2023/09/14(木) 15:05:02.01

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

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

**Name_Not_Found** · 2023/09/14(木) 16:40:54.34

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

**Name_Not_Found** · 2023/09/15(金) 01:14:20.28

Bootstrap で出来ないの？

**Name_Not_Found** · 2023/09/15(金) 04:02:19.83

列数を増やしてしまえ

**Name_Not_Found** · 2023/09/15(金) 04:07:26.56

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

**Name_Not_Found** · 2023/09/15(金) 04:58:56.21

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

**Name_Not_Found** · 2023/09/15(金) 08:31:34.98

一番下のお絵かきの画像

**132** · 2023/09/15(金) 16:21:00.96

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

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

**Name_Not_Found** · 2023/09/15(金) 16:24:10.05

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

**Name_Not_Found** · 2023/09/15(金) 17:02:01.69

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

**Name_Not_Found** · 2023/09/15(金) 17:06:03.89

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

**Name_Not_Found** · 2023/09/15(金) 17:33:04.16

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

**Name_Not_Found** · 2023/09/15(金) 18:45:00.12

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

**Name_Not_Found** · 2023/09/15(金) 21:31:12.70

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

#hoge > ul li {
・・・
}

でW3C CSS検証かけると

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

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

**Name_Not_Found** · 2023/09/15(金) 22:26:35.76

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

**Name_Not_Found** · 2023/09/15(金) 23:09:19.85

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

**Name_Not_Found** · 2023/09/16(土) 01:37:35.45

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

**Name_Not_Found** · 2023/09/16(土) 02:13:25.20

少し上読めば？

**Name_Not_Found** · 2023/09/16(土) 02:28:55.38

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

**Name_Not_Found** · 2023/09/16(土) 21:04:55.77

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

**Name_Not_Found** · 2023/09/16(土) 21:29:04.44

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

**Name_Not_Found** · 2023/09/16(土) 22:10:26.63

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

**Name_Not_Found** · 2023/09/16(土) 22:57:43.87

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

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

**Name_Not_Found** · 2023/09/16(土) 23:58:24.80

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

**Name_Not_Found** · 2023/09/17(日) 00:02:03.02

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

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

**159** · 2023/09/17(日) 00:04:07.33

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

**Name_Not_Found** · 2023/09/17(日) 00:10:22.20

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

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

**Name_Not_Found** · 2023/09/17(日) 14:11:21.66

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

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

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

**Name_Not_Found** · 2023/09/17(日) 14:26:05.21

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

**Name_Not_Found** · 2023/09/17(日) 14:38:50.16

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

**Name_Not_Found** · 2023/09/17(日) 15:23:24.95

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

**Name_Not_Found** · 2023/09/17(日) 18:46:28.15

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

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

**Name_Not_Found** · 2023/09/17(日) 19:22:33.11

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

**Name_Not_Found** · 2023/09/17(日) 19:37:42.81

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

**Name_Not_Found** · 2023/09/17(日) 19:58:27.43

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

**Name_Not_Found** · 2023/09/18(月) 01:41:29.02

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

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

**Name_Not_Found** · 2023/09/18(月) 02:12:45.85

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

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

**148** · 2023/09/18(月) 10:31:00.56

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

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

**Name_Not_Found** · 2023/09/19(火) 21:47:17.97

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

**Name_Not_Found** · 2023/09/19(火) 21:52:50.73

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

**Name_Not_Found** · 2023/09/20(水) 03:42:06.35

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

**Name_Not_Found** · 2023/09/20(水) 14:48:36.98

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

**Name_Not_Found** · 2023/09/20(水) 14:57:13.99

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

**Name_Not_Found** · 2023/09/20(水) 16:12:09.27

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

**Name_Not_Found** · 2023/09/20(水) 16:18:11.65

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

**Name_Not_Found** · 2023/09/20(水) 16:27:25.24

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

**Name_Not_Found** · 2023/09/20(水) 19:25:50.13

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

#hoge_1:checked ~ #target_1 {
省略
}

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

**Name_Not_Found** · 2023/09/20(水) 19:34:36.77

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

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