新規ＨＰに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回]
XHTMLとHTMLの記載の違いを調べてみた。
そしたら、ここに詳しく書いてありました。
ということで、特に注意する点を書いておこう。
・XHTML記載の注意点
?スタイルシートでも要素名や属性は小文字で書く。
?name属性は使わないで、id属性を使う。
ただし、従来互換も考慮し、従来互換が必要なら併用する。
?＜、＞や＆の半角記号を文書中で用いる場合は、文字参照で記載する。
?id名の先頭文字は、半角英字。→これは従来から同じ。
でも間違えると、処理してくれないので注意。
特に?は記憶しておこう。
?は、ページ内参照時に使うかな。
?は、つい考えずに記載してるので、
忘れるかも。あとスペースもあるしね。^^);;
?は、知らなかったので、動かなかったときは焦ったけど、
JavaScriptやCSSをいじる時には、これが一番やっていけないことですね。^^);;
あとCDATA sectionがあるようだけど、
これJavaScriptコードをそのままブラウザに表示するには便利そうだけど
どうやって使うのか調べたが、よく分かりません。^^);;
[0回]
昨日一日（１７時間）掛けて、新サイトの基本となるＨＴＭＬテンプレートと
ＣＳＳデザインを作った。
で自分がＨＰを初めて作成したのは、１９９８年だった。
その頃は、ＣＳＳもあったが、まだ一般的じゃない。
で、普通にＨＴＭＬで記述していた。
また当時、ブラウザもＩＥとＮＮの２大勢力があり、
これのJavaScriptやCSSの細かな仕様が違う。^^);;
まあ、現在も次世代ＤＶＤ規格で２大勢力があるが、
こういう仕様の違いは、シェア争いが根本かと思うが、
使う身になって考えてもらいたいんだけどね。。。^^);;
ということで、JavaScriptでＤＨＴＭＬを使用し、
ＩＥとＮＮを両方表示可能にするには、クロスブラウザという
考えで、まあ両方対応するように記述する必要があったんですね。
で、最近はＩＥのひとり勝ちとなったため、
ＮＮ４．ｘで扱っていたLAYER仕様は、もう対応する必要もなくなった。
これからは、変ってＤＯＭという標準仕様が出来たので、
これだけを対応しておけば、今後は済みそうである。
で、話を戻して、ＨＴＭＬの世界も、ＸＨＴＭＬという新しい考え方に
替わってきた。でも、今まで作成してきたＨＴＭＬをすべてＸＨＴＭＬ対応に
変更するのは、考えただけでも、頭が重くなるので、考えないことにしている。
しかし、今回新しいサイトを立ち上げる際に、ちょっと考えた。
今までは、サイト内が同じデザインで作られてない。
まあ、その時の気持ちでいろいろ替わるんだけど。。。^^);;
これでは行けないと、まずはサイト内のすべてのページのデザインを
統一したデザインで作ろうと思った。
じゃ、どうやって作るかを考えて、無料素材のサイトで
ＨＰデザインテンプレートやＨＰ素材を見てみたが、
どうもこれだと思うものがなくて。。。。
で、BLOCKBLOGで作ったカラオケのデザインがなんか良いみたい
と思って、それじゃこれを基本デザインにしようと。
このＨＴＭＬは、ＸＨＴＭＬ的に書いてあるので、
当然ＣＳＳファイルを使っている。
これを改良してデザインを考えてみた。
でも一応BLOCKBLOGさんに、BLOCKBLOG以外で改良して使っていいか
確認してみよう。^^)
→2005/01/12:CSSはクリエイティブｘｘｘの表記有り以外はOKとのことで、
water-blueを改造したのでOKですね。
ＴＯＰページとそれ以外では、基本的に先頭のタイトル画像の縦長を
変えて、それ以外は、すべて同じにした。
さらに左メニューとフッターも各ページに付くので、
これはいちいち各ページに記述していたら、ここが変更になったときに
修正が大変だし、修正抜けもありそうなので、
ここはJavaScriptで書き出すことに。
ただ、ローカルでテストしている場合と、サーバにＵＰした
場合で、ｊｓファイルなどのパス指定が変るので、
これローカル用と、サーバ用で２種類作っていては面倒なので、
現在のＵＲＬを取得してどちらかを判断するようにして、
ひとつのファイルで済むようにした。
さらにソフトメニューもそのまま使えばいいので楽。
ということで、ｊｓファイルやＣＳＳファイルに共通部分は記載したので、
ＨＴＭＬファイル内は、非常にサイズも小さく、見やすくなりました。
ただし、ＮＮ５．ｘ以前のＮＮブラウザは、完全に自分の頭からは
切り捨てました。これからは、ＸＨＴＭＬ＋ＣＳＳ対応ブラウザが
主流なので、ＮＮ５．ｘはもういいでしょう。^^);;;
ということで、一番良かったのは、デザインを変更するのに、
ＣＳＳファイルを一箇所変えるだけで、
全部ページ対応出来てしまうところが、いやーーー楽ですね。
作成する前は、かなり大変かなとも思ったが、
一度ＣＳＳ対応してしまえば、その後は、楽チンです。^^)
[0回]
ＢＬＯＣＫＢＬＯＧのメルマガで、
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、
ＢＬＯＣＫＢＬＯＧの文書構造であれば、
基本的に左メニューのＣＳＳがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;
ところで、ＢＬＯＣＫＢＬＯＧさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね？
不思議だ？？なにか駄目な理由でもあるのでしょうか？
ということで、
簡単な方法は２通りあって、
[0回]
ＢＬＯＣＫＢＬＯＧのメルマガで
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあった。
見返り美人は、その理由として、
「とくにmikaeriは、ブラウザの横幅を変えたらペインがずれるなど」
と書いてあったが、
横幅変えたら、ずれるのはあたりまえじゃん。
と思っていたので、何が問題なのかが分からなかった。
で、他のサンプル（kimono-blue）を見てみると、
なぜかずれない。^^)
あれーー、ずれないのが正しいのかな？
そうか、これが根本的に問題なのね。
ということで、
ちょっと公開するのが自分的に恥ずかしい事で
遊べなくなってしまって暇なので
その問題箇所を調べてみた。
[0回]