cssの約束ごとメモ

■ css読み込み優先順位

低い	→	→	高い
要素名での指定	classでの指定	idでの指定	!importantを指定したCSS

■ cssで指定できる単位(使用頻度が高そうなもののみ説明)

%	プロパティによって異なるが指定したものにたいしての割合
em	フォントサイズを1とする単位
px	ピクセル（1ドットかな）
その他	ex,pt,pc,mm,cm,inなど

■ はてなでは特に指定はできないかもだけれど、適用メディアの指定

指定名	適用メディア
screen	パソコン画面
tty	テキスト端末
projection	プロジェクタ
handheld	携帯用機器
print	プリンタ
braille	点字出力
aural	音声出力
all	全てのメディア
embossed	点字プリンタ

■ cssコメントの書き方
コメントの入れ子はしない(正しくはしない方がいい)＞知らなかったorz
こう言うのはしない方がいいと言うことで；；

/*見出１しの設定
h1{
size:90%
color:#ff0000;/*シーズンごとに替える色*/
}
h2{
size:90%
color:#ff0000;/*シーズンごとに替える色*/
}
*/

■ HTMLやcssの構文チェックサイト
W3C CSS 検証サービス
 正当(valid)なHTMLかどうかのチェック
 リンクチェッカー
■ CSSの効率化
cssってやっているとどうも混乱してしまって本来効率化なんかも目指していたハズなのにドツボにはまること多しorz
なので、目的を明確に

再利用しやすいか
書式構成部分が読みやすいか
書式構成部分が区別できているか
書式構成部分が他者にも理解しやすく書いているか
ミスを誘発するような書き方かどうか

■ ブラウザごとに異なる表示を調整するためのハック
ブラウザごとに表示が異なるのは大前提としてあるけで、少しでも、元のデザインに近づけるとなるといろいろやらなければならないこと多し。で、簡単なことはサイトとしての推奨環境を明示して保証しない(大げさ)ことを伝える。
ネットや本などで紹介してる方法でおこなうことで、ある程度までは古いブラウザでも、対応しすることはできる。JyavaScriptなどで振り分けるというものも一つの方法だけれどcssの読み込みで回避できる可能性ができそうな情報整理メモ

まず、ヘッダーでスタイルシートを読み込ませることができないように読み込み専用のcssファイルを作り、その読み込み専用のcssファイルには、本来表示させたいcssを記述しておく
まどろっこしいので、簡単に言うと2つのcssファイルを作成し、そのファイルの読み込ませ方で古いブラウザには読み込ませないようにしようという手順。
base.cssのファイル

h1{
size:90%
color:#ff0000;/*シーズンごとに替える色*/
}
h2{
size:90%
color:#ff0000;/*シーズンごとに替える色*/
}

import.cssファイルで、bace.cssを読み込ませる

@import"base.css"

↑この書き方だとIE4はbase.cssを読まない。
ちなみに@import url("読み込みたいファイル.css")となるとIE4が外部cssを読み込んでしまうらしい。

cssを使うHTMLでのヘッダーでの指定

<link href="import.css(cssファイル名)" media="screen,tv"
 rel="stylesheet" type="text/css" />

↑この書き方だとNN4はスタイルシートは読まない。
cssでNN4の初期バージョンは@import命令が実行されているとブラウザがフリーズするそうなのでmediaタイプはscreenと違うallとかscreen,tvとか指定しておくと良いらしい。

■ バージョン5対策(問題児対策)
以下の表示で○○.cssはファイル名
winIE5だけに読み込ませる

@media tty{
i{content:"\";/*""*/}};@import'winie5.css';{;}/*";}
}/**/
}

winIE5.5だけに読み込ませる

@media tty{
i{content:"\";/*""*/}}@m;@import'winie55.css';/*";}
}/**/

macIE5.xdだけに読み込ませる
8/8追記：これってテストしてみたら、MacIEには読み込ませない・・・というのが正しいのかもしれない＞実験結果引き続き確認中；

/*\*//*/
@import"macie5.css"
/**/

macIEのみ適用しない

/* ここからmacIEのみ読み込ませない \*/
h1{
color:#00ff00;
}
/* こんな感じでここまで */

動作確認はこれからのメモ。
なので、検証なしスペルミスとかありそうな予感が←要注意

やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

cssの約束ごとメモ