ある個人WEBマスターの喜怒哀楽

[135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145]

DOCTYPE宣言でデザインが崩れる？（枠線はどっち側）！！

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

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

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

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

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

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

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

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

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

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

あきさんがコメントくれて、泣かなくてもいいみたい。
IE６の場合は、先頭の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回]

【2005/01/15 01:04 】

[ＣＳＳ/ＨＴＭＬ]

Trackback[]

COMMENT[0]

XHTML記載時の従来HTML表記との注意点

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

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

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

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

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

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

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

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

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

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

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

[0回]

【2005/01/15 00:00 】

[ＣＳＳ/ＨＴＭＬ]

Trackback[]

COMMENT[0]

掲示板に不当な書き込みをした方をプロバイダに告発した！！

このところ、いろんな掲示板に不当な書き込みをしているお方がいて、
自分のところにも、何度も書き込んできたので、
その方のプロバイダのHPを見たら、
こういう荒らし行為の書き込みに対しての告発用ページを
用意していたので、

即座に、警察に告発するか、停止処分を要求しておきました。

こういう方は、逮捕されて新聞に顔写真入りで載ってくれると、
見せしめになっていいですけどね。^^)

たまには警察も、そのくらいのことやって、
ネットのアホなやつらを追い出して欲しいなんてね。

ということで、その結果がどうなるか楽しみです。^^)

ということ、今回は過激な書き込みでした。^^);;;;

以下は、告発内容メールの控えです。
問い合わせ内容は、省略してあります。^^);;

xxxxxxx
担当者行
　
下記の通り、xxxx管理のIPアドレスより、以下の迷惑行為を
受けましたので連絡します。
　
適切な対応を願います。
　
━　以下、問い合わせ情報　━━━━━━━━━━━━
　
■迷惑行為の内容
　
xxxx管理のIPアドレスからBBSへの荒らし行為などを受けました
　
■お名前：
■EMAIL:
■ホスト名あるいはIPアドレス:
■日時
■伝言してほしい内容
■備考
　
━━━━━━━━━━━━━━━━━━━━　以上　━
　
────────────────────────
　このメールは、ｘｘｘ(株)が管理運営するIPアドレスを
利用したユーザによる迷惑行為に関して対応させていただく
受付ページ(http ://www.xxxxxx.ne.jp/)へのお問い合わせ
について、控えをお客様に送るものです。
　
　お問い合わせについては、頂戴しました情報に
基づき調査を行い、該当ユーザの所属するISPへの連絡等、
迅速にしかるべき対応をとらせていただきます。
頂いた情報に関する補足や修正、
お問い合わせなどがございましたら、
下記メールアドレスまでお問い合わせください。
　
　なお、本メールの内容に覚えのない方は、
お客様のメールアドレスが不正に利用されている可能性が
ありますので、お手数ですが下記までお問合せください。
　
　　　　　　　　　　　　　　　ｘｘｘｘｘｘ株式会社
　　　　　　　　　　　　　　　不正利用に関する担当
　　　　　　　　　　　　　電子メール：xxxx@xxx.net

[0回]

【2005/01/14 00:09 】

[ＨＰ管理]

Trackback[]

COMMENT[0]

今日の朝は寒かったみたい。

今日の朝、自転車で駅まで行こうとして
家から直ぐの坂道で、前ブレーキを引いたら、

ガガッという音がして、

なんと、前ブレーキがタイヤを押し付けたまま
戻ってこなくなりました。

で、停止して、ブレーキを戻そうとしても戻らない。

うっそーーーー、これじゃ駅まで行けないよーーー

そうです、なんとブレーキが凍っていたんでしょう。^^)

前には変速機が凍ったことあったけど、
ブレーキは初めてです。^^);;

仕方なく、バスで駅まで行きました。ああーーーあ。

[0回]

【2005/01/14 00:05 】

[ＭＹ日記]

Trackback[]

COMMENT[0]

一度ＣＳＳ対応してしまえば、その後は楽チン！！

　昨日一日（１７時間）掛けて、新サイトの基本となるＨＴＭＬテンプレートと
ＣＳＳデザインを作った。

　で自分がＨＰを初めて作成したのは、１９９８年だった。
その頃は、ＣＳＳもあったが、まだ一般的じゃない。
で、普通にＨＴＭＬで記述していた。

また当時、ブラウザもＩＥとＮＮの２大勢力があり、
これのJavaScriptやCSSの細かな仕様が違う。^^);;

まあ、現在も次世代ＤＶＤ規格で２大勢力があるが、
こういう仕様の違いは、シェア争いが根本かと思うが、
使う身になって考えてもらいたいんだけどね。。。^^);;

　ということで、JavaScriptでＤＨＴＭＬを使用し、
ＩＥとＮＮを両方表示可能にするには、クロスブラウザという
考えで、まあ両方対応するように記述する必要があったんですね。

　で、最近はＩＥのひとり勝ちとなったため、
ＮＮ４．ｘで扱っていたLAYER仕様は、もう対応する必要もなくなった。