• 締切済み

さくらVPS css外部ファイル読み込みNG!

スマホのホームページを作成中ですが、なぜか外部ファイルの読み込みがうまく行きません。 【さくらVPSサーバではNG】 <link rel="stylesheet" href="../css/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/jquery.mobile-1.3.2.min.js"></script> 【他サーバからはOK】 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 「nkf -g jquery.mobile-1.3.2.min.css」で漢字コードを確認し、EUCおよびUTF-8の両方試しましたがどちらともNG。 でも他サーバから読み込みは、OK。 LinuxOS設定で、設定すべき点があるのかなぁ~と思っていますが、手詰まり状態です。 1.パソコンのブラウザ(IE/Chrome)からは、読み込みOK。 2.スマホは、Android端末を使用、標準ブラウザ/ChromeともにNG。 どなたか教え願えないでしょうか、宜しくお願い致します。 ※FTPサーバは、ProFTPDを構築し、これを利用しています。

みんなの回答

  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.4

No2です。 ログを見る限り、3つのうち2つはサーバーにアクセスが来ているので、正常です。 残り一つのリクエストが来てないので、HTMLに何らかの記述ミスがあるはず。質問文にはちゃんと書かれているように見えますが、ちゃんと書かれているならサーバーにリクエストが来ているはずなので。 もしかすると、補足に引用されたログの一つ前に書かれているのか?それなら正常ですが。 いずれにせよ、サーバーの設定の問題では無いです。

tsubakuro5010
質問者

お礼

回答有難う御座います。 他サーバから読み込む場合、問題なく動作していますので、 一旦、これでPHPスクリプトを完成させ。 改めて、調査致します。 今日中に、ガラ携、スマホおよびパソコンサイトを完成すべく、 調査は、後回しにさせて頂きます。 昨日までは、ガラ携でUTF-8 BOMありで、はまってしまいました。 (TT)

回答No.3

もしかして、現在そのCSSは開発中でしょうか? とりあえず、ブラウザーのキャッシュを消去して、すべてのブラウザーを再起動してみてください。 302リクエストがあるようですので・・・

tsubakuro5010
質問者

お礼

》もしかして、現在そのCSSは開発中でしょうか? jquery.mobile-1.3.2.min.css は、提供されているものそのものです。 》とりあえず、ブラウザーのキャッシュを消去して、すべてのブラウザーを再起動してみてください。 これも、やって見ましたがNGのまま変わらずです。 パソコンでは、問題なく表示されるのに、何故スマホはNGなのか?です。

  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.2

ポイントがよくわからないのですが、後半に書いてあることからすると、 「全く同じHTMLなのに、PCからは見える(CSSが読まれる)がスマフォからは見えない(CSSが読まれない)」 という現象だと理解していいですか? Apacheのログにはなんと出てますか?

tsubakuro5010
質問者

お礼

》という現象だと理解していいですか? はい、その通りです。 》Apacheのログにはなんと出てますか? 49.97.24.15 - - [14/Dec/2013:09:50:21 +0900] "GET /css/jquery.mobile-1.3.2.min.css HTTP/1.1" 302 297 "http://********/sp/test.html" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:21 +0900] "GET /js/jquery.mobile-1.3.2.min.js HTTP/1.1" 302 297 "http://********/sp/test.html" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:21 +0900] "GET /sp/ HTTP/1.1" 200 1068 "http://********/sp/test.html" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:21 +0900] "GET /sp/ HTTP/1.1" 200 1068 "http://********/sp/test.html" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:22 +0900] "GET /sp/ HTTP/1.1" 200 1068 "http://********/sp/test.html" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:22 +0900] "GET /favicon.ico HTTP/1.1" 302 289 "-" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" 49.97.24.15 - - [14/Dec/2013:09:50:22 +0900] "GET /sp/ HTTP/1.1" 200 1068 "-" "Mozilla/5.0 (Linux; Android 4.2.2; SO-02E Build/10.3.1.B.0.256) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36" ※アドレスのみ※印に変更させて頂きました。m(_)m このあたりのログかと思いますが。

回答No.1

まずは、絶対パスにしてみてください。 <link rel="stylesheet" href="../css/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/jquery.mobile-1.3.2.min.js"></script> ではなく <link rel="stylesheet" href="http://hogehoge/css/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://hogehoge/js/jquery-1.9.1.min.js"></script> <script src="http://hogehoge/js/jquery.mobile-1.3.2.min.js"></script>

tsubakuro5010
質問者

お礼

回答ありがとうございます。 絶対パスでもNGでした。 また、試しに、httpd.confの設定で以下を試しましたがこれもNG EnableMMAP off EnableSendfile off 環境 Apache/2.2.15 (CentOS) 他試すことがあれば何でもお教えください。 何故…

関連するQ&A

  • jQuery Mobile バージョン

    jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか?

    • ベストアンサー
    • CSS
  • jquery.mobile-1.1.1.min.c

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script> </head> ・ ・ ・ 以下省略 のようにHPを作っているのですが、 jquery.mobile-1.1.1.min.cssの部分で設定されているcssの値を変更することは出来ないのでしょうか? 例えば、 .ui-content .ui-listview { margin: -15px; } の値を、 margin: -15px; ではなく、 margin: 50px; にしたい場合、 どうすればいいですか? ul.ul_test { margin-top: 50px; } を作って、 <ul class="ul_test" としてみましたが、 適用されませんでした。

    • ベストアンサー
    • CSS
  • onclick属性に外部jsと外部cssの記載方法

    表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例) <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。

  • HTMLをWordPress化 CSSをどこに?

    HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか? function sample_scripts() {   // CSSの読み込み   wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' );   wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' );   // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true );   // サイト内のjsの読み込み   wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true );   wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか? 宜しくお願いします。

    • ベストアンサー
    • PHP
  • スマホとPCサイトの供用ページの最初の記載は?

    スマートフォンとPCの供用のページを作ろうとしています。 見よう見まねで下のようなヘッド部分の記載でよいでしょうか? よく分からないのは、 <HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> ↑この部分です。 こでいいのでしょうか? ド素人のおバカな質問と思われるでしょうが、簡単にアドバイスしてください。 よろしくお願い致しますm(__)m <HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <META content="index,follow" name="GOOGLEBOT"> <META name="keywords" content="キーワード,キーワード2"> <META name="description" content="ホームページの説明文"> <META name="viewport" content="width=device-width, initial-scale=1"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="home/css/themes/○○○.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <STYLE type="text/css"> <!-- てきとうなスタイルシート --> </STYLE> </HEAD>

    • ベストアンサー
    • HTML
  • 外部ファイルを読み込んだhtmlをinclude

    外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : (画像などが他にもいっぱい) となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。

    • ベストアンサー
    • PHP
  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のHTMLソースに足らない部分がありますか? ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • jquery.mobile 画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか? 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • よく使うHTMLの外部ファイル化は可能ですか?

    javascript や CSSは <script src=script.js></script> <link rel=stylesheet href=style.css> のように、外部ファイルから読み込むことができます。 htmlでも同様のことはできないでしょうか? htmlでメニューを作っているのですが、 <nav> <ul> <li></li> </ul> </nav> と、すべてのhtmlファイルに書くのも面倒ですし、 メニューの追加や削除があったときに 一つ一つ修正していかなければならないので、 できれば外部ファイルになればと思いました。 jQueryのhtmlメソッドで書き出すというのは、 思いついたのですが、ほかによい方法があればと思い、質問いたしました。 どうぞ、よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS(http://から始めてます)を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか? <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>