CSS備忘録

★font-sizeを指定したらline-hightもセットで指定すること
ブラウザごとユーザーの設定ごとにテキスト表示の解釈が違う。
IEでは行間を調整してくれないがfirefoxでは適当にやってくれる。
そのため、heightの見栄えに違いが出てしまう。



★できるだけハックは使用しない
基本に忠実に作っていればハック無しでもキチンと表示できる。
どうしてもダメなところはハックする。
ハックに頼り過ぎない。



★できるだけpaddingは使用しない。
　marginで処理できるものはmarginで。
marginが利かない場合、サイズによってmarginが取れずズレてしまうので
1pxずつ調整してみると、うまくいくことがある。



★IEなどブラウザ別表示の許容範囲とは？
配置がずれてなくて、画像等が隙間やずれが生じないこと。



★基本のターゲットブラウザ、エンジン
　IE6　IE7　Firefox1.5以上　Safari1.3以上
　IE　→　IEエンジン
　netscape・firefox　→　Gekkoエンジン
　Safari　→　Webkit



★faviconはサイトのルート上に置く
imagesフォルダーに入れるのではなくてindex.htmlと同じ階層にfavicon.icoを置く。
ローカルでチェックしてもfirefox以外のブラウザでは
ネット上から見ないとfaviconが表示できない。
IEはサーバーの一番上のフォルダにfavicon.icoがあれば勝手に読んでくれる。



★アンカータグの指定はlink visited hover activeの順番を守る
　この順番で設定しないと動作が正常にならない。



★XML宣言について
XHTMLで作るならXML宣言文は必須。
IE6の互換モードはターゲットブラウザから外す。（XML宣言しているから）
互換モードを入れてしまうとCSSはまったく変わってしまう。
互換モードや古いブラウザで作るならHTML4.01や最悪HTML3.2で作ること。
XHTMLでサイトを作る場合、基本的に古いブラウザや互換モードは外した場合の話になる。



★floatはtableの焼き直し。
　floatはtableレイアウトと大差ない。
　SEO対策を施すなら、絶対配置＆相対配置＆floatを組み合わせる。



★CSSの概念とは
　HTML　→　データ
　CSS　→　レイアウト
　という分離によって、データは重要なものを好きな位置に記述でき、CSSで見やすく配置すること



★テキストタイプのブラウザ
　SEOを意識するならテキストタイプのブラウザがあると便利。
　テキストタイプのブラウザ Lynx
googleなど主要なサーチエンジンのロボットはテキストタイプのブラウザの見え方と同じ情報の見方をしている。

web実務２回目でアクシデント！

ウチの会社は基本web仕事はしたくない方針なんだけど
営業がどーしても断れない！ってことで
簡単な更新作業を引き受けた。

前回は単純にカレンダーの画像差し替えだけで終わったから
なんの問題もなかったけど
今回はアップされてるものとクライアントの原稿のレイアウトが
大幅に変わっているってことで、
html + CSSで更新、校正していた。


そして本日ＯＫが出たので、本アップロード！
順風満帆～～！！


ところが、なんということでしょう…。

ＩＥでみたらズレていたのだ！おおう。


実はあたしはfirefoxを使ってて、
一度もIEで確認してなかったんですわ～！！

firefoxの状態でクライアントに校正チェック出してしまったという。。。
怖ろしい！アホ！まぬけ！

上司に事情を説明し、緊急オペ！（？）

どちらかに合わせようとすると、片方がズレる。。。
marginとpaddingの数値を直し、スターハック使いまくり！
そのうちアタマが混乱！

「ＩＥだけに合わせてたらいっかな～」と
悪魔のささやき…。
いや！お客さんがＩＥ見てるとは限らんしっ


ちょっと冷静になって考え、改めてそれぞれのdivとcssの関係を見てみる。
図に書いてみて、「あ、ここのdivの左右marginとればいいだけでは？！」
とひらめき。

ぶじ解決～～～！
ああ。よかった。

つか、あたしがアホなんだね。。
結果的にIEハックの勉強＆実践できたってことで勉強になりました。


もうこんな初歩的ミスは絶対にしない！！