<head>外での、外部css、外部jsの読み込み
- <head>外での、外部CSSや外部JSの読み込み方法について質問です。通常、<head>内に記述することが多いですが、<body>内に記述しても動作することがあります。皆さんはどのように読み込んでいるのか教えてください。
- 質問者は通常、<script>要素を使用して外部CSSや外部JSを読み込んでいますが、あるサイトでこれがうまく機能しないことに気づきました。代わりに、<link>要素と<script>要素を使用して<head>外で読み込むことで問題が解決しました。しかし、通常は<head>内で読み込むべきではないのでしょうか？皆さんの意見を聞かせてください。
- <head>外での外部CSSや外部JSの読み込みについて質問です。質問者は通常、<script>要素を使用して読み込んでいましたが、あるサイトでは正常に動作しませんでした。代わりに、<link>要素と<script>要素を使用して<head>外で読み込むことで解決しました。しかし、<head>外での読み込みは適切なのでしょうか？皆さんはどのように読み込んでいるのか教えてください。
- ベストアンサー
<head>外での、外部css、外部jsの読み込み
基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ ダメです。 しかし、ブラウザには、誤ったHTMLであっても可能な限りそれを処理して動作することが求められています。 だからと言って、それに期待して記述することは誤りです。
関連するQ&A
- 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>
- 締切済み
- HTML
- shadowbox.jsについて
shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>
- ベストアンサー
- CSS
- jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <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>
- ベストアンサー
- JavaScript
- 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
- 外部ファイル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>
- ベストアンサー
- JavaScript
- 一部のページにデフォルトCSSを読み込ませない方法
一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。
- 締切済み
- CSS
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- 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
- safari でcssがききません！
こんばんは。 仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。 下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。（文字サイズは表示されてます） <link rel="stylesheet" type="text/css" href="css/default.css"/> <script language="javascript" type="text/javascript" src="js/css.js"></script> Macのfirefoxではなんの問題もありません。 cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。 どなたか、解決法、参考サイトなどありましたら、教えてください！ よろしくお願いします。
- 締切済み
- HTML
- 外部読み込みで動かないときの対処法
プログラミングの入口にも立っていない初心者です。 あるプログラムを導入することになりました。 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はあります。 ご教示のほど、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 そりゃダメですよね。 きちんと正しい書き方でやっていきます！ 勉強になりました！ありがとうございました。