• ベストアンサー

外部ファイルを指定するとページ上部に空白が

bodyやcssでマージンは全てにしているのですが、javascript外部ファイルを読み込ませようとして記述を追加すると上部に空白ができてしまいます。 何が原因なのでしょうか? ↓ページのソース(都合によりファイル名は全て仮名ですすいません) <head> <title>サンプルページ</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="http://test.com/****1.js"></script> <script type="text/javascript" src="http://test.com/****2.js"></script> <link rel="stylesheet" type="text/css" href="http://test.com/****.css"> <style type="text/css"> <!-- body { background-position: 0px 0px} --> </style> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF" text="#333333"> スクリプトの場所は全て絶対パスで指定しています。 また、charsetがeucなのはこのファイルがphpで記述されているためです。 ****1.jsはページで使うスクリプト全て(ポップアップやロールオーバー等)を記述、****2.jsはアクセス解析用のスクリプトを入れています。後者を追加してから空白が出てきたような気がします。 スクリプトの種類によってこういうことが起きるのでしょうか? ご回答お願い致します。

  • racom
  • お礼率75% (3/4)

質問者が選んだベストアンサー

  • ベストアンサー
  • Spur
  • ベストアンサー率25% (453/1783)
回答No.3

> できれば解析スクリプトをソースで表示させないようにしたいと思っています。 ですから、外部ファイルにしておけばよいでしょう。 > imgタグをdocument.writeで何行かにわけて生成しているみたいです。これがダミー画像でしょうか? そうです。 > この画像のサイズを指定し小さくできれば空白も少なくなるのでしょうか? 無くなりはしませんし、おそらくすでに1pixelで出していると思います。 それでも文字の1行分取られてしまいます。 > body内に書くのは大丈夫なのでしょうか? どこにでも書けますよ。 ヘッダーに書くのは、事前に読み込ませて、使いたいところで出力するためです。 だから、 function xxx { となっていろものが多いでしょ? 本文中に書くのは、そこで出力したい場合です。 出したいところに書けばよいですよ。 ↓参考

参考URL:
http://spur.s8.xrea.com/doc/hobby/java/java_1.htm
racom
質問者

お礼

一つ一つご丁寧にありがとうございます。 あれから実際に試して、問題ないことがわかりました。 大変たすかりました。本当にどうもありがとうございました。

その他の回答 (2)

  • Spur
  • ベストアンサー率25% (453/1783)
回答No.2

アクセス解析をJavaScriptでやっているということですようか? 私はperlで書いて、呼び出していますけど・・・ それとも、外部に置いたJavaScriptからまたcgiを呼んでいるのかな? いずれにしても、解析ソフトは、ダミー画像を出力していませんか? そういったタイプなら、当然空白ができますので、Body中のどこか、影響の出ないところで指定した方が良いでしょう。 私はロゴ画像のすぐ横とか、一番下に入れていますよ。 ただ単に<body>と</body>の間のどこか影響が無いところに書いてください。

racom
質問者

お礼

解析用スクリプトはjavascriptでできていました。 スクリプト部分のみをペーストして****2.jsとして保存しています。 >ダミー画像を出力していませんか? 解析用スクリプトを確認してみたところ、imgタグをdocument.writeで何行かにわけて生成しているみたいです。これがダミー画像でしょうか? ということはこの画像のサイズを指定し小さくできれば空白も少なくなるのでしょうか? >Body中のどこか、影響の出ないところで指定した方が良いでしょう 下記お礼にも書きましたとおり、できれば解析スクリプトをソースで表示させないようにしたいと思っています。 <script type="text/javascript" src="http://test.com/****2.js"></script> をbody内に書くのは大丈夫なのでしょうか?リファレンスなどで「外部ファイルの指定の仕方」などを見ると全て<head>内にかかれているのでそこじゃないとダメなんじゃないかと思っていました。 とにかく試してみることにします。 ご回答いただいたことでかなり糸口が見つかりました。 本当にありがとうございます。

回答No.1

アクセス解析用のスクリプトは、その場所に入れては空白ができます。 アクセス解析用のスクリプトは<head></head>の間出ないとだめということはないので、デザイン的に余裕がある位置。たとえばテーブルで使っていない列の中や、20×20ピクセルぐらいひろがってもオッケーな部分にいれると、いけますよ。

racom
質問者

補足

やはり、解析用スクリプトだとスペースが空いてしまうということなんですね。 ありがとうございます。 今回は解析用スクリプトをソースに出したくなかったので外部ファイルにしたのですが、body内でも外部ファイル指定タグは使えるのでしょうか。できなければ、何か他に方法はありますでしょうか? よろしくお願いします。

関連するQ&A

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1~4.js の行を全てコメントアウトすると、エラーはでません。 1~4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1~4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • JSの記述を別ファイルに移す

    下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • JSP内で外部jsファイルを指定する

    昨日から散々悩んでいます。 tomcatのJSPから外部jsファイルが読み込めません。 最初htmlのみでテストしたのですが そのときは何の問題も無く動きました。 URLの指定の仕方かなと思いましたが、 cssのほうは同じ指定の仕方で効いています。 <!---------- JSP内容 ------------------------> <!-- [テスト]ボタン押下でscript実行 --> <html> <head> <title>テスト</title> <script Language='JavaScript'    type='text/javascript' charset="shift_jis" src='/Test/script/Script.js'> </script> <script language='JavaScript' type='text/javascript'> <!-- function test(){ jstest(); } function test1(){ alert("test1:OK"); } // --> </script> <link rel="stylesheet" href="/Test/css/Style_ver1.css" type="text/css"> </head> <body> <form> <input type='button' class="button" value='テスト' onclick="test()"> </form> </body> </html> <!---------- 外部js内容------------------------> function jstest(){ alert("jstest:OK"); } <!---------------------------------------------> onclick="test1()"にすると動きます。 以前に作られた別アプリケーションのJ2EEのソースを見ると、 src=<c:url とcoreタグが使用されています。 coreタグの使用なしにURLを書くことはできないのでしょうか? すいませんが、どなたか教えてください。 宜しくお願いします。

    • ベストアンサー
    • Java
  • IEだけjsファイルを読み込まない指定

    よろしくお願いいたします。 IEだけに適用させたくないjsファイルがあり、 HTMLファイルの<head></head>内に、下記のように記述してみたのですが、 <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> IEだけでなく他のすべてのブラウザで適用されなくなってしまいました。 書き方が間違っているのでしょうか・・? ソースは下記のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Description" content="あああ" /> <meta name="Keywords" content="あああ" /> <title>タイトル</title> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="import.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> 以下略 また、こちらのページを参考に記述いたしました。 http://blog.playunderworld.com/web/ie-conditional-comment/ もし原因をご存知でしたらお教えいただけたらと思います。 どうぞよろしくお願いいたします。

  • 外部JSファイルが読み込まない。

    javascriptの勉強をし始めて、二日目の初心者です。 jsファイルを使って、画像をIEで表示させたいのですが、上手く読み込んでくれません。 どうか、教えてください。 ---html----------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4,01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="common.js" type=text/javascript" charset="UTF-8"> </script> <script src="showImage2.js" type="text/javascript" charset="UTF-8"> </script> <title>キャラクターの表示</title> </head> <body onlaod="main()"> <noscript>JavaScriptを有効にしてください</noscript> </body> </html> ----js------------------------------------------------------------------------------ var img; function main() { img=document.createElement("img") document.body.appendChild(img); img.src="pcStay.png"; } ------------------------------------------------------------------------------------

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • Javascriptの外部サーバーからの読み込み(greybox)

    いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上):http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上):http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。

  • ツリー式 メニューを外部ファイルとして読み込みたい

    ツリー式 メニューを見つけて参考にさせていただいておりますがメニュー項目を外部ファイルにしたく試行錯誤いたしましたがうまく配列に入れることができません。 どなたか詳しい方、ご教授願えないでしょうか? よろしくお願いいたします。 下記のscriptの menu[0] = "メニュー,0,0"; のmenu配列を外部ファイルにしたい。 <html> <head> <title>menu</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> content="text/javascript"> <script type="text/javascript" src="crossbrow_lib.js"></script> <script type="text/javascript" src="dhtml_lib.js"></script> <script type="text/javascript"> <!-- BrowserCheck(); menu = new Array; *****ここから↓ menu[0] = "メニュー,0,0"; menu[1] = "<a href=test1.html target=_blank>test11</a>,1,1"; menu[2] = "<a href=test2.html target=_blank>test2</a>,1,1"; menu[3] = "TEST3,1,0"; menu[4] = "TEST3-1,2,0"; menu[5] = "<iframe src=test3-1.html width=600 height=480></iframe>,3,2"; menu[6] = "TEST4,1,0"; menu[7] = "TEST4-1,2,0"; menu[8] = "<iframe src=test4-1.html width=600 ***** ここまで height=480></iframe>,3,2"; ExpposinitX =10; ExpposinitY =10; ExpWidth = 600; function init(){ ExplorerTree(); } //--> </script> <script type="text/javascript"> <!-- //--> </script> <style type="text/css"> <!-- --> </style> <link rel="stylesheet" href="style.css" type="text/css"> </head>

  • 外部読み込みで動かないときの対処法

    プログラミングの入口にも立っていない初心者です。 あるプログラムを導入することになりました。 htmlに直接記述した場合はjsが動いていることが確認ができるのですが、外部読み込みにした場合、なぜか動きません。 記述方法がまちがっているのでしょうか? サイト運営の手間を考えて、絶対外部読み込みにする必要があります。 。 《動く…jsをhtmlに直接記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <!-- その他のhtml記述は省略 --> <script type="text/javascript"> <!-- document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); // --> </script> <script type="text/javascript"> <!-- (function() { var pc = new predicta.PClick(); pc.start(); })(); // --> </body> 《動かない…js外部読み込みの記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.sample.net/hoge/js/sample.js"></script> </head> ------------------------------------------------------ js/sample.jsの記述 ------------------------------------------------------ document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); (function() { var pc = new predicta.PClick(); pc.start(); })(); ちなみに、その他にも外部読み込みし、動いているJavaScriptはあります。 ご教示のほど、どうぞよろしくお願いいたします。

  • Lightboxで「ファイルが見つからない」のエラーが出ます

    サイズの異なる複数の画像を実寸で表示したくて、Lightboxを使おうとしているのですが、この設定でどこが悪いのか分かりません。 テキストリンクの「コーヒーブレイク」をクリックすると、 --------------------- ファイルが見つかりません。 “/Volumes/backUP/image/g1/coffeebreak.jpg rel=”にファイルがありません。 --------------------- どなたか教えてください。 □ファイルの場所:  backup/Webフォルダ下にhtmlファイルとlightboxのcss,js,imagesの各フォルダがあります。 使用する画像は、  backup/image/g1フォルダ下にあります。 □表示するhtmlファイルにはこのように記述してあります。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_jis"> <META name="robots" content="none"> <title> ここにタイトルが入ります。 </title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <a href="../image/g1/coffeebreak.jpg rel="lightbox">コーヒーブレイク</a> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう