HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (881ﾚｽ)
上下前次1-新
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で指定するのがよいのかな
169(1): 2023/09/17(日)19:58 ID:??? AAS
>>167
あぁ、ありがとうございます！
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。
170(1): 2023/09/18(月)01:41 ID:??? AAS
ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。
具体的にどの程度の長さになるかはまだ作成していないためわからないです。
171: 2023/09/18(月)02:12 ID:??? AAS
>>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど
>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし…
172: 148 2023/09/18(月)10:31 ID:??? AAS
>>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。
>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。
173(1): 2023/09/19(火)21:47 ID:??? AAS
>>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。
174: 2023/09/19(火)21:52 ID:??? AAS
>>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> 外部ﾘﾝｸ:jsfiddle.net
175: 2023/09/20(水)03:42 ID:??? AAS
defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる
176: 2023/09/20(水)14:48 ID:??? AAS
お題に無い話を勝手に足されても困る
177: 2023/09/20(水)14:57 ID:??? AAS
パっと見だとそもそもa d c部分はテーブルですらない
178: 2023/09/20(水)16:12 ID:??? AAS
ちょっと何言ってるか分かんない
179: 2023/09/20(水)16:18 ID:??? AAS
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
外部ﾘﾝｸ:gigazine.net
上下前次1-新書関写板覧索設栞歴
あと 702 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.008s