うっかりしてました。

IE6には、floatに指定した要素のmarginが倍になってしまうという

バグがあったことをすっかり失念してました。

いえ、ちゃんと覚えてはいたのですが、

IE7で確認して大丈夫だったので本当にうっかりでした。

このバグの回避はある意味有名なので（笑）

知っている方も多くいらっしゃるとは思いますが

自分のためのメモ代わりに。

「floatを指定している要素に　display:inline;　を記述する。 」

これだけ。

こんな簡単なこと、忘れちゃいけないよ、＞自分。

公開前に気がついて本当によかった。

先日書いたサイトのコーディング、
卒制では使わなかったことをやってみたのですが、
どうもうまくいかず、
それでもなんとかみてくれ的にはなんとかいったのですが、
昨日、一緒にユニット組んでやっている方が、
CSSのプロの人にソースを見てもらって
修正していただけました。

それがもう感動。
XHTMLの方もCSSの方も簡潔になり、
どうやら私は色々やっているうちに
ムダなソースを書いてしまっていたようです☆

ムダのない、きれいなCSSを書けるようになりたいなぁ。
もっと経験を積まないとだめだね、うん。

今更ながら、FireFoxアドオンのWeb Developerをインストールしました。

ていうか、これすごい！
CSSがワンクリックで見られるし、
ブロックレベル要素が要素名付きで表示することがでる。

すごい、すごい。

Web Developer1.1.2ダウンロードのページへ

カテゴリー的にはこれはJavascriptかな？

文字の大きさの切り替えぼたんを設置しようとしたのだけれど、
これが大苦心。

学校の講師のかたからサンプルをもらっていたにもかかわらず、
まーったくうまくいかなかった。

何がうまくいかなかったのかというと、
スタイルシートを読み込まなくなってしまったのだ。

色々苦心した結果、

＜head＞内に書く＜link＞のデフォルトの方の＜title＞をとってしまった。もっとよいやりかたがあるのだろうけれど、
とりあえずこれで応急処置。

あとは文字の切り替えの画像の切り替えだ…。

CSSファイルを切り替えたいとき。

●title属性で名前を付けておくと代替スタイルシートになる。
　名前を付けていないと固定スタイルシート。

●デフォルトで適用したい場合は
＜link rel=”stylesheet” href=”" type=”text/css” title=”"＞

●デフォルトでは適用しない場合は
＜link rel=”alternate stylesheet” href=”" type=”text/css” title=”"＞

とする。

●NN4対策

NN4はlink要素のmedia属性の値が”screen”と一致しない場合はCSSを読み込まない。（”screen,tv”や”all”という風に指定）

●IE4対策

読み込み専用のCSSファイルを用意し、
@import url(“”);で指定するのではなく、
@import “”;で指定する。　

Yahoo!UILibraryが提供しているFonts CSSを利用する。

まずbodyに
text-align:centerを指定。

body要素の子要素に
widthで幅を指定し、
margin:0 auto;
text-align:left;
にして、中の要素を左揃えにする。

※bodyにtext-align:centerを指定するのはIE6対策。

紅緒ジェーピーのトップに
お知らせを載せたのだけれども、

MacのIEとFireFoxはオッケーなのに
safariの表示がおかしい…。

てことはWINでの表示もおかしい可能性が。
（現在仕事場なので確認できず）

バックグラウンドの色は読み込んでいるので
CSSは一部読み込んでいるようだけれど、
#containerを読み込んでいないのかしら…。

こんな初歩でつまづくとは…とほほです。
一体何が悪かったのか、
ちょっと研究してみます。はぁ。。

*****************

その後。
どうやら変なスペースが入っていたみたいで、
原因はそれのようです。
ありがちなミス…。