jQueryのブラウザごとの動作の違いとクロスブラウザ対応について| OKWAVE

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

html, javascript(jQuery)の初歩を使って超小型ウェブサイトを作成致しました。作りたいのは、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示する仕組みです。具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示したいのです。HPのｊｐｇ図を添付させて頂きましたのでご参照頂ければ幸いです。以下のお示し致しましたプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。まことにお手数ですが、誤りをご指摘頂き、正しい記述方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて筋道だった説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。以下はindex.htmlとサブの.htmlファイルの概要とプログラムのリストです。ご多忙中のところ本当に申し訳ありませんがどうぞよろしくお願い申し上げます。ファイルの概要です。１）index.htmlファイル・ホームページ。・DOCTYPE宣言はhtml4.0Transitionalの互換モード。・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> 　はjQueryライブラリーのアクセス宣言。・$(document).ready(function(){　から }) がjavascript (jQuery) ２）pagesフォルダ・today.html, tomorrow.html, space.htmlのファイルを格納。・それぞれ項目の表題と記事を記述するファイル。３）ファイルのディレクトリ・上の２つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。・ディレクトリはそれぞれ　/index.html, /index.html/pages, プログラムのリストです。cssは簡単なので別ファイルにせず直接htmlに書き込みました。１）index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content="HTML5,Web Audio API" /> <meta name="description" content="勉強会です。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>試験</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //初期状態でのロードファイルを指定 $('#contentsBox').load('pages/today.html'); //クリックで各コンテンツを切り替え $('.switchButton').click(function(){ var loadContents = $(this).attr('title'); $('#contentsBox').load('pages/'+loadContents+'.html'); }); }); </script> </head> <body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;"> <style type="text/css"> * { margin:0; padding:0;} ul {margin-left:35px; margin-top: 10px;} ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;} ul a {color:maroon; } div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;} </style> <div style="width:100%; background-color:#800000;"> <h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;"> ここにサイト名<br> </h1> </div> <div class="left-column"> <ul> <li class="switchButton" title="today">今日のできごと</li> <li class="switchButton" title="tomorrow">明日のお天気</li> <li class="switchButton" title="space">宇宙のはじまり</li> </ul> </div> <div id="contentsBox" style="float:right; border-left: medium solid #800000;　width:74.5%; height:100%; background-color:#f8dce0;"> </div> </body> </html> 上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの「jQueryでdiv要素の中身にＨＴＭＬファイルを読み込みボタンで切り替え」から拝借しています。２）pagesフォルダの例えばtomorrow.htmlファイルのリストは <h3 style="margin-left:10px;">明日のお天気</h3> <p style="margin:0px 10px;">平成26年3月7日10時50分気象庁予報部発表... 明日…となる所があるでしょう。</p> です。 today.html, space.htmlも同様です。以上長々と書き連ねました。まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

jQueryでの開閉メニューについて

jQueryでアコーディオン（開閉）メニューを作成しています。メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。皆様の知恵をご教示いただけると幸いです。以下ソースです。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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" /> <script type="text/javascript" src="../js/jquery/jquery.js"></script> <script> </script> <style type="text/css"> .leftmenu { float: left; width: 200px; background: #ff0000; list-style: none; } .leftmenu h4 { padding: 0; /* margin: 0;*/ margin: 5px 2px 5px 5px; } .leftmenu ul { padding: 0; margin: 0; list-style-type: none; } .leftmenu li { padding: 0; margin: 0; } .leftmenu a, .leftmenu a:visited { #text-transform:uppercase; display: block; height: 25px; line-height: 25px; padding: 0 10px 0 20px; color: #ffffff; background: #303030; text-decoration: none; } .leftmenu a:hover { color: #000; background-color: #acac23; } .leftmenu span{ float:right; } </style> <title>sample</title> </head> <body> <div class="wrapper"> <div class="leftmenu"> <h4 class="conmenu">Menu-1</h4> <ul class="sub"> <li><a href="#">Menu-1a</a></li> <li><a href="#">Menu-1b</a></li> <li><a href="#">Menu-1c</a></li> <li><a href="#">Menu-1d</a></li> </ul> <h4 class="conmenu">Menu-2</h4> <ul class="sub"> <li><a href="#">Menu-2a</a></li> <li><a href="#">Menu-2b</a></li> <li><a href="#">Menu-2c</a></li> <li><a href="#">Menu-2d</a></li> <li><a href="#">Menu-2e</a></li> </ul> <h4 class="conmenu">Menu-3</h4> <ul class="sub"> <li><a href="#">Menu-3a</a></li> <li><a href="#">Menu-3b</a></li> <li><a href="#">Menu-3c</a></li> </ul> </div> </div> </body> </html>

