- ベストアンサー
ＣＳＳ読み込みの方法
ＷＥＢ作成をはじめたのですが、知識が浅く新しいＰＣのＩＥ９で確認して作ってしまい、他のバージョンでの型崩れが分かり困っています。ＩＥ６，７，８ならばこのＣＳＳを使うというバージョンごとのＣＳＳを読み込む記述方法を教えてください。 また、型崩れを防ぐために気をつける点などをご指導願えたらと思います。 よろしくお願いいたします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
IEだけであれば、条件付きコメントが使えます。 <!--[if gte IE9]> <link rel="stylesheet" href="ie9.css"> <![endif]--> <!--[if (gt IE 7)&(lte IE 8]> <link rel="stylesheet" href="ie8.css"> <![endif]--> <!--[if (gt IE 6)&(lte IE 7]> <link rel="stylesheet" href="ie7.css"> <![endif]--> <!--[if (gt IE 5)&(lte IE 6]> <link rel="stylesheet" href="ie6.css"> <![endif]--> これで、それぞれのバージョンにそったcssを読み込めます。 この例ではIE9だけ、「IE9以上の時」を指定してあります（特に意味はないです）。 参考URLを読んで、いろいろといじってみれば分かると思います。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<body>部分のみ書き換えて再掲--：は：に、＿はタブに戻してください。 <body> ＿<div class="header"> ＿＿<h1 id="Top">ＣＳＳ読み込みの方法</h1> ＿＿<p>ウェブ標準で作成し、IEもウェブ標準で起動するように作成する。</p> ＿</div> ＿<div class="section"> ＿＿<h2>＞また、型崩れを防ぐために気をつける点などをご指導願えたらと思います。</h2> ＿＿<div class="section answer"> ＿＿＿<ol> ＿＿＿＿<li id="strict">ウェブ標準で作成し、すべてのブラウザが標準モードで起動するようにする。 ＿＿＿＿＿<p>私は、HTML4.01strict + CSS2.1 です。</p> ＿＿＿＿＿<blockquote> ＿＿＿＿＿＿<p>HTML文書を作る場合には、この仕様における、他のDTDセット(transitinal,frameset)ではなく strict DTD に適合する文書を作るよう推奨する。 (<a href="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/conform.html#h-4.1">HTML4.01仕様書邦訳 4.1 定義</a>より)』</p> ＿＿＿＿＿</blockquote> ＿＿＿＿＿<p>・・・IEの崩れの多くが、互換モードでの起動によるものです。互換モードで作成してしまうと、ウェブ標準ブラウザでは崩れてしまいます。標準モードで作成し、IEが標準モードで動作するようにすれば、多くは解決します。</p> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="https：//www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.2081.7669.1.9187.8.6.0.2.2.0.149.728.0j6.6.0...0.0.XP-kEMzV3w0&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=63ec36e6288c7ab9&biw=1024&bih=615">DOCTYPEスイッチ - Google 検索</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li id="brawser">基本的に標準ブラウザでチェックしながら作成する。(IEは一番後回しにしています。) ＿＿＿＿＿<p>私は、firefoxです。製作者向けの豊富なアドオン『<a href="https：//addons.mozilla.jp/firefox/extensions/developer_tools/">開発者向けツール </a>』がありますから。</p> ＿＿＿＿＿<p>また、他のブラウザに切り替えるのも簡単</p> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/92382">IE Tab V2 (Enhanced IE Tab)</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/1843">Firebug</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/1419">IE Tab</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/60">Web Developer</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/8519">FireMobileSimulator</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/3829">Live HTTP Headers</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/249">Html Validator</a></li> ＿＿＿＿＿＿<li><a href="https：//addons.mozilla.jp/firefox/details/2409">Server Switcher</a></li> ＿＿＿＿＿</ul> ＿＿＿＿＿<p>とか・・</p> ＿＿＿＿</li> ＿＿＿＿<li id="do_not_waste">「ＩＥ６，７，８ならばこのＣＳＳを使うというバージョンごとのＣＳＳを読み込む」そんな、無駄なことしません。 ＿＿＿＿＿<p>せいぜい、</p> ＿＿＿＿＿<pre><!--[if lt IE 7]> <script type="text/javascript" src="/js/fixed.js"></script> <![endif]--></pre> ＿＿＿＿</li> ＿＿＿＿<li id="use_text_editor"><a href="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">HTMLエディタ</a>を使ってページを作成する。</li> ＿＿＿</ol> ＿＿＿<p>私の対策は、以上です。</p> ＿＿＿<p><strong>徹底して、HTMLは文書構造のマークアップにだけ専念して作成します。スタイルシートは、HTML(基本的にテンプレートですが)が完成した後で作成します。HTMLを書くときはデザインは一切考えていません。</strong></p> ＿＿</div> ＿＿<div class="content_Table"> ＿＿＿<ol> ＿＿＿＿<li><a href="#strict">ウェブ標準で作成する。</a></li> ＿＿＿＿<li><a href="#brawser">標準ブラウザでチェック</a></li> ＿＿＿＿<li><a href="#do_not_waste">無駄なことはしない</a></li> ＿＿＿＿<li><a href="#use_text_editor">HTMLエディタをつかう</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<p>文書情報</p> ＿</div> </body> </html>
お礼
たくさんの、お答ありがとうございます！ まだ不慣れで難しく感じることもありますが、じっくり読ませていただきます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2の続きです。<head>部分になります。 ★ウエブ標準のHTML4.01strict+CSS2.1です。 ★IE6以降のIEでしたら、他のブラウザと同じになるはずです。IE5ではさすがに崩れますが利用できないわけじゃないはず。 一目見て、HTMLのソースもスタイルシートも簡単ですね。それでいて、ウィンドウ幅を変えても閲覧に支障ないし、もちろんスマートホンでも利用できる。 印刷したらスタイルシートは適用されない。 HTMLの目的が「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」である限り・・それを目標としてください。難しくはない・・逆に簡単です。HTMLはそのように設計されていますから。 ★なお、タブは＿に置換してあります。No.2で回答した<body>はあのままでは、テストできないので、:を：(全角)に置換したものを次の回答で示しておきます。 <!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" media="screen"> <!-- html,body{margin:0;background-color:silver;} div.header,div.section,div.footer{width:70%;min-width:640px;max-width:800px;margin:0 auto;background-color:white;} div.header h1,div.section h2,div.footer h2, div.header p,div.section p,div.footer p{margin:0;line-height:1.6em;} div.header h1,div.section h2,div.footer h2{text-align:center;} div.header p,div.section p,div.footer p{text-indent:1em;} div.section{position:relative;} div.section h2,div.section div.answer{margin:0 0 0 30%;width:70%;background:rgb(220,220,220);min-width:0px;} div.section div.content_Table{width:29%;position:absolute;top:10px;height:100%;} pre{padding:0.5em 1em;background-color:white;border:solid 1px 2px 2px 1px gray;} --> ＿</style> </head>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞また、型崩れを防ぐために気をつける点などをご指導願えたらと思います。 1) ウェブ標準で作成し、すべてのブラウザが標準モードで起動するようにする。 私は、HTML4.01strict + CSS2.1 です。 『HTML文書を作る場合には、この仕様における、他のDTDセット(transitinal,frameset)ではなく strict DTD に適合する文書を作るよう推奨する。 ( 仕様書より)』 ・・・IEの崩れの多くが、互換モードでの起動によるものです。互換モードで作成してしまうと、ウェブ標準ブラウザでは崩れてしまいます。標準モードで作成し、IEが標準モードで動作するようにすれば、多くは解決します。 →DOCTYPEスイッチ - Google 検索 2) 基本的に標準ブラウザでチェックしながら作成する。(IEは一番後回しにしています。) 私は、firefoxです。製作者向けの豊富なアドオン『開発者向けツールがありますから。 また、他のブラウザに切り替えるのも簡単 ・ IE Tab V2 (Enhanced IE Tab) ・ Firebug ・ IE Tab ・ Web Developer ・ FireMobileSimulator ・ Live HTTP Headers ・ Html Validator ・ Server Switcher とか・・ 3) 「ＩＥ６，７，８ならばこのＣＳＳを使うというバージョンごとのＣＳＳを読み込む」そんな、無駄なことしません。 せいぜい、 <!--[if lt IE 7]> ＿<script type="text/javascript" src="/js/fixed.js"></script> <![endif]--> 4) HTMLエディタを使ってページを作成する。 私の対策は、以上です。 徹底して、HTMLは文書構造のマークアップにだけ専念して作成します。スタイルシートは、HTML(基本的にテンプレートですが)が完成した後で作成します。HTMLを書くときはデザインは一切考えていません。 ★ざくっとHTMLを書いてみました。 <body> ＿<div class="header"> ＿＿<h1 id="Top">ＣＳＳ読み込みの方法</h1> ＿＿<p>ウェブ標準で作成し、IEもウェブ標準で起動するように作成する。</p> ＿</div> ＿<div class="section"> ＿＿<h2>＞また、型崩れを防ぐために気をつける点などをご指導願えたらと思います。</h2> ＿＿<div class="section answer"> ＿＿＿<ol> ＿＿＿＿<li id="strict">ウェブ標準で作成し、すべてのブラウザが標準モードで起動するようにする。 ＿＿＿＿＿<p>私は、HTML4.01strict + CSS2.1 です。</p> ＿＿＿＿＿<blockquote> ＿＿＿＿＿＿<p>HTML文書を作る場合には、この仕様における、他のDTDセット(transitinal,frameset)ではなく strict DTD に適合する文書を作るよう推奨する。 (<a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/conform.html#h-4.1">HTML4.01仕様書邦訳 4.1 定義</a>より)』</p> ＿＿＿＿＿</blockquote> ＿＿＿＿＿<p>・・・IEの崩れの多くが、互換モードでの起動によるものです。互換モードで作成してしまうと、ウェブ標準ブラウザでは崩れてしまいます。標準モードで作成し、IEが標準モードで動作するようにすれば、多くは解決します。</p> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.2081.7669.1.9187.8.6.0.2.2.0.149.728.0j6.6.0...0.0.XP-kEMzV3w0&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=63ec36e6288c7ab9&biw=1024&bih=615">DOCTYPEスイッチ - Google 検索</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li id="brawser">基本的に標準ブラウザでチェックしながら作成する。(IEは一番後回しにしています。) ＿＿＿＿＿<p>私は、firefoxです。製作者向けの豊富なアドオン『<a href="https://addons.mozilla.jp/firefox/extensions/developer_tools/">開発者向けツール </a>』がありますから。</p> ＿＿＿＿＿<p>また、他のブラウザに切り替えるのも簡単</p> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/92382">IE Tab V2 (Enhanced IE Tab)</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/1843">Firebug</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/1419">IE Tab</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/60">Web Developer</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/8519">FireMobileSimulator</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/3829">Live HTTP Headers</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/249">Html Validator</a></li> ＿＿＿＿＿＿<li><a href="https://addons.mozilla.jp/firefox/details/2409">Server Switcher</a></li> ＿＿＿＿＿</ul> ＿＿＿＿＿<p>とか・・</p> ＿＿＿＿</li> ＿＿＿＿<li id="do_not_waste">「ＩＥ６，７，８ならばこのＣＳＳを使うというバージョンごとのＣＳＳを読み込む」そんな、無駄なことしません。 ＿＿＿＿＿<p>せいぜい、</p> ＿＿＿＿＿<pre><!--[if lt IE 7]> <script type="text/javascript" src="/js/fixed.js"></script> <![endif]--></pre> ＿＿＿＿</li> ＿＿＿＿<li id="use_text_editor"><a href="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">HTMLエディタ</a>を使ってページを作成する。</li> ＿＿＿</ol> ＿＿＿<p>私の対策は、以上です。</p> ＿＿＿<p><strong>徹底して、HTMLは文書構造のマークアップにだけ専念して作成します。スタイルシートは、HTML(基本的にテンプレートですが)が完成した後で作成します。HTMLを書くときはデザインは一切考えていません。</strong></p> ＿＿</div> ＿＿<div class="content_Table"> ＿＿＿<ol> ＿＿＿＿<li><a href="#strict">ウェブ標準で作成する。</a></li> ＿＿＿＿<li><a href="#brawser">標準ブラウザでチェック</a></li> ＿＿＿＿<li><a href="#do_not_waste">無駄なことはしない</a></li> ＿＿＿＿<li><a href="#use_text_editor">HTMLエディタをつかう</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<p>文書情報</p> ＿</div> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
＞型崩れを防ぐために気をつける点 慣れるしかない 環境を用意してトライアンドエラーで対応してください もしくはフラッシュ
お礼
ありがとうございます！！ 全部に対してというのはきっと、スマートではないのだろうと思いますが それぞれの表示で微妙にずれていたりで対処法を探していました。 助かります。