jQueryのブラウザごとの動作の違いとクロスブラウザ対応について
- jQueryを使用してウェブサイトのひな型を作成しています。
- 上位ブラウザ（FirefoxとSafari）では期待通りの動作をしているが、下位ブラウザ（IEとChrome）では問題が発生している。
- クロスブラウザの問題か、初心者のミスか分からず困っている。解決策や参考になるサイトや書籍を教えてほしい。
- ベストアンサー
jQueryの働きがブラウザにより異なる。
html, javascript(jQuery)の初歩を使ってウェブサイトのひな型を作成致しました。 目的は、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示するサイトを作ることです。 具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示させたいわけです。このＨＰのイメージ画像を添付させて頂きました。 下のプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。 このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。 まことにお手数ですが、誤りをご指摘頂き、正しい方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて分かり易い説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。 以下はindex.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も同様です。 以上です。 まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。
- Jim_Tenchi
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
httpd というのはWebサーバソフトの総称です。 ご自身のパソコンの中でWebサーバソフトを動かすことで、いちいちサーバにアップロードせずに動作確認が出来るようになります。 Windows環境であれば、マイクロソフト純正のIISというソフトを利用する方法があります。 「Windowsの機能の有効化または無効化」からインストールする事が可能です。 他には、Webサーバソフトとして有名なApacheをインストールして利用する方法も有ります。 Apacheだけをインストールしようとすると若干面倒ですが、XAMPPというパッケージがありApacheの他、データベースサーバやPHP、Perlといったプログラミング言語をまとめてインストールしてくれ、ご自身のパソコン内でのテスト環境として使用する場合は面倒な設定も必要無くて楽チンです。 XAMPPは利用されている方も多いので検索すると沢山情報が出てきます。
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5080/13274)
サーバにアップするか、ローカルでhttpdを動かしてテストすると正常に動作すると思います。 セキュリティー等の問題で、ローカルファイルへのAjax通信が制限されているブラウザではjQueryのloadでローカルファイルを読み込めない場合があります。
補足
この質問にご回答をお寄せ頂きありがとうございました。 厚く御礼申し上げます。 これと同じ内容の質問（4つの内２つのブラウザ（IEとGC）で動作しない）にもご回答を頂きましたが、当方の手違いで締切となり、御礼を申しあげる機会を失してしましました。失礼いたしましたこと、お許し頂きますようお願い致します。 さて、ご教示の一つはアップロードすれば動作するだろうと云うものでありました。何度か試みておりますが、現在の所うまく働いてくれません。これにつきましてはさらに試みてまたご報告させて頂きたいと考えております。 もう一つは、httpdを動かしてテストすると正常に動作するだろうとのご教示でした。 知識がなく、たいへんお恥ずかしいのですが、httpdを動かすということの具体的な意味が理解できません。従いまして、どのような対処をすればよいのか皆目見当がつかない有様です。 誠に申し訳ございませんが、httpd を動かす手順について、ここで投稿させて頂いておりますプログラムにそって、今少し具体的に、順を追ってご教示を頂くわけには参りませんでしょうか？お手数をお掛けすることになるのでしょうが、どうぞよろしくお願い致します。 あるいはこの方法と意義について、基礎的な勉強ができる分かり易い解説サイトあるいは書籍などをご紹介頂けませんでしょうか？ まことに恐縮ですが、どうぞよろしくご教授を頂きますようお願い致します。 お忙しいところ迅速なご教示を頂きましたのに御礼が遅れましたこと重ねてお詫び申し上げます。
関連するQ&A
- 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も同様です。 以上長々と書き連ねました。まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。
- 締切済み
- JavaScript
- 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><!-- $(document).ready(function(){ var marks = { closedMark: '[+]', openedMark: '[-]' }; //開閉状態表示 $("h4.conmenu").append("<span>"+ marks.closedMark +"</span>"); //オンマウスでカーソル変更 $("h4.conmenu").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); //最初に表示するか？ $("ul.sub").css("display","none"); //クリック処理 $('h4.conmenu').click(function(){ // 開閉する速度 $(this).next().slideToggle('fast'); // マークを変える // $(this).find("span").html(marks.openedSign); }); }); //--> </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>
- ベストアンサー
- JavaScript
- はみ出た部分が切れるように表示したいのですが
以下の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>
- ベストアンサー
- CSS
- ホームページの質問です。
ホームページの質問です。 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"> <!-- #iti { height: 25px; width: 300px; background-color: #FCF; float: left; clear: both; } #iti p { margin: 0px; } .ni { background-color: #9CF; height: 300px; width: 300px; float: left; clear: both; } ul { padding: 0px; margin: 0px; } ul li { width: 80px; float: left; height: 30px; background-color: #090; } --> </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> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。
- ベストアンサー
- 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」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- ドラッグによるスライド移動をさせない方法(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 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 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> ※ もっと簡潔なやり方があるとは思うのですが 無い知恵を振り絞った結果で 画像３～は オリジナルのフォントを使いたいが為に 透過の画像でオリジナルフォントを メニュ背景画像の上に使っています。
- ベストアンサー
- JavaScript
- 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><!-- header終わり --> <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><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </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; }
- ベストアンサー
- HTML
- 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"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </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>
- ベストアンサー
- CSS
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルが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><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
お礼
t_ohta さま 早速ご回答を頂きましてありがとうございました。 話の巾が一挙に大きくなってしまいましたが、それでもサーバ側の知識を多少とも備えることで、ウェブをつくる際の見通しは随分と良くなるのではないかと期待しております。 ご教示頂きましたXAMPPにつきまして勉強させて頂きます。 勉強を進めればまた難しいお話に出くわすでしょうが、その時には改めてご教示を仰ぎたいと考えております。 大所高所の目線で適切なご教示を頂きありがとうございました。 重ねて御礼を申しあげます。 Jim Tenchi