はみ出た部分が切れるように表示したいのですが

以下のHTMLですと、2個目のliの１２３…が2行目に表示されてしまいますが、これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか？実際には1個目のliの長さが可変なため、HTMLと文字列（１２３…）を変えるのでなく CSSでなんとかしたいのです。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">１２３４５６７８９０</a></li> <li class="li2"><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> </ul></div> </body> </html>

ホームページの質問です。

ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ちょっと自信ありません。 <!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" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。

DIVタグの背景に画像を配置できない

<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。パスは間違っていませんが。どこが違うのでしょうか？宜しくお願いします。

ドラッグによるスライド移動をさせない方法(safari/chrome)

お世話になります。早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、このテキストボックスでドラッグしてスライドの領域外へ移動させると次のスライドへ移動してしまいます。（safari と google chrome のみ）これを移動させないよう固定する方法はありませんでしょうか？以下にソースコードを載せておきます。 ------------------------------------------------------- <html> 　<head> 　　<title>Easy Slider TEST</title> 　　<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> 　　<script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> 　　<script type="text/javascript"> 　　　$(document).ready(function(){ 　　　　$("#slider").easySlider(); 　　　}); 　　</script> 　　<style type="text/css"> 　　　#slider{} 　　　#slider ul{ 　　　　list-style-type:none; 　　　　margin:0px; 　　　　padding:0px; 　　　} 　　　#slider ul li{ 　　　　height:100px; 　　　　width:300px; 　　　} 　　</style> 　</head> 　<body> 　　<div id="slider"> 　　　<ul> 　　　　<li><div style="height:100%; background-color:#aaa;"> 　　　　　<input type="text" name="text" value="slide-1" /> 　　　　</div></li> 　　　　<li><div style="height:100%; background-color:#bbb;">slide-2</div></li> 　　　　<li><div style="height:100%; background-color:#ccc;">slide-3</div></li> 　　　</ul> 　　</div> 　</body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。

jqueryのドロップダウンメニュをアメブロに。

ドロップダウンメニューを現在、活動しているアメブロに設置したくて jqueryを利用したものがあるのを知りさっそく本を買ってサンプルを見ながら自分なりの手をほんの少しだけ加えて作ってみたのですが PC上では上手く動作してはいるもののアメブロに設置するとなると禁止タグや htmlなど、制限があるらしく試行錯誤しても上手くいかず…。どうしても、ここまでやったからには設置してみたいとは思いつつもどこに、どのようにすればいいものか全くわからないのでお力を借りたいと思いokwaveに登録してみました。設置の仕方や、余計な箇所や改善箇所などお分かりになる方ぜひ、教えてください。よろしくお願いいたします。 <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> <style type="text/css"> *{ margin:0; padding:0; list-style-type:none; } #container{ margin:100px auto; width:800px; } ul.menu li{ float:left; width:200px; height:40px; background:url("画像URL1"); position:relative; } * html ul.menu li{ display:inline; zoom:1; } *+html ul.menu li{ display:inline; zoom:1; } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("画像URL2"); } ul.sub{ display:none; } * html ul.sub{ zoom:1; position:relative; } *+html ul.sub{ zoom:1; position:relative; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } </style> </head> <body> <div id="container"> <ul class="menu"> <li><a href="#"><img src="画像URL3" align="left" width="200" height="40 "border="0"></a> </li> <li><a href="#"><img src="画像URL4" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL5" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL6" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL7" align="left" width="200" height="40 "border="0"></a></li> </ul> </li> <li><a href="#"><img src="画像URL8" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL9" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL10" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL11" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL12" align="left" width="200" height="40 "border="0"></a></li> ・・・・　字数制限があるので省略します…。・・・・ </ul> </div> </body> </html> 　 ※　もっと簡潔なやり方があるとは思うのですが　　　無い知恵を振り絞った結果で　　　画像３～は　　　オリジナルのフォントを使いたいが為に　　　透過の画像でオリジナルフォントを　　メニュ背景画像の上に使っています。

