Q&A
お手元のコードをコピペで提示してください。
「コピペでした」だけでは本当に同じものかわかりませんし、問題が起きているのはあくまであなたの目の前のコードです。
https://flex-box.net/js-scrollin/#co-index-2
こちらのサイトのJavaScriptのところをコピペしてフェードインを実装しようとしたのですがエラーが出てきてしまったので質問させていただきます。
[Deprecation] CSS cannot be loaded from file: URLs unless they end in a .css file extension.
とエラーが出てきました。
解決策を知っている方がいましたらご教示ください。
失礼しました。下記にコードを貼り付けました。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="08.css">
<link rel="stylesheet" href="08.js">
<title>Document</title>
</head>
<body>
</body>
</html>
<div class="msg">Scroll Down<br>↓</div>
<div class="box-inner">
<div class="fade-in fade-in-up box"></div>
<div class="fade-in fade-in-left box"></div>
<div class="fade-in fade-in-right box"></div>
<div class="fade-in fade-in-down box"></div>
</div>
css
.msg{
color: #333;
font-size: 28px;
font-weight: bold;
line-height: 1.5;
margin-top: 40px;
text-align: center;
margin-bottom: 1000px;
}
.box-inner{
max-width: 1200px;
margin: 250px auto;
padding: 0 40px;
}
.box{
width: 300px;
height: 300px;
background-color: orange;
margin: 50px auto 0;
}
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
JavaScript
let fadeInTarget = document.querySelectorAll('.fade-in');
window.addEventListener('scroll', () => {
for (let i = 0; i < fadeInTarget.length; i++){
const rect = fadeInTarget[i].getBoundingClientRect().top;
const scroll = window.pageYOffset || document.documentElement.scrollTop;
const offset = rect + scroll;
const windowHeight = window.innerHeight; // 現在のブラウザの高さ
if (scroll > offset - windowHeight + 150) {
fadeInTarget[i].classList.add('scroll-in');
}
}
});
質問は編集できます。
こちらは質問への追記修正依頼のコメント欄で、マークダウン使えません。
回答3件
0
ベストアンサー
<link rel="stylesheet" href="08.js">
jsファイルはscriptタグを使って読み込ませます。
先の回答にある通り、link hrefで指定するのはcssです。
エラーが親切に教えてくれていることも多いので読みましょう。
エラーメッセージの読み方と対処, 検索や質問の原則
特に、個人記事が紹介しているような実装は諸々な理由からそのまま使えなかったり前提が必要だったり、バグがあったりします。古いこともしばしばです。
コピペで動かない…というのはよくある事ですが、使いこなせなければ自身のサービスに取り込むことはできませんから、使うための前提知識（主に基礎部分）や何かあったら自身で手を入れられるくらいは欲しいところですね。
※私も昔は「コピペして動くものを探す」ことだけやってたのでよく分かりますが、本当に使いたいものが使えないときにどうしたら使えるのか、一歩踏み込めるようになったほうが良いです
投稿2021/08/24 06:55
編集2021/08/24 07:11総合スコア80861
エラーの通り。
何のマイナスなんでしょうね…
この低評価はなんだろう。理由を。
まあ不純な人は一定いるので仕方ないですけど、この手の低評価は迷惑行為として規約違反らしいのでちょっと考えてもらいたいですね。
頑張るところそこじゃない
最近変な質問よく見ますし一方的に誰かに逆恨みされてるのかもしれないですね。
何の問題も無いと思いますので+1しときます
ありがとうございます。
「蛇足が長い」という指摘でしたら甘んじて受け入れます。
m.ts10806さん
質問者さんのミスしてる内容からしても慣れてる人では無いと思いますし、
自分の経験を元にして注意を促してくれるのは有難いと思います。
無関係な事を長々と書いてるんで無ければ個人的には回答の長さは気にする必要は無いと思います。
(私もよく長々と書いてたりしますから)
りょうかいです。
低評価理由書いてくれたら内容検討しようもあるんですが、ちゃんと回答したつもりで無言は困りますね。迷惑。
色々説明不足な部分とか補足したりしてはみるものの、この時点でも無反応ならやはりそういうことでしょうね。
そんな低評価したところで何も成らないのに…。
少なくともある程度実績無ければ低評価出来ないはずですし、気になるなら運営に低評価しているユーザーに直接警告して貰うなりしてもいいかもですね。正当な理由でないのが分かれば然るべき対応をしてくれるとは思います。
>気になるなら運営に低評価しているユーザーに直接警告して貰うなり
同様の低評価が続く場合は時々問い合わせてます。促してもコメントなかったときとかもですね。
そんな中で得られたのが「嫌がらせ目的での低評価は迷惑行為として規約違反、見つけ次第、忠告や凍結などの対処を行う」という返答でした。
実際対応されたかは教えてくれませんが、その後なくなったので何かしらされたものと思います。
申し訳ございません。出先で返信遅れました。
何か私がマイナスボタン（？）か何かを押してしまったのなら申し訳ございません。
先ほどこのサイトの登録をし使い方が十分にわかってないところ質問の投稿をした上にこのような不快にさせてしまい申し訳ございません。
質問者さんがしていることではないので気にしないでください。
あくまで一部のユーザーが無言で理由も書かずにm.ts10806さんの回答に低評価をしている
事についてコメントしているだけです。
質問内容と無関係な内容でコメント伸ばしてしまったのは申し訳ないです。
そうでしたか。そういった方もいらっしゃるんですね..。
質問にご返答していただいた方々へ。ありがとうございます。実装できました！
engachoooさん
ひとまず解決されたようで何よりです。解決されたのでしたら解決済みにしてもらいたいですが、そのまえに先に依頼した質問修正をご対応ください。
私の回答は質問本文にコードが追加されるという前提になっています。
質問者さんが低評価を押してないであろうことはわかります。低評価機能の開放にはある程度の活動が必要だからです（基準は開示されていない）。
いずれの評価も自身がしたものはその投稿のところがボタンではなくラベルになって青くなっているはずです。
回答にある低評価ボタンを押したときは理由をコメントするようにメッセージが出ます。必須ではないにしろ、それを無視できるケースは少ない認識です。
*明らかにふざけている、荒らし
*全く回答になっていない
*幾度か指摘したが聞き入れないユーザー
の場合を除いては基本コメントして改善してもらうべきと考えていますし、もともとはナレッジとして運用したい意図があるようなのでフィードバックはどんどんするものです。
0
エラーメッセージの通り、「.css以外の拡張子のファイルをCSSとして読み込もうとしてしまった」のではないでしょうか。
投稿2021/08/24 05:43
総合スコア145208
0
jsを読み込むにはlinkではなくscriptで読み込むといった初心者的なミスをしてしまいました。
投稿2021/08/24 12:59
総合スコア1
あなたの回答
tips
プレビュー
