• 締切済み

DOCTYPEを無視して強制的チェックをやめたい

フリーソフトAnother HTML-lint gatewayを使用して記述誤りのチェックしていますが ルビーを使用しているので Microsoft Internet Explorer 5.5 でチェックしていますが全て DOCTYPE でチェックしたいと思いIE9だかですが 下記のように表示されて困っていますが をわかりでしたら教えて下さい IE7 IE8では、正常に表示しています IE6 では、おかしく表示されますが 縦書きは、正常に表示しています http://ryuso.info/h/h002e5mt.htm 対象ページを参照すると                  と 割レバ 永四百五拾六文六分貮厘壱毛与成る http://ryuso.info/h/dok_2.htm フレーム分割で参照すると                 と 割レバ 永四百五拾六文六分貮厘壱毛与成る http://ryuso.info/h/dokue_3y.htm ソース <div class="margin-left:19em;margin-bottom:-0.5em;">と</div> <div style="margin-left:2em;">割レバ 永四百五拾六文六分貮厘壱毛与成る</div>

みんなの回答

回答No.3

>No.1 よくわかりませんが、CSSで処理したいなら CSSハックやコンディショナルコメントでIE9だけ調整すればいいと思います。

k0021
質問者

お礼

再度の回答ありがとうございます。 ページによりフレーム分割でも使用していますので 縦書きでは、正常に表示されますので横書きを廃止して縦書き表示に 変更してみます。 Firefox・Ssfari・Opera・googleChromeでも正常に表示されますので(最新ブラウザですが) 参考までに勉強のために 横方向のセルの連結の罫線ありを全てスタイルシートでテーブル(表)を作成してみましたが IEの場合7までと8以降とFirefox・Ssfari・Operaでスタイルシートを変えて作成しましたが

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

 逆に、IE5.5,IE6は無視しましょう。IE6はマイクロソフトも撲滅キャンペーンをしているくらい古いバージョンで、googleをはじめ多くのベンダーがサポートを終了しています。  一方IE9は、標準ブラウザで検証するなら、firefox,googleChrome,Opera,safariなどの最新ブラウザで行うべきでしょう。  ただ、今回のような内容は、PDFで出版すべき典型的なものだと思います。ウェブ/HTMLの目的は 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より  なのですから、横書きで作成して、PDFへのリンクで対処するほうが良いと思います。PDFは、「作成したドキュメントを異なる環境のコンピュータで元のレイアウトどおりに表示・印刷できる ( http://ja.wikipedia.org/wiki/PDF )」を目的としたフォーマットです。

k0021
質問者

お礼

回答ありがとうございます。 老化予防にHPを勉強している年金生活者ですが 縦書き・ルビをfirefox,googleChrome,Opera,safariなどの最新ブラウザで表示を勉強していますが「縦書き」は、正常に表示しますので「縦書き」で表示に変更します。

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

日本語でおk。 毒食らわば皿までではありませんが、そういう作り方をするならテーブルの方がいいのでは? <table> <tr><td></td><td>ふりがな</td><td></td></tr> <tr><td>文字に</td><td>振仮名</td><td>をつける</td></tr> </table> 日本語で例えると、名詞は名詞、動詞は動詞の位置に『名詞』『動詞』があれば、「文法」は正しい物となります。 「私は駅まで歩いて行く。」 名詞と動詞を入れ替えると 「駅は私まで行って歩く。」 全部<div>にすれば、文法チェッカーはパスできると思いますが、 HTMLタグにも、「意味」という物があります。 文法チェッカーが通ればそれでいいという物ではありません。 (文法チェッカーは「文法」をチェックできますが、「意味」をチェックできません。) が、まあ、ある種の理想論ですので、先に述べたように毒食らわば皿まで、デザイン最優先ならテーブルレイアウトが確実だと思います。 ---------------- ルビにするための<ruby>というタグがあります。 XHTML1.1 <ruby><rb>振仮名</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby> DHTML/HTML5 <ruby>振仮名<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby> DHTMLはMicrosoft社定義のHTMLです。(MSHTML、MS-HTMLとも言います) HTML5に<rb>を入れるかどうかは議題として上っていますが、今後どうなるかわかりません。 2012年3月現在では<rb>は定義されていません。 (多く使われている方をHTML5に取り入れようと言う"ような"意見もあるようですので、「個人的に」<rb>ありをお勧めします。(^^;)

k0021
質問者

お礼

回答ありがとうございます。 ルビを使用して作成していますが、CSSの誤りのチェックでは、layout-grid-mode:lineを未指定の場合文字が重なり醜いので「layout-grid-mode:line」を指定していまので検証ではエラーになっていますが。 テーブルを1文字作成し横結合で作成して対象ページは、上文字も使用していますので左マージ等の指定や色々の問題が発生しますが IE9だけの問題ですのでそのまま作成してIE9だけの問題が解消されるのと考えて、ずれたまま作成すると考えも有ると思いますが

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

関連するQ&A

  • 同じ内容をフレーム分割と対象ページで異なる

    ルビーもFirefoxでも表示しようと作成しましたがIE9で下記の写真のように表示されました。 下の写真は、左側がフレーム分割の表示 右側が対象ページの内容です。 なおMACブラザーでも縦書きは、IE6のみ 1文書を除いて問題なく表示していますが。 ソース <div style="margin-left:9em;"><div style="margin-bottom:-0.6em;font-size:0.71em;">うえ</div></div> <div style="width:9.2em;float:left;margin-top:0.4em;">1駿州庵原之郡樽野</div><div style="width:1.2em;float:left;margin-top:0.4em;">上</div><div style="width:25em;float:left;vertical-align:top;">村武田甚右<sup>衛</sup>門子ニ、兄に左次右衛門</div></div> <div style="width:57em;clear:both;margin-top:0.4em;"><div style="margin-left:7em;width:9em;float:left;vertical-align:top;">額</div><div style="width:6em;float:left;vertical-align:top;"><div style="font-size:0.71em;">おなじく</div></div><div style="width:7em;float:left;vertical-align:top;">房</div></div> <div style="width:57em;clear:both;"> て、しゝのひたゐしろく、せすじ 同  <a href="javascript:gk_c1('t-03');">しゝふさ</a>のことく成</div> お分かりの方いましたら教えて下さい。 フレーム分割ページ http://ryuso.info/h/h002e5m.htm 対象ページ http://ryuso.info/h/heng2da.htm

    • 締切済み
    • CSS
  • IE6だと表示がおかしく表示される。

    添付写真の上がIE9での表示で、下はIE6(IETesterで表示)ですが。 殆んど同じ記述で「写真」の無いページは、正しく表示しています。 必要と思われるタグは、下記の内容です。なお親ホントは100%です。 <div style="width:32%;float:left;"><img src="省略></a></div> <div style="width:59%;float:left;"><img src="省略"></a></div> <div style="font:1em/2.8em 'MS 明朝',serif;width:27.9em;float:clear:both;"> <div style="margin-left:9.52em;font-weight:bold;clear:both;">九月十八日</div> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'MS 明朝',serif;float:left;">省略</div> <div style="width:5.81em;font:1em/1.4em 'MS 明朝',serif;float:left;">省略</div> <div style="width:10.34em;font:1em/2.8em 'MS 明朝',serif;float:left;">省略</div> 省略 </div> <div style="font:1em/2.8em 'MS 明朝',serif;width:27.9em;float:"> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'MS 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:5.81em;font:1em/1.4em 'MS 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:10.34em;font:1em/2.8em 'MS 明朝',serif;float:left;margin-top:1.5em;">省略</div> 省略 </div> 誤り内容を教えて下さい。 http://ryuso.info/test/ryu180_250.htm

    • ベストアンサー
    • CSS
  • 見出し<h3>にリンクを追加すると背景画像が表示されない

    h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。

  • IEの場合フレームは、表示サイズにより表示が異なる

    IE9の場合、対象古文書を対象ページを参照した場合と フレーム分割で参照した場合 画像解像度800で見た場合表示が異なります。 なをIE8では、正常に表示されます。 添付写真は、上が対象古文書を対象ページを参照した場合 下がフレーム分割で参照した場合 参考に古文書を対象ページを参照 http://ryuso.info/r/r020_033.htm フレーム分割で参照 http://ryuso.info/r/r020u.htm MACブラザーでもルビ(ふりがな)を表示できるか 段組で 作成して見ました ソースの内容 <div style="margin-left:14em;width:12em;float:left;"> <div style="font:0.71em/100% 'MS 明朝',serif;">あさばた</div></div> <div style="width:4em;float:left;"><div style="font:0.71em/100% 'MS 明朝',serif;">ほう</div></div> <div style="width:2em;float:left;"> <div style="font:0.71em/100% 'MS 明朝',serif;">たた</div></div> <div style="clear:both;">  龍爪山の南の麓に御池あり。浅 畑 の池と名付けたり。方一里に余り、水たんたん湛え、底深く、あたかも湖水に異ならず。</div> わりにくい質問ですが上記のように表示されて困っていますが 老化予防にホームページ勉強していますがお分かりの方教えて下さい。

    • 締切済み
    • CSS
  • IE7とIE8での表示の違いを無くすにはどうしたら良いか、お分かりにな

    IE7とIE8での表示の違いを無くすにはどうしたら良いか、お分かりになる方がいらっしゃれば、お教えくださいませ。 以下の様に、HTMLとCSSを記述したのですが、IE7は思う様に表示しますが、 IE8ですと、ヘッダー部分がやや縦長になってしまいます。 この差を無くすためにはどのように記述したら良いでしょうか? どうぞ宜しくお願い致します。 ※CSSの記述 --------------------------- /* コンテナ */ div#container {width: 760px; margin-left: auto; margin-right: auto; background-color: #ffffff;} /* ヘッダー */ div#header {background-color: #017acd; background-image: url(top001.png); padding: 10px 10px 25px 0px; } div#header h1 {margin-top: 20px; margin-left: 30px; font-size: 17px; text-align: left; font-weight:normal; text-decoration:none; color: #ffffff; font-family: "cataneo BT",normal; word-spacing: 0.05em;} div#header h2 {margin-top: 30px; font-size: 48px; text-align: center; color: #ffffff; font-family: "cataneo BT",normal;} ※HTMLの記述 ----------------------- <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1>Welcome to my pages!</h1> <h2>My HomePage</h2> </div> ~中略~ </div>

  • 超段組で作成の文字ずれの対応

    文字サイズを大にすると下記写真の表示されますが何か対策がありますか。 写真の上が文字サイズを大です。下が文字サイズを中です。 .up {font-size:0.82em;vertical-align:super;} .wmx {width:57em;clear:both;} .s05 {margin-left:5em;} .l03 {width:3em;float:left;} .l08 {width:8em;float:left;} .l18 {width:18em;float:left;} .l20 {width:20em;float:left;} .s009 {margin-left:0.9em;} .rz {font:0.9em/110% "MS 明朝",serif;letter-spacing:0.1em;} .m_f {margin-top:0.3em;} .rt {font:0.71em/100% "MS 明朝",serif;} .c_b {clear:both;} .mtf {margin-top:0.2em;} <div class="wmx"> 駿州庵原郡樽の上村、武田甚右エ門の子に、兄に左次右エ門、弟に権兵衛といふ者あり、かの権兵衛25の年、<span class="up">(今より)</span>3 <div class="s05 l18"><div class="s009 rz">辛 未</div></div><div class="s009 l08"><div class="rz">狩り</div></div></div><div class="l20"><div class="m_f rt">けんぞくかえ</div></div><div class="l03"><div class="m_f rt">しし</div></div> <div class="c_b">0年以前、かのとひつじの年正月17日に、竜爪山に殺生に出て、我が眷 属 鹿のしし16匹連れて遊びゐる中に、鹿の額白く</div> <div class="c_b"><div class="mtf">背筋同じく白房の如くなるを、<span class="up">(彼の者が)</span>鉄砲にて撃ちとむる。それによって我、彼の者に乗り移る。<span class="up">(その結果彼の者は)</span>言葉乱</div> 超段組で作成の文字ずれの対応方法を教えて下さい http://ryuso.info/rk/rk275_277.htm

    • 締切済み
    • CSS
  • IE8での段落のズレについて

    IE7では正常(自分が思うように)に表示してくれますが、 IE8では互換モードにしないと大きなタイトル文字の前に1つ 段落が出来てしまい、2行分のタイトルが4行になってしまい、 タイトル画像からはみ出てしまいます。 (下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き!」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます) 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい! <CSS> body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px;      background-image: url(./boad.jpg);      background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff;               padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px;           font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px;               color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd;       font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd;           font-weight:bold;margin-left:280px;      line-height:100%; } code.main      {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center;          font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ~head以降> <body> <div id="box"> <div id="header"> <h1>&nbsp;&nbsp;釣り&nbsp;&nbsp;キャンプ&nbsp;&nbsp;車&nbsp;&nbsp;etc&nbsp;&nbsp;</h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き!</h5> </div> <p><code class="main p1">   皆さんはどんな趣味をお持ちですか?<br>   私は沢山の趣味を持っています。<br><br>   そのためいくら働いてもお金は溜まりません・・・・・<br>   でも、沢山の趣味を自分なりに楽しむのは<br>   ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • google画像検索のように画像を表示させたい

    http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか? この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか?

    • ベストアンサー
    • HTML
  • 自作の一段組みのソースを使い、二段組みのサイトを

    作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。 ~html~ <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 style="display:none">タイトル</h1> <ul id="topmenu"> <li class="logo1"><a href="#">お問い合わせ</a></li> <li class="logo2"><a href="#">サイトマップ</a></li> </ul> </div> <!-- サイドメニュー (スワップイメージを使っています)--> <div id="menu"> <ul> <li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> <li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li>         ※以下省略 </ul> <div> <!--main--> <div id="main"> <div id="introduction"> <h2><img src="images/introduction.png" alt="introduction" /></h2> </div> <!-- コンテンツ --> <div id="content"> <h2>h2タイトル(1)</h2> <dl class="info"> <dt>1月1日</dt> <dd>あああ</dd> <dt>1月2日</dt> <dd>いいい</dd> ※以下省略 </dl> <h2>h2タイトル(2)</h2> <dl class="info"> <dt>1月1日</dt> <dd> ううう</dd> <dt>1月2日</dt> <dd>えええ </dd> ※以下省略 </dl> </div> <!--contentsはここまで--> </div> <!--mainはここまで--> <!-- フッター --> <div id="footer"> <ul id="lastmenu"> <li class="logo3"><a href="#">よくある質問</a></li> <li class="logo4"><a href="#">プライバシーポリシー</a></li> </ul> <p>Copyright BBB. All right reseved.</p> </div> </div> <!--containerはここまで--> ~css~ body {background-image: url(images/sora.jpg)} /* コンテナ */ div#container {background-image: url(images/background0.png); width: 980px; margin-left: auto; margin-right: auto; overflow:hidden; position:relative} /* ヘッダー */ div#header {background-image: url(images/header.png); background-repeat:no-repeat; height: 169px; margin-bottom: 30px} ul#topmenu {font-size: 1.2em; padding-left: 580px; padding-top: 130px} ul#topmenu li {float:left; margin-left:15px; margin-right:15px; font-weight:bold} .logo1 {list-style:none; background-image: url("images/mail.png"); background-position: left center; background-repeat: no-repeat; padding-left:35px} . logo2 { list-style:none;      height:25px;      background-image: url("images/zisyaku.png");      background-position: left center; background-repeat: no-repeat; padding-left:30px } /* メニュー */ #menu {margin-left: 40px; width:260px} #menu li{list-style:none; margin-bottom: 4px} /* メイン */ div#introduction {margin-left: 132px; margin-bottom: 10px} /* コンテンツ */ div#content {width: 475px; border: 2px solid #400000; padding-top: 28px; padding-right: 60px; padding-left: 50px; padding-bottom: 20px; margin-left: 135px; margin-bottom: 80px; font-weight: none;} div#content h2 {color: #400000; font-size: 1.8em; letter-spacing: 0.5em; border-bottom-width: 3px; border-left-width: 14px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #008080; border-left-color: #008080; padding-left: 10px; margin-bottom: 15px} dl.info dt,dl.info dd {font-size:1.2em; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #400000} dl.info dt {clear: left; float: left; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat;} dl.info dd {margin-bottom: 0.8em; margin-left: 9.2em; margin-bottom: 1.5em} /*メインはここまで*/ /* フッター */ div#footer {background-image: url(images/footer.gif); position:absolute; bottom:0px; height:60px; width:980px;} ※以下省略。          

    • ベストアンサー
    • CSS
  • スタイルシート※max-heightがIEではきかない

    firefoxでは見れるのですが、IEではmax-heightがきいてません。 以下ソースです。 } #TREE-VIEW-DIV { float: left; width: 50%; max-height: 35em; overflow: auto; } これでfirefoxのほうでは、インラインフレームのように テキスト量が縦に多ければスクロールバーが出ます。 でもIEではでてこず、ずべてのテキストが長く下へ表示されます。 どうしてでしょうか、教えてください。 ※また、このサイトは左に1つ右へ上下2つの3ペイン画面なのですが、 これをすることによって、左と右を分けている境界線にグレーのラインを いれているのですが、これが真ん中から切れてしまいます(IEのみ)。 この因果関係などわかりますでしょうか。 下がソースです。 } div.●● { margin-left: 10em; padding: 1em; border-left: thin solid #c0c0c0 }

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • フロントサイドとサーバサイドのバトンタッチについて具体的な方法を教えてください。PHPとMySQLの連携方法も教えてください。
  • フロントサイドとサーバサイドの連携方法やPHPとMySQLの連携方法を教えてください。
  • HTML、CSS、JavaScriptで作ったフロントサイドとPHP、MySQLの連携方法を教えてください。
回答を見る