締切済み

javascript,html,cssについて

2012/09/26 17:02

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

phat_life08
お礼率27% (3/11)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/27 00:23 回答No.3

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

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/26 19:58 回答No.2

スタイルシートのborderに関する設定をすべて取り除いてください。とても、煩雑で酷いソースなので、これ以上具体的なアドバイスはできません。修正箇所は膨大な数になります。最後に全称セレクタでborder:noneを入れておくとよいようです。　ただ、javascriptを使わなくても、デザインのために変なHTMLを書かなくても、もっと簡単に記述できるものを探したほうが良いように思います。IE8以下で、ゆっくり開くことを期待しなければ、他のすべての標準ブラウザでCSS3を使ってもっと簡単にできます。　そもそも、こんなHTMLやスタイルシートだと、ちょっと項目数が変わったらすべて書き直さなきゃなりません。ましてや、デザインをまったく変えて横並びにしようとしたら不可能でしょ。HTMLには、サンプルのようにデザインのためのものは一切書いたらダメです。 IE9およびfirefox,Opera,GoogleChrome,safariで動作します。下記は簡単なＨＴＭＬです。 ★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">  ＿</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)

2012/09/26 19:04 回答No.1

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

javascript,html,cssについて

みんなの回答

注目のQ&A

カテゴリ

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

専門家に質問してみよう