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

■ このスレッドは過去ログ倉庫に格納されています
2023/08/23(水) 18:52:13.52ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/
2023/08/28(月) 08:32:44.81ID:???
>>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して

一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね
2023/08/28(月) 09:25:21.32ID:???
>>65
コミュ障か？
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、

現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ
2023/08/28(月) 09:33:46.70ID:???
>>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから

けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね
2023/08/28(月) 09:48:48.84ID:???
>>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない！！！」だろ
完全に論理マークアップオナニー屋じゃん

まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく
2023/08/28(月) 09:54:28.24ID:???
>>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね
2023/08/28(月) 11:59:45.34ID:???
>>64
横からすまんが君はSEO対策してないの？？
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ？
2023/08/28(月) 12:02:54.80ID:???
>>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。

ユーザーCSSの為にHTML配慮なんてしてるｻｲﾄなんてねーよｗ
そもそも構造決まってんならXpathで特定できるし。
2023/08/28(月) 12:03:48.11ID:???
老害老害いうけどあなた何歳なの？
2023/08/28(月) 12:11:22.13ID:???
このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・

それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね？
2023/08/28(月) 14:09:13.04ID:???
divdiverはコテつけてくれ
2023/08/28(月) 14:41:32.40ID:???
>>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja&visit_id=638287958271530595-2635680571&rd=1

というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない
2023/08/28(月) 14:44:45.28ID:???
「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望！div spanは使うななんて書いてない！」
これもう障害だろ
2023/08/28(月) 15:01:10.42ID:???
>>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ？
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる)
2023/08/28(月) 15:19:38.33ID:???
>>75

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

論理マークップが何故必要かについて　SEOの為だと言っているんだけど。

あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ？
2023/08/28(月) 15:20:07.14ID:???
>>77
俺はそんな主張してないから知らんがな
2023/08/28(月) 15:20:50.62ID:???
>>77
何もわかってない。

>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ？しらんな。具体的にソース出して。
2023/08/28(月) 15:27:46.67ID:???
>>78
> 論理マークップが何故必要かについて　SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ？
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ)
2023/08/28(月) 15:43:03.19ID:???
>>81
有利ではなくやらないと不利になるんだよ。　アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。

てかあんた、そんな事きいてくる時点でお察しだぞ
2023/08/28(月) 15:50:41.12ID:???
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ

てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて
2023/08/28(月) 15:52:19.50ID:???
↑検索エンジンのページ以外でな
2023/08/28(月) 15:57:53.01ID:???
何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい
2023/08/28(月) 15:57:59.87ID:???
>>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある

> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)
2023/08/28(月) 15:58:35.36ID:???
>>86
コテつけろ
2023/08/28(月) 16:02:30.63ID:???
>>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて
2023/08/28(月) 16:36:17.04ID:???
SOHOやフリーで本当に細々と食ってる奴の134人目
https://mevius.5ch.net/test/read.cgi/hp/1687357689/
2023/08/28(月) 20:19:33.70ID:???
質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ
2023/08/31(木) 19:38:35.37ID:???
divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん
2023/08/31(木) 20:21:01.23ID:???
召喚すな
2023/09/01(金) 07:38:32.84ID:???
なにそのdivdiv君って何？
xhtml星から生まれたの？
2023/09/02(土) 00:22:15.14ID:???
ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし
2023/09/02(土) 01:21:26.04ID:???
質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる
96Name_Not_Found
垢版 |
2023/09/03(日) 16:28:20.78ID:Udh4NPPz
質問です

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/
2023/09/03(日) 16:39:34.32ID:???
>>96
子もflexにすると親の高さを継承する
98Name_Not_Found
垢版 |
2023/09/03(日) 16:42:57.69ID:Udh4NPPz
>>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。

https://jsfiddle.net/7kq2mvbd/10/
99Name_Not_Found
垢版 |
2023/09/03(日) 16:45:27.91ID:Udh4NPPz
>>97
ありがとうございます
できました

https://jsfiddle.net/7kq2mvbd/12/
2023/09/05(火) 18:05:42.35ID:???
比較的最近リリースされたCSSで使えるのってなんかある？

Scroll-driven Animations
@scope

この辺も便利なんだろうけどペースが早いわ
2023/09/06(水) 10:07:05.38ID:???
最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい
2023/09/06(水) 11:11:36.87ID:???
リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな
2023/09/06(水) 11:41:43.45ID:???
>>102
さんくす！
scroll-gap　
→ググってもでてこんな

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

overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス
2023/09/06(水) 12:00:44.35ID:???
scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう
2023/09/06(水) 12:31:57.86ID:???
>>103
すまんscroll-paddingだったわｗ

overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ
2023/09/06(水) 12:53:16.71ID:???
CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる
2023/09/06(水) 13:33:15.44ID:???
cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い
2023/09/06(水) 13:35:09.53ID:???
なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか
2023/09/06(水) 13:35:38.72ID:???
ああ、たしかにイージングは欲しいね
2023/09/07(木) 01:49:29.45ID:???
>>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった
111Name_Not_Found
垢版 |
2023/09/07(木) 10:48:14.19ID:UAGv2jDr
CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする
2023/09/07(木) 11:32:09.08ID:???
>>111
speedが遅い😭
2023/09/07(木) 12:41:04.67ID:???
>>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな
2023/09/07(木) 13:32:24.71ID:???
>>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる
2023/09/09(土) 14:57:01.91ID:???
flexでもgridでもgapが使えるの最高すぎる
2023/09/09(土) 16:31:00.55ID:???
gap最高だよね！超便利　なぜなかったか不思議なくらい
2023/09/09(土) 18:45:24.00ID:???
なにこの良スレ
2023/09/09(土) 19:11:42.35ID:???
<ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>

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

