CSSルール

コピペ出来そうなプロパティと値

プロパティの一覧なんて何処にでもあるんすけど、当たり前のように何かにリンクしてるので、ちょっとコピーしたい時に間違ってクリックしちゃったりっていうアレが嫌だったので、ずらっと並べてみたっす。

ボクの場合、「visibility」ってどうも覚えられない...

きっとそんな時にささやかに役立ちます。

値は、一番使いそうなのが入ってたり、どんな値が有るのか分かり難いプロパティや、スペルが覚えにくいっぽいのは｜で区切って一通り書いてあります。

モットーは「コピーしやすい」これです。えぇ。

CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）

3回続いた基本的なことも今回で最終です。
4回目の内容は、以下のことについて触れております。

んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。

  • スタイルの優先順位
  • セレクタの組み合わせ
  • セレクタのグルーピング
  • スタイルの優先順位詳細

CSSに関する基本的なこと1（記述方法、使用できる文字、コメントアウト）

実際の作業に入る前に、基本的なことをやっておきます。

作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。

以下の事について触れるので、理解している方は次のエントリーにお進み下さい。

  1. CSSの記述の仕方
  2. セミコロンについて
  3. 大文字と小文字の区別について
  4. class名やid名で使用できる文字
  5. コメントアウトについて

CSS2.1 で定義されているメディアの種類

たまに必要になると、良くわからなくなるCSS2.1で定義されているメディアの種類メモ。

all
すべての環境
screen
パソコン画面
tty
文字幅が固定の機器
tv
テレビベースのウェブブラウザ
projection
プロジェクタ
print
プリンタ
handheld
携帯用機器
braille
点字出力機器
embossed
点字プリンタ
speech
音声出力機器

振り分けるには、@mediaの後に半角スペースで該当のメディアの種類を指定します。
複数指定の場合はカンマ（,）区切りで指定。

@media screen,tv {
...
}
@media print {
...
}

出力とは関係ないですが、
@mediaルールは、Mac IE 5 が対応していないので、Mac IE 5 における CSSハックとしても使われてますね。

CSSの適用方法

基本的な部分であるCSSの適用方法について。

適用方法は、以下の3通り＋2通り。

  1. style属性を用いて、各要素に直接指定する
  2. （X）htmlのhead要素の範囲内に指定する
  3. head要素の範囲内で、link要素によって外部ファイルを読み込む

上記3つだけ覚えておけば特に困らない感じ。
むしろ、3の外部ファイルを読み込む方法だけ分かってれば良いと思う。

1、2のようにhtml文書内にそのままCSSを記述していく方法は非推奨とされてます。
なので、3の外部ファイルを読み込む方法が推奨されます。

大まかな理由としては、文章構造と表現（見栄え）部分の分離が目的の一つなのに、html文章内に書いちゃったら、通常通りhtmlにfont color="red"とかって書くのと変わらないから意味が無くなってしまう。
特に1を使う理由は殆ど無いので、使わないようにするのがええと思います。
使うとしたら、アフィリエイトとか広告のタグ中に入ってたりするのが浮かぶけど通常の用途だとまず必要性は無いかな。

2に関しては、サンプルとか何かしらで外部に書けない場合に使ったりする（と思う）

一応後の2つ。

  1. head要素の範囲内で、@importによって外部ファイルを読み込む
  2. xml-stylesheet処理命令で外部ファイルを読み込む

後の2つの方法は、分かる人だけ使えばいいので、特別な事でも無ければ覚える必要は無いかと。
むしろ、ボクが必要としてる段階の人じゃないので書けません。。。

ってことで、上の3つについてを追記にて。

:hover疑似クラスの記述順

:hover疑似クラスの記述順序はよく間違えるので、メモ。

a:link { 
	color:red;
}
a:visited {
	color:purple;
}
a:hover {
	color:green;
}
a:active {
	color:blue;
}

上記以外の順序で書くと、カスケード処理の規則により上書きされてしまうので、意図した表示とズレてしまう。

↑上に行くよ