Q&A
画像、CSSが反映されないとのことですが、HTMLは反映されていますか？
それとも、サーバーに接続できないということは、HTMLもダメですか？
単純にFTP接続ができないのなら、接続先/ユーザー名/パスワードを再確認してください。
実現したいこと
web制作初心者です
cursorを使用してwebサイトを制作しました。
エックスサーバーのファイルマネージャーにHTMLとCSSフォルダ、画像フォルダをpublic htmlに入れました。
しかし、サイトを見てみるとCSSと画像が全て反映されていません。
FTP接続でファイルを保存しようとしましたが、サーバーにも接続出来ない状況です。
パスは間違ってないと思いますが、反映されない原因が分かる方、よろしければ教えて頂きたいです。
よろしくお願い致します。
発生している問題・分からないこと
画像、CSSがサイトに反映されない
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"> <!-- font awesome--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> <!-- jQuery本体 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- kv_title / kv_txt アニメーション --> <script> $(document).ready(function () { // 最初に非表示 $('.kv_title, .kv_txt p').css('visibility', 'hidden'); function animateText($element, baseDelay = 0, onComplete = null) { const originalHtml = $element.html(); const container = $('<div>').html(originalHtml); let index = 0; function wrap(node) { if (node.nodeType === 3) { return node.nodeValue.split('').map(char => { const delay = index * 50 + baseDelay; const span = $('<span>').text(char).attr('style', `opacity:0; display:inline-block; transform:translateY(20px); transition:all 0.5s ease ${delay}ms;` ); index++; return span[0].outerHTML; }).join(''); } else if (node.nodeType === 1) { const tag = node.tagName.toLowerCase(); const classAttr = node.className ? ` class="${node.className}"` : ''; const inner = Array.from(node.childNodes).map(child => wrap(child)).join(''); return `<${tag}${classAttr}>${inner}</${tag}>`; } return ''; } const newHtml = Array.from(container[0].childNodes).map(node => wrap(node)).join(''); $element.html(newHtml); setTimeout(() => { $element.find('span').each(function () { $(this).css({ opacity: 1, transform: 'translateY(0)' }); }); const totalDelay = index * 50 + baseDelay; if (typeof onComplete === 'function') { setTimeout(onComplete, totalDelay); } }, baseDelay); } // ① kv_title を先にアニメーション $('.kv_title').css('visibility', 'visible'); animateText($('.kv_title'), 0, function () { // ② 完了後に kv_txt p をアニメーション $('.kv_txt p').css('visibility', 'visible'); animateText($('.kv_txt p'), 0); }); }); </script> <script> $(document).ready(function () { function showOnScroll() { $('.work-item').each(function () { const top = $(this).offset().top; const scroll = $(window).scrollTop(); const windowHeight = $(window).height(); if (scroll + windowHeight > top + 50) { $(this).addClass('show'); } }); } $(window).on('scroll', showOnScroll); $(window).on('load', showOnScroll); }); </script> <!-- jQueryハンバーガー --> <script> $(function(){ const $btn = $('.hamburger'); const $drawer = $('#global-drawer'); const $backdrop = $('.drawer-backdrop'); const $focusable = 'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'; let lastFocused = null; function openDrawer() { lastFocused = document.activeElement; $btn.addClass('is-active').attr('aria-expanded', 'true'); $drawer.addClass('is-open').attr('aria-hidden', 'false'); $backdrop.addClass('is-open'); $('body').addClass('no-scroll'); // 最初のフォーカス const $first = $drawer.find($focusable).first(); if ($first.length) { $first.focus(); } } function closeDrawer() { $btn.removeClass('is-active').attr('aria-expanded', 'false'); $drawer.removeClass('is-open').attr('aria-hidden', 'true'); $backdrop.removeClass('is-open'); $('body').removeClass('no-scroll'); // 元の場所へフォーカス戻す if (lastFocused) { $(lastFocused).focus(); } } $btn.on('click', function(){ const expanded = $(this).attr('aria-expanded') === 'true'; if (expanded) { closeDrawer(); } else { openDrawer(); } }); // オーバーレイ/リンククリックで閉じる $backdrop.on('click', closeDrawer); $('#global-drawer .drawer-link, #global-drawer .drawer-cta').on('click', closeDrawer); // 閉じるボタンでも閉じる $('.drawer-close').on('click', closeDrawer); // ESCで閉じる $(document).on('keydown', function(e){ if (e.key === 'Escape' && $drawer.hasClass('is-open')) { e.preventDefault(); closeDrawer(); } }); }); </script> </head><title>portfolio</title> <!-- リセットCSS 読み込み --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css"> <!-- style.css 読み込み --> <link rel="stylesheet" href="./css/style.css"> <!--google fonts 読み込み--> <link rel="preconnect" href="https://fonts.googleapis.com">
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
Googleで色々と調べてやっていますが分かりません
補足
特になし
コメントありがとうございます。
HTMLとjQueryは反映されています
しかし、CSSと画像が反映されません
Googleのデベロッパーツールで確認したら、style.cssに404not foundと表示されています
FTP接続は接続先/ユーザー名/パスワードすべて再確認してあっております
では、「サーバーにも接続出来ない状況です。」とは何ですか？
filezillaとsyberduckに必要事項を入力してから、クリックした際にサーバーに接続できませんでしたと表示されました
ファイルマネージャのスクリーンショットをご提示された方が解決につながりそうな気がします。
回答1件
0
LocalWPで作ったサイトを、XサーバーにインストールしたWPへAll-in-Oneプラグインを使用しデータ移行をしたら、一部の画像が表示されなくなった
https://teratail.com/questions/p8s3mgb2alb1tp
おそらく、これと同じ現象だと思いますが、HTMLに記述しているパスの./cssや./imgの前の.を削除してみてください。
投稿2025/08/27 10:55
編集2025/08/27 10:57総合スコア1559
コメントありがとうございます
試してみましたがダメでした
試したということは、FTP接続は出来ているのでしょうか？出来ていないのでしょうか？
まず、そこの切り分けをはっきりさせてください。
FTP接続はできていません
85.131.209.139:21 に接続中...
状態: "ECONNREFUSED - サーバーによって接続が拒否されました" への接続の試行が失敗しました。
エラー:サーバーに接続できません
これが表示されます
FTP接続できないのに、HTMLの反映はできているというのが不思議ですね。
一度はアップロードできているようなので同時接続数制限や不正ログイン対策にひっかかっているんじゃないでしょうか。
https://www.xserver.ne.jp/support/faq/service_ftp_trouble_530.php
https://www.xserver.ne.jp/support/faq/service_ftp_trouble_error.php
またはFTP通信に接続IP制限をかけていたりしていつもと違う場所から接続しようとしている、といったようなことはありませんか？
エラーメッセージでググったところ、以下の記事がヒットしました。
https://tooljp.com/windows/doc/ftp-over-tls-Implicit-explicit/ftp-over-tls-Implicit-explicit.html#:~:text=%E6%9A%97%E9%BB%99%E7%9A%84%E3%81%AAFTP%20over%20TLS%20%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88
XServer のヘルプに以下のような記述がありました。
https://www.xserver.ne.jp/manual/man_ftp_filezilla_setting.php#:~:text=%E6%9A%97%E5%8F%B7%E5%8C%96-,%E3%80%8C%E6%98%8E%E7%A4%BA%E7%9A%84%E3%81%AA%20FTP%20over%20TLS%20%E3%81%8C%E5%BF%85%E8%A6%81%E3%80%8D%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82,-%E3%83%AD%E3%82%B0%E3%82%AA%E3%83%B3%E3%81%AE%E7%A8%AE%E9%A1%9E
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
kazu0627さん
解決方法を簡単に回答に書いて、「自己解決」で閉じてください。
あとから見る人の参考になります。
あなたの回答
tips
プレビュー