HTML・CSSタグの書き方教えてください！

画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、変わらず…。どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？よろしくお願いいたします。＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> <div id="main"> <div id="contents"> ***コンテンツ*** </div> <div id="leftsidebar"> ***左サイドバー*** </div> </div> <div id="rightsidebar"> ***右サイドバー*** </div> <div id="footer"> ***フッター*** </div> </div> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }

IE6でli間に出来る隙間を無くす方法について

下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!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" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>

ドロップダウンメニュー

ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですがメニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことはできるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div> </div> </body> </html>

jqueryを使ったスクロール画面が正しく作動しません。

jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。よろしくお願いいたします。 <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>     テスト</span> </div> </div> </div> </body> </html>

jquery ulのtab切り替えについて

昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。

ｊQueryでulを動かしたい。

javascript初心者です。 jQueryを使ってみようとしています。ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。調べてみるとanimateが使えそうなので、 window.onload = function(){ 　　$("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。教えていただけるとありがたいです。お願いしますm(__)m

jqueryの tabを使用して外部リンクをしたい

jqueryの tabを使用して外部リンクをしたいこのサイトの下の方のマウスオーバーで切り替えを使用しているのですがタブをマウスオーバーで切り替えつつ、タブ部分をクリックしたら外部にリンクさせるようするにはどうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。初心者で大変申し訳ありませんが、ご教授ください。とても困っています。よろしくお願いいたします。 ************************************************************* <!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" /> <title>無題ドキュメント</title> <head>  <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript">  </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> </div> </div> </body> </html>

CSS 横並びリストの書き方はどちらがよいでしょうか

スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css">  </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>

初心者です　画像横に文字を入れたい　ｃｓｓ

web制作を始めたばかりの初心者です。画像右側に文字を入れたいのですが、うまくいきません。本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。どうぞご教示ください。 html <ul> 　　　　<li><a href="index.htm"><img src="画像"width=""height=""></a></li> 　　　　<div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> 　　 <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}

CSS・IEでボーダーを表示したい

お世話になります。ホームページ構築(CSS)に関する質問です。よろしくお願いします。フリーのCSSサンプルサイトより、ソースをいただいて、ページを作ってみたのですが。ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、表示されているのですが、なぜかIEでは表示されません。まだ理解が足らないのですが、「#navigation li a」の「border-right: 1px double#fff;」あたりかなと思い、線種を変えてみたりと、いろいろしているのですが変化がありません。変更すべき点をどうかご教授ください。以下は実際のソースです。「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。どうかよろしくお願いします。

html+cssでfloatに関して

このやり方に問題があるかどうかを教えてほしいのと、もっといいやり方があれば教えて頂きたいです。まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。ソース <!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"> <style type="text/css"></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>

Jqueryで画像タイトル表示させる

ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォトギャラリーサンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。

html5+jqueryでリンクが反映されない

html5+css3でスマートフォン向けサイトをコーディングしています。タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。 http://designdrill.jp/wordpress/?p=5082 表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> このように問題無く表記されているのですが、クリックしても何も反応しません。動作確認はPCでしています。ソースは以下の通りです。 ※オリジナルの方はjquery-1.7.min.jsでしたが、1.8.2使用です。 html部分------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#textArea>div").hide(); var select_id = 1; $("#btn_" + select_id).addClass("selected"); $("#txt_" + select_id).show(); $('#tab').on("click touchstart", "li:not(.selected)",function() { var click_id = this.id.split("_")[1]; var myColor = $("#btn_" + click_id).css("background-color"); $("#textArea").css("background-color", myColor); //alert(myColor) $("#btn_" + select_id).removeClass("selected"); $("#txt_" + select_id).hide(); $("#btn_" + click_id).addClass("selected"); $("#txt_" + click_id).show(); select_id = click_id; }) }) </script> </head> <body> <section id="tab"> <ul> <li id="btn_1" class="yellow">google</li> <li id="btn_2" class="pink">yahoo</li> <li id="btn_3" class="blue">apple</li> </ul> <div id="textArea"> <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> <div id="txt_2">yahooの説明文</div> <div id="txt_3">appleの説明文</div> </div> </section> css部分------------------- #tab { -webkit-tap-highlight-color: rgba(0,0,0,0); /* デフォルトのタップハイライトを停止 */ } #tab ul { margin: 10px; } #tab ul li { float: left; padding:5px 15px 5px 15px; border-top: 1px #ddd solid; border-left: 1px #ddd solid; border-right: 1px #ddd solid; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; color: #999; height:15px; line-height:15px; margin: 5px 0px 0px 5px; } #tab ul li.selected { color: #000; height:20px; line-height:20px; margin: 0px 0px 0px 5px; } #textArea{ position:relative; top:-1px; z-index:-1; clear:left; background-color:#ffd; margin:0px 10px 10px 10px; padding:10px; height:100px; border: 1px #ddd solid; -webkit-border-radius: 5px; } .yellow{ background-color:#ffd; } .pink{ background-color:#fdf; } .blue{ background-color:#dff; } 見た目とタブをクリックして同一ページ内で遷移する動きは希望通りですが、リンクが反映されない点だけが難点です。（テキスト内のリンクは内容上必須です）今現在、完全に煮詰まっていますのでヒントだけでもいただけたらと思い投稿しました。よろしくお願い致します。

jQueryのブラウザごとの動作の違いとクロスブラウザ対応について

jQueryの働きがブラウザにより異なる。

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

お礼 2014/04/22 21:35

その他の回答 (1)

補足 2014/04/18 20:04

関連するQ&A

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

jQueryでの開閉メニューについて

はみ出た部分が切れるように表示したいのですが

ホームページの質問です。

DIVタグの背景に画像を配置できない

ドラッグによるスライド移動をさせない方法(safari/chrome)

jqueryのドロップダウンメニュをアメブロに。

HTML・CSSタグの書き方教えてください！

IE6でli間に出来る隙間を無くす方法について

ドロップダウンメニュー

jqueryを使ったスクロール画面が正しく作動しません。

jquery ulのtab切り替えについて

ｊQueryでulを動かしたい。

jqueryの tabを使用して外部リンクをしたい

CSS 横並びリストの書き方はどちらがよいでしょうか

初心者です　画像横に文字を入れたい　ｃｓｓ

CSS・IEでボーダーを表示したい

html+cssでfloatに関して

Jqueryで画像タイトル表示させる

html5+jqueryでリンクが反映されない

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

jQueryのブラウザごとの動作の違いとクロスブラウザ対応について

jQueryの働きがブラウザにより異なる。

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

お礼 2014/04/22 21:35

その他の回答 (1)

補足 2014/04/18 20:04

関連するQ&A

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

jQueryでの開閉メニューについて

はみ出た部分が切れるように表示したいのですが

ホームページの質問です。

DIVタグの背景に画像を配置できない

ドラッグによるスライド移動をさせない方法(safari/chrome)

jqueryのドロップダウンメニュをアメブロに。

HTML・CSSタグの書き方教えてください！

IE6でli間に出来る隙間を無くす方法について

ドロップダウンメニュー

jqueryを使ったスクロール画面が正しく作動しません。

jquery ulのtab切り替えについて

ｊQueryでulを動かしたい。

jqueryの tabを使用して外部リンクをしたい

CSS 横並びリストの書き方はどちらがよいでしょうか

初心者です 画像横に文字を入れたい ｃｓｓ

CSS・IEでボーダーを表示したい

html+cssでfloatに関して

Jqueryで画像タイトル表示させる

html5+jqueryでリンクが反映されない

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

初心者です　画像横に文字を入れたい　ｃｓｓ

カテゴリ
一覧

専門家に質問してみよう
専門家登録