• 締切済み

javascript,html,cssについて

ホームページ作成に関して困っており誰かご存知の方がいらしゃったら ご回答の程お願い致します。 アコーディオンメニューをjavascriptを使って作成しました。 しかし、firefoxではうまく表記されるのですがIEで開くと メニューボタンのまわりに枠がでてしまいます。 知識不足申し訳ありませんがご協力お願い致します。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

念のためですが・・ div.section,div.footer{margin-left:165px;} h1{text-align:center;} などで、よけとかないと・・・ HTMLに変なことしてなけりゃ、スタイルシートでどうにでもなります。 HTMLがちゃんとしてれば、googleなんかも、きちんと理解してくれます。 IE8以前は、ゆっくりは開かないですが利用に差し支えはないでしょう。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

スタイルシートのborderに関する設定をすべて取り除いてください。 とても、煩雑で酷いソースなので、これ以上具体的なアドバイスはできません。修正箇所は膨大な数になります。最後に全称セレクタでborder:noneを入れておくとよいようです。  ただ、javascriptを使わなくても、デザインのために変なHTMLを書かなくても、もっと簡単に記述できるものを探したほうが良いように思います。IE8以下で、ゆっくり開くことを期待しなければ、他のすべての標準ブラウザでCSS3を使ってもっと簡単にできます。  そもそも、こんなHTMLやスタイルシートだと、ちょっと項目数が変わったらすべて書き直さなきゃなりません。ましてや、デザインをまったく変えて横並びにしようとしたら不可能でしょ。HTMLには、サンプルのようにデザインのためのものは一切書いたらダメです。 IE9およびfirefox,Opera,GoogleChrome,safariで動作します。 下記は簡単なHTMLです。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) でテスト済みです。確認してください。  スタイルシートの一部のややこしい部分はベンダーフィックスと言って色々なブラウザへの対処です。 注) target属性は非推奨です。 注)タブは、_に置換してあるので戻すこと。 <!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=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- #GlobalNavi dl,#GlobalNavi dl dt,#GlobalNavi dl dd, #GlobalNavi dl dd ul,#GlobalNavi dl dd ul li{ display:block;width:100px;margin:0;padding:0;font-weight:normal; line-height:1.6em;text-align:center;} #GlobalNavi dl dt{font-size:0.9em;line-height:3em;position:relative;border-top:1px solid gray;} #GlobalNavi dl dt:hover{background-color:silver;} #GlobalNavi dl dd{font-size:0.8em;line-height:1.3em;} #GlobalNavi a{text-decoration:none;display:block;width:100%;width:100%;} #GlobalNavi dl dd li{height:0;overflow:hidden;position:relative; -moz-transition-property: height; -webkit-transition-property: height; -o-transition-property: height; -ms-transition-property: height; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out;} #GlobalNavi dl dt:hover+dd li, #GlobalNavi dl dt+dd:hover li{height:1.3em} #GlobalNavi dl dd li a{background-color:silver;} #GlobalNavi dl dd li a:hover{background-color:gray;} --> _</style> </head> <body> _<div class="header"> __<h1>タイトル</h1> __<div class="nav" id="GlobalNavi"> ___<dl> ____<dt><a href="http://www.yahoo.co.jp/">化粧品</a></dt> ____<dd> _____<ul> ______<li><a href="http://www.yahoo.co.jp/">スキンケア</a></li> ______<li><a href="http://www.yahoo.co.jp/">ベースメイク</a></li> ______<li><a href="http://www.yahoo.co.jp/">メイクアップ</a></li> ______<li><a href="http://www.yahoo.co.jp/">UV対策・日焼け止め</a></li> ______<li><a href="http://www.yahoo.co.jp/">ヘアケア用品</a></li> _____</ul> ____</dd> ___</dl> ___<dl> ___<dt><a href="http://www.yahoo.co.jp/">美容アイテム</a></dt> ____<dd> _____<ul> ______<li><a href="http://www.yahoo.co.jp/">ヘアカラー</a></li> ______<li><a href="http://www.yahoo.co.jp/">カラースプレー</a></li> ______<li><a href="http://www.yahoo.co.jp/">アイテープ・アイプチ</a></li> ______<li><a href="http://www.yahoo.co.jp/">美顔器・美顔ローラー</a></li> ______<li><a href="http://www.yahoo.co.jp/">パーマ液</a></li> _____</ul> ____</dd> ___</dl> ___<dl> ___<dt><a href="http://www.yahoo.co.jp/">サプリメント</a></dt> ____<dd> _____<ul> ______<li><a href="http://www.yahoo.co.jp/">ビタミンサプリメント</a></li> ______<li><a href="http://www.yahoo.co.jp/">ビューティサプリメント</a></li> ______<li><a href="http://www.yahoo.co.jp/">酵母・酵素サプリメント</a></li> ______<li><a href="http://www.yahoo.co.jp/">スポーツサプリメント</a></li> ______<li><a href="http://www.yahoo.co.jp/">動物系サプリメント</a></li> _____</ul> ____</dd> ___</dl> ___<dl> ___<dt><a href="http://www.yahoo.co.jp/">健康飲料</a></dt> ____<dd> _____<ul> ______<li><a href="http://www.yahoo.co.jp/">お茶</a></li> ______<li><a href="http://www.yahoo.co.jp/">酢</a></li> _____</ul> ____</dd> ___</dl> __</div> __ _</div> _<div class="section"> __<h2>見出し</h2> __<p>・・・</p> _</div> _<div class="footer"> __<h2>文書情報</h2> _</div> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ちゃんと見ていませんので、推測の回答ですみませんが… >メニューボタンのまわりに枠がでてしまいます。  <a href~~><img src~~ alt~></a> の部分に対して、リンクのデフォルトの青枠線が表示されているのではないかと思います。 CSSの適当な位置に、  dl.accordion dt a img{ border-style:none; } などのように、初期設定として一旦クリアしておけばよろしいのではないかと推測します。 (多分、グレーのセパレータはborderで指定しているのではないかと思いますが、クリアする際の詳細度が高くなりすぎないようにご注意ください)

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • IE8のJavascriptアコーディオンについて

    自サイトで以下のサイトにあるJavascriptアコーディオンを使用しようとしたのですが、IE8でだけ挙動がおかしくなります。 http://www.scriptiny.com/2008/10/animated-javascript-accordion/ 私の記述ミスかと思ったのですが、サイトにあるデモをIE8で表示した時も同じでした。 http://sandbox.scriptiny.com/accordion/index.html 見ていただければわかると思いますが、2つあるデモのうちの上の方のアコーディオンです。開いたり閉じたりすると、隙間のmargin-top:5pxが消えてピタッとくっつくように隙間がなくなってしまいます。互換モードのIE7やFF4、Safari5ではこのような挙動はしません。 たぶん構造的欠陥?ということだと思うのですが、Javascriptの知識がないため、どこをどう修正したら直るのか分かりません。提供元の方にもメールで直接尋ねたのですが、返事をもらえません(新しいバージョンのアコーディオンがあるので、これのサポートをする気がないのかもしれません)。 詳しい方がおられましたら直し方を教えてください。よろしくお願いいたします。

  • JavaScript(ライブラリ)のキャッシュについて

    jQueryやprototypeなどのJavaScriptライブラリを使用して、ホームページに色々な効果をつけています。 その1つで、ナビゲーション箇所に「アコーディオンメニュー」を実装したのですが、ページ遷移する度に読み込みが遅いためか、メニューが全部展開(開いた)状態になってしまいます。 その後3秒~5秒ほどでアコーディオンが閉じた状態になります。 不恰好で困っています。 トップページなど入り口のページはあきらめるとして、他のページに遷移したときは、上記の「メニューが展開する」状態を回避する策はないでしょうか? jquery.js accordion.js というようにサイトのすべてのページに読み込みをしています。 JavaScriptについては「外部ファイルにするとキャッシュが残る」というように聞いたことがありますが、それは一度閲覧したサイトを次回、訪れた際にキャッシュが残っているということでしょうか? それともトップページで一度読み込みをすれば、他のページに遷移したときにトップページで既に読み込みをしたjsファイルがキャッシュされており、引き継がれる(再読み込みをしない)、ということでしょうか? 「アコーディオンがいちいち展開する」ことから、初めて訪れるページは、トップページでもサブページでも、同じjsファイルにもかかわらずいちいち読み込みいくということなのかな・・・と思っているのですが。 JavaScript、JavaScriptライブラリを混同しているような内容で、的はずれな質問をしてしまっているのかもしれませんが、当方、あまり知識を持ち合わせておらず、どうぞご容赦ください。

  • javascript

    こんにちは javascriptのツールについて質問です javascriptを初心者でも簡単に作成できるツールはありませんか? サイトのメニューなどを作ってみたいんですがjavascritの知識はまったくありません 回答おねがいします

  • JavaScriptが動きません

    下記のようなJavaScriptを作りましたが、IE8ではボタンを押しても「ようこそJavaScriptへ」が表示されません。 「F12 Web開発者ツール」というのをチョッとイジったのですが、その為ではないかと思います。 どこをどうイジったか覚えてません。 どうすれば動作するようになるでしょうか、教えてください。 動作状況  サーバーに置いてアクセスした場合は、「FireFox」「IE8」とも表示される。  ローカルデスクに置いてアクセスした場合は、「FireFox」では表示される、「IE8」では表示されない。 ☆OSはWindowsXP。 ☆IE8のセキュリティ設定で「アクティブスクリプト」は「有効にする」になってます。 ------JavaScript----------- <HTML> <BODY> <FORM> <P> <INPUT TYPE="submit" VALUE="ここを押すとメッセージが表示されます" ONCLICK="HelloWorld()"> </FORM> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> <!--Hide script from no-JavaScript browsers function HelloWorld() { alert("ようこそJavaScriptへ"); } //--> </SCRIPT>

  • firefoxでjavascriptが表示されない

    ホームページを制作してるのですが、IE・クロームでは表示されるjavascriptが firefoxでは表示されません。 もちろん、javascriptは有効になっていますし、firefoxでjavascriptが使われてるサイトを見たら ちゃんと表示されています。 javascriptの記述はテンプレをコピペしたので間違ってないはずです。 他の記述の仕方が悪いのでしょうか? 原因のわかる方回答お願いします。

  • オンラインとオフラインでのcssとjavascriptの適用のされ方?

    いろいろ調べてみたものの、どうにも解決できなかったので質問させてください! javascriptとcssを使ったサイトを作っているのですが、次のような障害が生じています。 1.オフラインで作ったときにfirefoxで見たときには、問題なく表示されたものがオンラインではcssが全く適用されていない。 2.1.で作ったものをオンライン上でIEやSleipnirを使ってみると、問題なく表示されるものの、オフラインではjavascriptが働いていない。 3.オンライン/オフラインどちらも正しく表示されるのはOperaとSafariだけ。 4.作成したhtml/css/javascriptはDreamweaverCS3のブラウザ互換性のチェックを問題なくパスする。 このような障害の対策についてご存知の方がいらっしゃいましたら、お教えください。

    • ベストアンサー
    • CSS
  • JavaScriptを貼り付けた後、IEで正しく表示されません。

    はじめまして。 初めてHPつくりに挑戦しているものです。ポータルサイトを作りたいと思い、いろいろしているのですが、JavaScript等の知識は持ち合わせていません。 プルダウンメニューで特定のサイトに一発リンクを張るために、下記のサイトでソースを作成して、ホームページビルダーV9のHTMLソースにコピペして、ビルダー内のプレビューで見るには問題はないのですが、それを、IE6で開くと、「・・・アクティブコンテンツは表示されないようにIEで制御しています。・・・」とポップアップが出てしまいます。 http://www.wiredope.com/online/?_id=sample_tool_2 他のサイトで、同様の方式を使用しているサイトを開いてもこのような制御は現れず、普通にそのページを開くことができます。 ビルダーに単純にソースを貼り付けるだけでは、不十分なのでしょうか?同様にJavaScriptを使用している他のソースを貼り付けても、いつもIE6の制御にひっかかってしまいます。 どのようにHTLMを作れば、IEの制御を受けずに普通にページを開くことができるか教えていただけますでしょうか。よろしくお願い致します。

  • Firefox javascript dreamweaver

    dreamweaver cs3でホームページを作っていてjavascriptのソースが載っているHPを見てまんまコピー・ペーストして作っています。 IEなら、ちゃんと表示されますが、Firefoxで表示してみたら、ちゃんと動作しません。 まだホームページ、インターネットにアップ前です 何が原因でしょうか? vistaでFirefoxは最新バージョンです。

  • Javascriptでタイマーを作成したい

    お世話になります。 Javascriptでタイマーみたいなことを作成したいのですができますか? つまり、ホームページに開始ボタンと停止ボタンを作成して 開始ボタンを押したら0:00:00を時間がアップしていく感じです。1秒から順に 停止を押したらタイマーがストップするみたいなのです。 簡単にJavascriptでできないか探しているのですが見つかりません。 教えてください。 JavascriptでできないのであればCGIでもできればと思っています。 よろしくお願いします。

  • 簡単ホームページでのJavascriptについて

    簡単ホームページを作成し始めました。 メニューのところかメインページに ある日付までのカウントダウンを表示 させたいのですが、 フリー素材のところからJavascriptを もらってきて貼り付けてしまいましたが <script LANGUAGE=JavaScript> </script> と表示されてしまいます。 どこから貼り付ければよいのでしょうか?

このQ&Aのポイント
  • 発達障害でお金の管理ができない人の相談窓口を探しています。お金を管理する方法をネットで調べて実行しているつもりでも、どうしても支払い忘れ、帳尻が合わないということが起きます。
  • スマホのメモ機能等使っても、メモする自体を忘れたり日時を間違えて入力したり、ミスの結果かえってお金がかかることになり、家計がいつまで経っても楽になりません。
  • 家族はおらず、精神障害者の等級は2級になると思います(申請中。以前2級でしたが更新を忘れ、引っ越してしまったので)。定期的に財布や口座をチェックしてもらう、支払い代行等してもらえるサービスは無いのでしょうか。
回答を見る