[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
149: 2023/09/15(金)22:26 ID:??? AAS
今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね
150(1): 2023/09/15(金)23:09 ID:??? AAS
>>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？
151: 2023/09/16(土)01:37 ID:??? AAS
gridがflexよりも優秀な時ってどういう時があるの？
152(1): 2023/09/16(土)02:13 ID:??? AAS
少し上読めば？
153: 2023/09/16(土)02:28 ID:??? AAS
>>152
たぶん同じ質問繰り返して荒らしてるだけだと思う
154(2): 2023/09/16(土)21:04 ID:??? AAS
>>150
ダメですか？
#hoge > ul li {
color: #03f;
text-decoration: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 2px 10px;
background: #ddd;
outline: none;
省8
155: 2023/09/16(土)21:29 ID:??? AAS
>>154
コピペしたけど↓は通ったよ
外部ﾘﾝｸ:jigsaw.w3.org
156(2): 2023/09/16(土)22:10 ID:??? AAS
>>154
もしかしてcss-validator.org使った？
正解はこっち 外部ﾘﾝｸ:jigsaw.w3.org
157(1): 2023/09/16(土)22:57 ID:??? AAS
外部ﾘﾝｸ[html]:css-validator.org
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。
>>156
そこと何が違うのでしょうか？
158: 2023/09/16(土)23:58 ID:??? AAS
古くて機能してない
そこじゃなくていいなら使うな
159(2): 2023/09/17(日)00:02 ID:??? AAS
>>157
border-radiusでempty stringを吐くバグがあるらしいね
外部ﾘﾝｸ[cgi]:www.w3.org
border-radiusをなくしたらエラーでなかったよ
160: 159 2023/09/17(日)00:04 ID:??? AAS
原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め
161(1): 2023/09/17(日)00:10 ID:??? AAS
バリデーターやツールはW3Cの本家サイトから辿った方が無難だね
Validators and tools | Developers | W3C
外部ﾘﾝｸ:www.w3.org
162(1): 2023/09/17(日)14:11 ID:??? AAS
コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。
スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
外部ﾘﾝｸ:jsfiddle.net
実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。
163(1): 2023/09/17(日)14:26 ID:??? AAS
.header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}
164: 2023/09/17(日)14:38 ID:??? AAS
最新のSafariでもまだベンダプリフィクス要るのよね…
165: 2023/09/17(日)15:23 ID:??? AAS
chromeだと動くからsafariで検証してたってことか
166(1): 2023/09/17(日)18:46 ID:??? AAS
あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
外部ﾘﾝｸ:jsfiddle.net
>>163の内容だと -webkit～のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか？
167(1): 2023/09/17(日)19:22 ID:??? AAS
>>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定
168(1): 2023/09/17(日)19:37 ID:??? AAS
opacityだめなんだね
rgbaで指定するのがよいのかな
上下前次1-新書関写板覧索設栞歴
あと 834 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.014s