CSS、JavaScriptの外部化について
- CSS、JavaScriptの外部化についての質問
- HTMLファイルをCSSとJavaScriptに分けたい
- CSSファイルとJavaScriptファイルを分ける方法について
- ベストアンサー
css、javascriptの外部化について
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <!-- CSS --> <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p> <!-- CODE --> <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div> <!-- / CODE --> </div> </body> </html> 上記のソースをｈｔｍｌ、ｃｓｓ、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、 お願いします 単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } javascriptファイル function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎました よろしくお願いいたします
- tomokin123
- お礼率50% (3/6)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
通常はそれで問題ないですよ？ スクリプトの都合まではわからないので、何が問題なのかを仰らないと誰も理解出来ないと思いますよ。
関連するQ&A
- html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- 締切済み
- JavaScript
- 教えてください!
教えてください！jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか？ コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); よろしくおねがいします
- ベストアンサー
- CSS
- firefoxでの画像の表示位置が違う
HP作成時での質問です、どうぞ宜しくお願い致します。 トップページにイメージ画像を配置し、それをjqueryというjavascriptで スライドショーさせる(計4枚を5秒ずつで切り換え、最後の画像でストップ)ようにしました。 作成後、プレビューするとスライドショーそのものの動作確認は問題ありませんでした。 が、ブラウザ上での表示位置に違いが出ました。 IEだと何の問題もありません(画像(1))。が、Firefoxだとその画像が図の位置にあるんです(画像(2))。 どちらのブラウザでもスライドショーはします。 使用したタグの記述としては以下の通りです。 --------------------------------------------------------- 【head内】 その(1) <style type="text/css"> <!-- #slideshow { position: relative; width: 800px; height: 250px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; } --> </style> その(2) <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> その(3) <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ $(function() { function slideSwitch() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : null; if ($next !== null) { $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } else clearInterval(intervalID); } var intervalID = setInterval(slideSwitch, 5000); }); </script> --------------------------------------------------------- 【body内(の画像を置きたい場所)】 <TABLE border="0" width="800" height="250" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD <p id="slideshow" valign="middle" width="800" height="250"> <img src="images/top_image01.jpg" class="active"> <img src="images/top_image02.jpg"> <img src="images/top_image03.jpg"> <img src="images/top_image04.jpg"></TD> </TR> </TBODY> </TABLE> --------------------------------------------------------- ※ちなみにこのページをfirefoxでソース表示すると上記body内のこの部分が赤字表示されます。 <TD <p id="slideshow" valign="middle" width="800" height="250"> 見てわかると思いますが上記body内、</p>がありません。 メモ帳でtop_image04.jpg">の後に</p>を書いて上書きするのですが、その上でfirefoxで開いても やはり画像表示位置は違うままです。 さらに私は通常ホームページビルダーで作成しているのですが、 このソフト上でトップページを開くとエラー検出となり自動修正され、毎回この</p>が消えています。 (しかし</p>が無い状態でもIEでは問題無く正しい位置で表示されています) こういったことも今回の現象と何か関係があるのでしょうか。 以上の情報から、何か原因が特定出来るようでしたら、どうかお教え頂きたく存じます。 宜しくお願い致します。
- ベストアンサー
- CSS
- リンク付きスライドショーの不具合について
先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。 しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・ なんか不自然なので、急いで改善したいです。どうかご協力お願いします！ つくったホームページ→http://www.geocities.jp/raisutei/ A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow a.active { z-index:10; opacity:1.0; } #slideshow a.last-active { z-index:9; } </style></head> <body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript" <table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a> <a href="http://www.geocities.jp/raisutei/okomeconsept.html"> <img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html"> <img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3"> </a></div> </td> </tr> </tbody> </table> ※一部中略しました。
- ベストアンサー
- JavaScript
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ジャバスクリプトが作動しません。
初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>
- ベストアンサー
- JavaScript
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }
- ベストアンサー
- HTML
- meta css javascript 必要性
charset、keywords、robots、Expire等は わかるのですが、 <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> これは、書くことが推奨されるとなっています。 サーバー、ブラウザ間では このタグによって どのような事が おこなわれてるのでしょうか。 サーバー側から css、javascript使ってますよーと ブラウザに情報を わたす？ しかし、タグ自体は サーバー関係あるのだろうか？と、大混乱中。 javascriptの場合、onClick= は javascriptですよーとの宣言との事。 これを指定しなくてもうまくいきますが、ブラウザはなにかわからんけど、javascriptだろうと 勝手に解釈してるということでしょうか。 ちょっと おかしな想像ですが 迷う事はないのでしょうか？ →ブラウザ側での表示までに無駄な考える事を増やしてる？ (相当、小さなものだと思いますが。。) meta javascript と meta ｃｓｓ が なぜ 推奨となってるのか、 書く事の メリット デメリット？ が あれば 意見欲しいです。
- ベストアンサー
- HTML
- javascriptを外部化するべきか
短いjavascriptは外部化するべきでしょうか？それともそのままHTML内に書き込みますか？ このぐらいの長さです。(画像をクリックしたら大きい画像が新しい窓で表示) <script type="text/javascript"> <!-- function imgwin(img){ window.open(""+img, "imgwindow", "width=870,height=585"); } //--> </script>
- ベストアンサー
- JavaScript
お礼
何が問題か、分から無いと言う指摘、ありがとうございます 一からコーディングしましたら、、、問題なく動きました 既存のページにコーディングしたのが、ダメだったようです お手数をおかけしまして、申し訳ありませんでした