忍者ブログ
[1] [2]

XHTMLとHTMLの記載の違いを調べてみた。
そしたら、ここに詳しく書いてありました。

ということで、特に注意する点を書いておこう。

・XHTML記載の注意点
 ?スタイルシートでも要素名や属性は小文字で書く。

 ?name属性は使わないで、id属性を使う。
  ただし、従来互換も考慮し、従来互換が必要なら併用する。

 ?<、>や&の半角記号を文書中で用いる場合は、文字参照で記載する。

 ?id名の先頭文字は、半角英字。→これは従来から同じ。
  でも間違えると、処理してくれないので注意。

特に?は記憶しておこう。

?は、ページ内参照時に使うかな。

?は、つい考えずに記載してるので、
 忘れるかも。あとスペースもあるしね。^^);;

?は、知らなかったので、動かなかったときは焦ったけど、
 JavaScriptやCSSをいじる時には、これが一番やっていけないことですね。^^);;

あとCDATA sectionがあるようだけど、
これJavaScriptコードをそのままブラウザに表示するには便利そうだけど
どうやって使うのか調べたが、よく分かりません。^^);;

拍手[0回]

PR

 新規HPにBLOCKBLOGで作成したソフトメニューを設置し、
DOCTYPEをXHTML1.0に変更したら、なぜかソフトメニューの横幅が小さくなり
隣との間に隙間が。。^^):::

えっなんでということで、調べていたら、どうもXHTML1.0とHTML4.01で
DIV領域に指定したwidth値に対して、
borderで指定した枠線が、
DIV領域の内側に配置されるか、外側に配置されるかが異なるようだ。

で、この際、他のブラウザ、他のDOCTYPE指定を調べてみた。

その結果、IEはなんか特殊なのか、昔のお客さんを大事にしているのか
ちょっと、ブラウザで対応が異なるようだ。

仕様を調べてみたら、CSS1CSS2も、
枠線はBLOCKの内容要素の外側に配置されるのが正しいですね。

ということは、IEでXHTML1.0が問題。
HTML3.2以前は仕方ないにしても、
XHTML1.0/1.1まで悪しき仕様を持ち込まなくてもいいんじゃないのかな??

ということは、どういう事かと言うと、
DOCTYPEの指定如何では、
ブラウザが異なると、デザインが違って表示されることがある。
さらに領域に余裕がないとデザインが崩れてしまうことがある。

困った。。。。^^);;;

XHTML1.0を指定したいが、そうすると、殆どがIEで見に来るので
IEに合わせてCSSを指定すると、IE以外のブラウザでは、
デザインが大きく崩れてしまう。

ということで、涙を飲んで、HTML4.01 Traditionalで作成することに決めた。
BLOCKBLOGさんがHTML4.01にしてたのが気になっていたが
こういうことが原因なのかな?

あきさんがコメントくれて、泣かなくてもいいみたい。
IE6の場合は、先頭のxml宣言取れば、確かに外側に配置してくれました。

               IE  Mozilla  opera  safari
XHTML 1.1 (non xml)     
XHTML 1.0 Strict(non xml)  
XHTML 1.1          
XHTML 1.0 Strict      
HTML 4.01 Strict      
HTML 4.01 Transitional   
HTML 3.2          
DOCTYPEなし         

 
内側:BLOCK要素横幅(marginは除いています):
     =width
外側:BLOCK要素横幅(marginは除いています):
     =border-left-width + padding-left-width
      + width
      + padding-right-width + border-right-width
 
確認環境:
 
IE 6.0----------------DOS/V WinXP
Mozilla 1.8a4---------DOS/V WinXP
opera 7.23------------DOS/V WinXP
Safari 1.2.2(v125.7)--PowerBook G4(Mac OS X Ver10.3.4)
 
テスト用ソース:

 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"              xml:lang="ja" lang="ja"> <head>     <title>BLOCK要素チェック</title>     <meta http-equiv="Content-Type"          content="text/html; charset=Shift_JIS" />     <meta http-equiv="Content-Style-Type"          content="text/css" />     <style type="text/css">         .s400 {             font-size: 20px;             margin-left: 0px;             background: #ffffff;             padding: 0px;             border: 1px solid #000000;             width:400px;         }         .s200 {             font-size: 20px;             margin-left: 40px;             background: #ffffff;             padding: 0px;             border: 1px solid #000000;             width:200px;         }         .s100 {             font-size: 20px;             margin-left: 80px;             background: #ffffff;             padding: 0px;             border: 1px solid #000000;             width:100px;         }         .d1 {             margin: 0px;             background: #ccccff;             padding: 20px;             border: 20px solid #000000;             width:400px;         }         .d1 .d2 {             margin: 0px;             background: #eecccc;             padding: 20px;             border: 20px solid #000000;             width: 200px;         }         .d1 .d2 .h1 {             margin: 0px;             background: #cccccc;             padding: 0px;             border: 1px solid #000000;             width: 100px;         }     </style> </head> <body> <div class="s400"><p>400px</p></div> <div class="s200"><p>200px</p></div> <div class="s100"><p>100px</p></div> <div class="d1">     <div class="d2">     <h1 class="h1">ツール</h1>     </div> </div> </body></html>

拍手[0回]

忍者ブログ [PR]
カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 15 16
17 18 19 20 21 22 23
25 26 27 28 29 30
31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析