- ベストアンサー
webのナビメニューで、どうしても解決しません！
- webのナビメニューで、IE8とその他のブラウザで表示が異なる問題が発生しています。
- IE8では右端のメニューが改行され、Chrome、Firefox、Safariでは正常に表示されます。
- 逆にChrome、Firefox、Safariに合わせるとIE8では右端に余白ができます。なぜこのような問題が発生するのでしょうか？
- gfkdfs
- お礼率26% (37/139)
- その他([技術者向] コンピューター)
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
ホームページビルダーですか？ やっと犯人が突き止められましたね。(^^) ⇒ホームページビルダーでのホームページ作成方法 [TempNate HP設置マニュアル]( http://tempnate.com/hp_making/hpbuilder.html ) ホームページビルダー DOCTYPE 変更 - Google 検索( https://www.google.co.jp/search?q=%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%20doctype%20%E5%A4%89%E6%9B%B4 ) という風に探せば良いです。 今回は、transitinalでの標準モードですから <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> に変更します。 HTMLとスタイルシートを書き換えて、DOCTYPEを書き換えることで、問題は解決すると思います。サイズなどは調整してください。 ★しかし、将来的には、strictDTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> にするべきです。なにせ、もう12年も前に 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』と勧告されて久しいのですからね。 ビルダーは、どちらかと言うと家庭用で、HTMLが本来持っているものではなく、ワープロのようにイメージどおりの印刷物を作るような感覚でウェブページをとりあえず作成するソフトです。 作成したウェブサイトの影響( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E4.BD.9C.E6.88.90.E3.81.97.E3.81.9F.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.82.A4.E3.83.88.E3.81.AE.E5.BD.B1.E9.9F.BF ) strictだと、HTMLを書くのはとても楽になります。#6のサンプルはとかすにそかです。そのまま次期HTML5になります。例としてHTML5に書き換えたものを最後にあげておきます。 HTML5では、文書の内容を読んで内容/文書構造にあうHTMLを書かなければならなくなります。こうなるとビルダーのようなツールだけでは不可能な作業になります。 必然的に、著者が文章の内容を理解したうえで、それを正しく示すタグ(要素)でマークを選択する部分は人がしなくてはならなくなります。サンプルを見られてお分かりのように、誰が見ても文書の構造などが一目瞭然だと思います。ということは検索エンジンにも理解できるということ!!! 『HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的であることから、一部のウェブデザイナーには見直されつつあり、( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )』 ★文字コードはUTF-8です。 ^^^^^^^^^^^^^^^^^^^^^^^ <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <!--[if IE]> <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]-->＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- html,body{margin:0;paddin:0;background-color:gray;} header,section,footer{ width:100%;min-width:480px;max-width:980px; margin:0 auto;background-color:white; } h1,h2,h3,p{margin:0;line-height:2em;} /* ここから */ header nav{ position:relative; font-size:12px; width:100%; height:33px; line-height:22px; /* 行中央に(12+5+5) */ } nav h2{display:none;} nav ul,nav ul li{ list-style:none;display:block; text-align:center; margin:0;padding:0;/* と初期化しておきます。 */ } nav ul li{ /* display:inline-block;*/ float:left; width:16.5%; /* ６個なので100/6 = 16.(6) /* paddingは事前に0にしてある★ブラウザ間の解釈差を回避 */ } nav ul li a{ display:block; width:auto; border:outset #33ffff 5px; background-color: #3399ff; color:white; text-decoration:none; width:100%;height:100%; white-space:pre; overflow:hidden; } nav ul li a:hover{background-color:yellow;color:black;} nav ul li a:active{border-style:inset;} --> </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<nav> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ul> ＿＿＿＿<li><a href="A">ホーム</a></li ＿＿＿＿><li><a href="B">海外ビジネス情報</a></li ＿＿＿＿><li><a href="C">引き合い</a></li ＿＿＿＿><li><a href="D">ブログ</a></li ＿＿＿＿><li><a href="E">プロフィール</a></li ＿＿＿＿><li><a href="F">コンタクト</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
その他の回答 (7)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞この長ーいい横棒はなんですか？ 文章を読む訓練をしてください。 No.回答 ＞ タブは＿に置換してありますから必ず戻してください。 ＞そもそも、"http://www.w3.org/TR/html4/strict.dtd"> をクリックしても開かれません。 これは、DTD名前空間の指定で、ブラウザに対して、どの名前空間に所属するDocmentであるかを指示しているだけで、開く必要はありません。 No.1の回答も含めて、とにかく読み取ってください。分からない単語は、調べてください。それが一番の上達への近道です。
補足
度々、有り難うございます。 このサイトで理解できました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1220132172 このサイトでは、クリックすれば開くのに、この相談箱では開けませんね～。 ですが、確かにソフトのｈｐビルダーでは、記述しても削除されてしまうのです。もう仕方ないですね！ 削除されるってことは、もしかすると記述しなくてもソフトで認識されるような仕組みなっているのでしょうかね？ テキストに書いて、<!--#include file="○○○.txt"-->で呼び込むようにすればいいのですかね？ ですが、理屈としては削除されるでしょうね。。まだやってませんが・・ とにかく、削除される原因が分からないと記述していいのかなぁー？って不安があります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ｑ５ HTMLを作製するソフトでHTMLを記述する段階です。 これは、マニュアルを参考にしてDOCTYPEを変更してください。 これが、すべての要因ですから!! 互換モードで表示するDOCTYPEだと、互換モードで動作する古いIEと、今後のIEを含めウェブ標準のブラウザ間の表示差を吸収することは不可能だったり、ややこしく万能でもないベンダーフィックスを書いたり、HTMLやCSSを正当でないものに書き直したり、いい事はなにもありません。 できれば、テキストエディタがお勧めです。 ウェブ上では、良いデザインがたくさんありますが、単にそれをコピーペーストしただけでは応用が利きません。デザインやアイデアは大いに参考にしましょう。しかし、仕組みはきちんと理解して必要なら仕様書を読んで理解してから使いましょう。そうすると上達も早いですし、様々な場面で応用が出来ます。 とりあえず、サンプルを上げておきます。以下説明です。出来るだけわかりやすいように書いたつもりです。 分からない部分は 仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc ) や CSS2 リファレンス - CSS Dencitie( http://www6.plala.or.jp/go_west/nextcss/ref/index.html ) のようなちゃんとしたリファレンスを読んで理解しましょう。 ★このまま、メモ帳にコピーしてブラウザで確認してみましょう。 タブは＿に置換してありますから必ず戻してください。 ★参考になるようにHTML4.01strictで作成しています。CSSは2.1 ・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) 右上のDATAタブから・・ ・W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックしてみてください。 ★古いIE(5.5)にも対応させるためfloatを使ってます。 モダンブラウザのみならinline-blockを使う ★サンプルは、ボタンの幅を%で指定してあるリキッドですからスマホでも幅広ディスプレイでもOK ★ポイントは、paddingを指定していないことくらいかな 互換モードとの差が出る要因ですから ★とにかく理解して使いましょう。 若いのですから、頑張ってくださいね。私もそう教えられて頑張ってきたのですから--もう還暦過ぎたけど(^^)-- <!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"> <!-- html,body{margin:0;paddin:0;background-color:gray;} div.header,div.section,div.footer{ width:100%;min-width:480px;max-width:980px; margin:0 auto;background-color:white; } h1,h2,h3{margin:0;line-height:2em;} /* ここから */ div.nav{ position:relative; font-size:12px; width:100%; height:33px; line-height:22px; /* 行中央に(12+5+5) */ } div.nav h2{display:none;} div.nav ul,div.nav ul li{ list-style:none;display:block; text-align:center; margin:0;padding:0;/* と初期化しておきます。 */ } div.nav ul li{ /* display:inline-block;*/ float:left; width:16.5%; /* ６個なので100/6 = 16.(6) /* paddingは事前に0にしてある★ブラウザ間の解釈差を回避 */ } div.nav ul li a{ display:block; width:auto; border:outset #33ffff 5px; background-color: #3399ff; color:white; text-decoration:none; width:100%;height:100%; white-space:pre; overflow:hidden; } div.nav ul li a:hover{background-color:yellow;color:black;} div.nav ul li a:active{border-style:inset;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ul> ＿＿＿＿<li><a href="A">ホーム</a></li ＿＿＿＿><li><a href="B">海外ビジネス情報</a></li ＿＿＿＿><li><a href="C">引き合い</a></li ＿＿＿＿><li><a href="D">ブログ</a></li ＿＿＿＿><li><a href="E">プロフィール</a></li ＿＿＿＿><li><a href="F">コンタクト</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<p>記事</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
この長ーいい横棒はなんですか？ ＿＿<h2>文書・・
補足
そもそも、"http://www.w3.org/TR/html4/strict.dtd"> をクリックしても開かれません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
う～ん。困りましたね。 ＃２ 「なにかツールか何かで自動作成ですか？？」 意味が分かりません。 テキストエディタではなく、オーサリングツールを使っていると、DOCTYPEを書き換えてしまうものがあります。(例)DW:設定で変更できます。CMS:サーバー側の設定ですからいかんともしがたい。 ＃３ <A Hhref="****.shtml">○○○</A>の連続です。 ｃｓｓでボタンが表示されます。 ボタンは#3への補足で「ボタンの画像は＃１の補足のcssのとおりです・・」と書かれて間いますが、#1のコメントには画像は書かれていません。 background-image:url(); とか・・ 「ウィンドウ幅に合わせて伸縮させてますか？」 そんなｃｓｓってありますか？ はい、IMGは置換インライン要素に分類される要素ですから、置換される画像のサイズになるのですが。 <p><img src="[URL]" width="240" height="80" alt="テスト"></p> だと、240px幅になります。 しかし、スタイルシートでブロック要素に変更すると、他のブロック要素と同じようにコンテナブロック(厳密には、static以外の直近の親コンテナブロック)のサイズを参照できます。p{width:80%;}と同じように。 Q4 #1で言われる画像というのは、実際に画像ではなく 「ボタンのようにスタイルシートで表示させている」という解釈で良いですか？？？ Q5 それと、DOCTYPEを書いても、削除されて違うものに置き換えられるのは、作業のどの段階でしょう。テキストエディタではないのですか？ Q6 ボタンが画像でしたらそのサイズやパス・ファイル名を教えてください。 ./images/button/top.gif width:120 height:80 というふうに、画像を使わないのでしたら不要です。
補足
q4 はい。そのとおりです。 ｑ５ ｈｐを作製するソフトでｈｔｍｌを記述する段階です。 ｑ６ 画像ではありません。ｃｓｓです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2への補足 ＞これを記述しても"http://www.w3.org/TR/html4/loose.dtd"は削除されて記述できません。 えっ!! なにかツールか何かで自動作成ですか？？ なら、作者側での対策はこの方法ではダメということに。 No.3への補足 ＞<A Hhref="****.shtml">○○○</A>を６つ並べているだけです。 えっ、それじゃ <div class="nav"> <p> <a href=""><img src="" width="" height="" alt=""></a><a href=""><img src="" width="" height="" alt=""></a><a href=""><img src="" width="" height="" alt=""></a><a href=""><img src="" width="" height="" alt=""></a><a href=""><img src="" width="" height="" alt=""></a><a href=""><img src="" width="" height="" alt=""></a> </p> </div> と言う事ですか？？なら、はじめから行内要素だけですから、floatやdisplay:block; は不要です。画像は置換インライン要素ですから。 Q: ボタン画像は、文字まで含んだ画像ですか？ Q: 単にテキストでCSSで画像を背景として置いているのですか？ 上記いずれも画像にborderまで入れたほうが良いのですが？？ Q: 画像のサイズは？ ウィンドウ幅に合わせて伸縮させてますか？
補足
＃２ 「なにかツールか何かで自動作成ですか？？」 意味が分かりません。 ＃３ <A Hhref="****.shtml">○○○</A>の連続です。 ｃｓｓでボタンが表示されます。 「ウィンドウ幅に合わせて伸縮させてますか？」 そんなｃｓｓってありますか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞strictとは厳密なhtmlみたいですが、これって間違っていたらナビ以外も壊れてしまいませんかねぇー？ それはないです。文法的に間違っているということとは別です。 リストと言うことなので、想像では <div class="nav"> <h2>サイトマップ</h2> <ul> <li><a href=""></a></li> <li><a href=""></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 class="nav"> <h2>サイトマップ</h2> <ul> <li><a href=""></a></li ><li><a href=""></a></li ><li><a href=""></a></li ><li><a href=""></a></li ><li><a href=""></a></li ><li><a href=""></a></li> </ul> </div> とすることもあります。後で分かります。 ulやliには、marginやpaddingがブラウザのもつスタイルシートにはありまし、ブラウザごとに異なりますから。 div.nav{ position:relative; font-size:12px; line-height:25px; /* 行中央に */ } div.nav ul,div.nav ul li{ margin:0;padding:0; list-style:none;display:block; text-align:center; } /* と初期化しておきます。 */ div.nav ul li{ display:inline-block; float:left;/* IE7以前を対応するならfloat,そうでなければコメントアウト */ width:16.5%; /* ６個なので100/6 = 16.(6) /* paddingは事前に0にしてある★ブラウザ間の解釈差を回避 */ } div.nav ul li a{ display:block; width:auto; border:outset #33ffff 4px; background-color: #3399ff; color:white; } div.nav ul li a:hover{background-color:yellow;color:black;} div.nav ul li a:active{border-style:inset;} この程度かな(^^) リキッドですから、ブラウザの幅を変更しても６個並ぶはず。 ^^^^^^^^^^^^^^^^^^^ floatだとIE5以降はすべてきちんと並ぶはずです。あまり好きじゃないけど。
補足
いやいや、私は相談文中にもありますが単に<A Hhref="****.shtml">○○○</A>を６つ並べているだけです。 ボタンの画像は＃１の補足のcssのとおりです・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、transitinalで標準モードで動作させるDOCTYPEは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> だと、互換モード（Quirks） です。 とりあえず、これで解決するとは思います。 今後は、strictで作成していきましょう。 いずれ時代はそうなるのですから。 なにせ、HTML作成するのがとっても楽になります。HTMLには、文書構造しか書かないのですからね。 そのときに、HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#toc )を参考に、HTML4.01strictで作成するのが早道です。特に、divのclass名は!!! <body> <div clas="header"> <div class="nav"> <ul> <li><a href=""></a></li> ・・・・ </div> <div class="section"> なんて、HTML5の新しい要素をdivのclass名にして作成すると、そのままHTML5に移行出来ますし、HTMLの仕組みも理解できるし、しかもHTML4.01strictの練習にもなります。 HTML4.01の『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』を理解する早道です。 とりあえず、DOCTYPEを上記に書き換えてみてください。
補足
そもそも <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これを記述しても"http://www.w3.org/TR/html4/loose.dtd"は削除されて記述できません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たぶん理由は互換モード DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81 )で標準モードで起動するようにしておけば良いです。 [理由] 古いIEはコンテナブロックの解釈が間違っていいため、それに合わせて作られたページを表示するためのモードが互換モードです。代表的なものが、標準モードではpadding辺の内側が(コンテナ)ボックスのサイズですが、互換モードではborder辺の外側だったりします。 [対処] ★ブラウザが標準モードで起動するようにDOCTYPEを書きます。 ★strictでページを作成する。 「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」とHTML4.01の勧告(1999年)以来、さすがにtransitinalで作成することはないでしょうが、strictで作成すること。XHTML1.1、HTML5にはtransitinal的なものはないですが。 このふたつの対策で、その手のトラブルはないでしょう。
補足
有り難うございます。 １番 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> この記述は書いていますが、これではないのですかね・・ ２番 strictとは厳密なhtmlみたいですが、これって間違っていたらナビ以外も壊れてしまいませんかねぇー？ 私の場合、問題はナビメニューだけなんですが・・ 特にｃｓｓにおかしいところってないとおもいますが。うんー。。困りました。 /*ナビメニュー*/ div.navi a{ font-size :12px; border:outset #33ffff 4px; background-color: #3399ff; color:white; margin:0px 0px 0px 0px;/*間隔１*/ padding:0.25em; display:block; width:15%; float:left; } div.navi a:hover{ border:inset #33ffff 4px; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
色々とすみません。 根本的な疑問が生じてきました。 （疑問） 今回はｃｓｓで作ったメニューボタンのみの問題です。他は今のところ全くどのブラウザも問題ありません。 よって、変更はｃｓｓのボタンでは無しに画像ファイルをメニューに使わなければ駄目だと解します。 （他方） １ UTF-8ですが、これってスマホとかがこれになり、googleなんかも確か移行するとかの宣言があるみたいですね。 今私はシフトjisですが、これとそれ程大きな差はないでしょうね（文字コードが） ２ 沢山のソースを書いて頂いていますが、私には解析することは無理です。自分が理解できないソースを書くことはできません。 （結果） 問題はメニューボタンだけなので、これを画像に変更します。 時間をかけてマウスが乗るとデザインが変るｃｓｓを探しますわ・・ 有り難うございました。