忍者ブログ
[1] [2]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 新規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

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

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

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

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

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

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

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

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

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

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

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

拍手[0回]

 昨日一日(17時間)掛けて、新サイトの基本となるHTMLテンプレートと
CSSデザインを作った。

 で自分がHPを初めて作成したのは、1998年だった。
その頃は、CSSもあったが、まだ一般的じゃない。
で、普通にHTMLで記述していた。

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

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

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

 で、最近はIEのひとり勝ちとなったため、
NN4.xで扱っていたLAYER仕様は、もう対応する必要もなくなった。

これからは、変ってDOMという標準仕様が出来たので、
これだけを対応しておけば、今後は済みそうである。

 で、話を戻して、HTMLの世界も、XHTMLという新しい考え方に
替わってきた。でも、今まで作成してきたHTMLをすべてXHTML対応に
変更するのは、考えただけでも、頭が重くなるので、考えないことにしている。

 しかし、今回新しいサイトを立ち上げる際に、ちょっと考えた。

今までは、サイト内が同じデザインで作られてない。
まあ、その時の気持ちでいろいろ替わるんだけど。。。^^);;

 これでは行けないと、まずはサイト内のすべてのページのデザインを
統一したデザインで作ろうと思った。

 じゃ、どうやって作るかを考えて、無料素材のサイトで
HPデザインテンプレートやHP素材を見てみたが、
どうもこれだと思うものがなくて。。。。

 で、BLOCKBLOGで作ったカラオケのデザインがなんか良いみたい
と思って、それじゃこれを基本デザインにしようと。

 このHTMLは、XHTML的に書いてあるので、
当然CSSファイルを使っている。

 これを改良してデザインを考えてみた。

でも一応BLOCKBLOGさんに、BLOCKBLOG以外で改良して使っていいか
確認してみよう。^^)

→2005/01/12:CSSはクリエイティブxxxの表記有り以外はOKとのことで、
       water-blueを改造したのでOKですね。

TOPページとそれ以外では、基本的に先頭のタイトル画像の縦長を
変えて、それ以外は、すべて同じにした。

さらに左メニューとフッターも各ページに付くので、
これはいちいち各ページに記述していたら、ここが変更になったときに
修正が大変だし、修正抜けもありそうなので、
ここはJavaScriptで書き出すことに。

ただ、ローカルでテストしている場合と、サーバにUPした
場合で、jsファイルなどのパス指定が変るので、
これローカル用と、サーバ用で2種類作っていては面倒なので、
現在のURLを取得してどちらかを判断するようにして、
ひとつのファイルで済むようにした。

さらにソフトメニューもそのまま使えばいいので楽。

ということで、jsファイルやCSSファイルに共通部分は記載したので、
HTMLファイル内は、非常にサイズも小さく、見やすくなりました。

 ただし、NN5.x以前のNNブラウザは、完全に自分の頭からは
切り捨てました。これからは、XHTML+CSS対応ブラウザが
主流なので、NN5.xはもういいでしょう。^^);;;

 ということで、一番良かったのは、デザインを変更するのに、
CSSファイルを一箇所変えるだけで、
全部ページ対応出来てしまうところが、いやーーー楽ですね。

作成する前は、かなり大変かなとも思ったが、
一度CSS対応してしまえば、その後は、楽チンです。^^)

拍手[0回]

 BLOCKBLOGのメルマガで、
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、

BLOCKBLOGの文書構造であれば、
基本的に左メニューのCSSがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;

ところで、BLOCKBLOGさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね?
不思議だ??なにか駄目な理由でもあるのでしょうか?

ということで、
簡単な方法は2通りあって、

拍手[0回]

 BLOCKBLOGのメルマガで
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあった。

見返り美人は、その理由として、
「とくにmikaeriは、ブラウザの横幅を変えたらペインがずれるなど」
と書いてあったが、

横幅変えたら、ずれるのはあたりまえじゃん。
と思っていたので、何が問題なのかが分からなかった。

で、他のサンプル(kimono-blue)を見てみると、
なぜかずれない。^^)

あれーー、ずれないのが正しいのかな?
そうか、これが根本的に問題なのね。
ということで、
ちょっと公開するのが自分的に恥ずかしい事で
遊べなくなってしまって暇なので
その問題箇所を調べてみた。

拍手[0回]

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

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