デザインを変更してみようかと思って、やってみた。
そのやり方は、まあ、適当に行き当たりばったりでやってみた。
というのも、JavaScriptも同じだけど、
いちいち全部の仕様を頭で理解してから作りはじめたら、
自分の場合は、多分途中で投げ出す。^^);;
なので、まずは、なんでもいいから、変更して、どうなるかを画面で確かめて
また変更してを繰り返した方が、結局仕様は理解してなくても、
早くできる。別にCSSの大家になろうとは思わないので、
目的はただひとつ、デザインが変更できればいいのだ。
今回もその方法で実践してみた。
で、そのデザインは、どこにでもある単純なデザインで
本文の背景は、青の直線(上、左)と影(右、下)の組合せ。
メニュー枠は、青の点線(上、左)と影(右、下)の組合せ。
背景画像で落ち着いたイメージに見せる。
スライダー表示時のおかしな現象は、バグではなく、詳細にいじくってみたところ、
JavaScriptの問題ではなくHTML文の書き方の問題に行き着きました。
というのは、最終的にJSファイルの内容をHTML文内に書いて、
さらにJavaScriptも取って、HTML文だけにしたのにおかしい。
ところが高さの指定の他にfont-sizeで100pxと指定すると、うまくいく。
で、このfont-sizeの部分をheightに変えたら上手く行った。
すなわち、HTML文の中にdivのstyle属性のheightでheight:100;と
指定したのでは駄目で、
height:100px;と単位まで入れて指定しないとこの指定が無視されることが分かった。
ということは、DOCTYPEでブラウザが何か判断しているような気配が。。
で調べると、
先頭のDOCTYPE指定があると、対応するHTMLバージョンに正確に従うように記述するそうです。
これに従ってなかったために、IE6では属性指定が無視された為におかしくなったようです。
ちなみにBLOCKBLOGは、HTML4.01 Transitional を使ってます。
で、ネットで検索してみたら
この辺の詳細は、娘娘飯店しるきぃうぇぶのに詳しく書いてありました。
あちゃーーーということで、知らなかった自分が悪かったということで。。。
ということは、最近のブログ内で何かやろうとすると、この縛りに合うんですね。^^);;
で、この辺の状況がどうなっているのかを他のブログ(6サイト)でも見てみました。
まあ、皆同じだろうと思っていたが、どうも違うようで。。。
まず、BLOCKBLOGは、DOCTYPE宣言や、XHTML宣言はOKだけど、本文が全然XHTML規則に従ってない。
→5/23にソース見たら、直ってた。うーーん、こっそり直しましたね。^^)
2ちゃんねるも、DOCTYPE宣言や、XHTML宣言はOKだけど、本文がちょっとXHTML規則に従ってない。
livedoorは、本文はXHTMLに従って書いていそうな雰囲気がうかがえるが、宣言がしてない。
exiteは、DOCTYPE宣言だけはしているのに、対応するHTML Versionの規則で本文を書いてない。
で、DOCTYPE宣言、XHTML宣言し、本文もまともに書いていそうなものは、
見た中では、ココログ、infoseek、jugemでした。
どうも最新のブログといっても、作っている方の考え方があるのかもしれないが、
作り方がバラバラみたい。
まあ、使う方としては、一番最新の仕様に合わせて置けば、どこでも使えることだけは
いえるのかな。
といっても、自分のサイトは古い時代から書いてるので、XHTMLってなに、て世界だけどね。
人のことは、言えない言えないと。
ということは、ブラウザを開発する人は、もっと大変そうですね。
まともじゃないところも、まともに見せなくちゃ使ってもらえないのでね。
BLOCKBLOGのメルマガで
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあった。
見返り美人は、その理由として、
「とくにmikaeriは、ブラウザの横幅を変えたらペインがずれるなど」
と書いてあったが、
横幅変えたら、ずれるのはあたりまえじゃん。
と思っていたので、何が問題なのかが分からなかった。
で、他のサンプル(kimono-blue)を見てみると、
なぜかずれない。^^)
あれーー、ずれないのが正しいのかな?
そうか、これが根本的に問題なのね。
ということで、
ちょっと公開するのが自分的に恥ずかしい事で
遊べなくなってしまって暇なので
その問題箇所を調べてみた。
BLOCKBLOGのメルマガで、
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、
BLOCKBLOGの文書構造であれば、
基本的に左メニューのCSSがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;
ところで、BLOCKBLOGさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね?
不思議だ??なにか駄目な理由でもあるのでしょうか?
ということで、
簡単な方法は2通りあって、
昨日一日(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対応してしまえば、その後は、楽チンです。^^)