・◎◎◎　　・◎◎　　　・◎◎◎◎◎
・◎◎　　　・◎◎◎◎　・◎◎◎◎
2023/09/09(土) 19:35:25.38ID:???
grid-template-column: repeat(3, 1fr);
2023/09/09(土) 20:20:45.75ID:???
>>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ
2023/09/09(土) 20:24:25.64ID:???
auto-fillかauto-fit好きな方
2023/09/09(土) 20:31:29.72ID:???
grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは
2023/09/09(土) 21:50:56.10ID:???
auto-fit大好き
2023/09/10(日) 00:28:44.28ID:???
flexboxしか使わんけどgrid必要な場面がまったくない
2023/09/10(日) 03:20:37.16ID:???
auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる
2023/09/10(日) 05:50:08.75ID:???
>>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる
127Name_Not_Found
垢版 |
2023/09/12(火) 13:16:44.22ID:ZyApT9EM
チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。

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

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

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

・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
（１）円形かつ四角形のオブジェクトを可視化
（２）円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
（上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです）
2023/09/12(火) 14:47:08.43ID:???
自分は2
2023/09/12(火) 14:52:45.66ID:???
個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば
2023/09/12(火) 17:22:16.78ID:???
>>127
俺も 2
2023/09/12(火) 19:02:35.63ID:???
自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ

2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる
132Name_Not_Found
垢版 |
2023/09/14(木) 13:06:02.38ID:aPP30ZSe
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分した大きさとなるようにしたいです。
2023/09/14(木) 13:48:54.86ID:???
dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな
2023/09/14(木) 14:04:55.94ID:???
>>132
<col>を用意してそれにwidthを指定したらよいのでは
135132
垢版 |
2023/09/14(木) 15:05:02.01ID:???
colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…

https://codepen.io/Nickey-the-looper/pen/MWZoPJv
2023/09/14(木) 16:40:54.34ID:???
grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
https://jsfiddle.net/dumov8ng/
2023/09/15(金) 01:14:20.28ID:???
Bootstrap で出来ないの？
138Name_Not_Found
垢版 |
2023/09/15(金) 04:02:19.83ID:9yhdlK5+
列数を増やしてしまえ
2023/09/15(金) 04:07:26.56ID:???
あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな
2023/09/15(金) 04:58:56.21ID:???
みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや…
2023/09/15(金) 08:31:34.98ID:???
一番下のお絵かきの画像
142132
垢版 |
2023/09/15(金) 16:21:00.96ID:???
>>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。

>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？
2023/09/15(金) 16:24:10.05ID:???
なぜgridはflexに負けたのですか？
2023/09/15(金) 17:02:01.69ID:???
>>141
あー、分かる人にはなんか表示されてるのか
納得
2023/09/15(金) 17:06:03.89ID:???
>>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ
2023/09/15(金) 17:33:04.16ID:???
というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし
2023/09/15(金) 18:45:00.12ID:???
>>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/
2023/09/15(金) 21:31:12.70ID:???
<div id="hoge">
　<ul>
　　<li>文１</li>
　　<li>文２</li>
　　<li>文３</li>
　</ul>
</div>

#hoge > ul li {
・・・
}

でW3C CSS検証かけると

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

とエラーになってしまいます。
何がいけないのでしょうか？
CSS（表示）としては正常に働いています。
2023/09/15(金) 22:26:35.76ID:???
今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね
2023/09/15(金) 23:09:19.85ID:???
>>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？
2023/09/16(土) 01:37:35.45ID:???
gridがflexよりも優秀な時ってどういう時があるの？
2023/09/16(土) 02:13:25.20ID:???
少し上読めば？
2023/09/16(土) 02:28:55.38ID:???
>>152
たぶん同じ質問繰り返して荒らしてるだけだと思う
2023/09/16(土) 21:04:55.77ID:???
>>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はエラーなしです。
2023/09/16(土) 21:29:04.44ID:???
>>154
コピペしたけど↓は通ったよ
https://jigsaw.w3.org/css-validator/validator
2023/09/16(土) 22:10:26.63ID:???
>>154
もしかしてcss-validator.org使った？
正解はこっち https://jigsaw.w3.org/css-validator/
2023/09/16(土) 22:57:43.87ID:???
https://css-validator.org/validator.ja.html
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。

>>156
そこと何が違うのでしょうか？
2023/09/16(土) 23:58:24.80ID:???
古くて機能してない
そこじゃなくていいなら使うな
2023/09/17(日) 00:02:03.02ID:???
>>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975

border-radiusをなくしたらエラーでなかったよ
160159
垢版 |
2023/09/17(日) 00:04:07.33ID:???
原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め
2023/09/17(日) 00:10:22.20ID:???
バリデーターやツールはW3Cの本家サイトから辿った方が無難だね

Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/
2023/09/17(日) 14:11:21.66ID:???
コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。

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

実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。
2023/09/17(日) 14:26:05.21ID:???
.header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}
2023/09/17(日) 14:38:50.16ID:???
最新のSafariでもまだベンダプリフィクス要るのよね…
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況