- 追加された行はこの色です。
- 削除された行はこの色です。
-CSSについて
#contents
*基本 [#q25658b0]
p {color: red} → pがセレクタ、colorがプロパティでredが値
**インラインstyle属性 [#v0c61a2e]
cssを外部ファイルに書かないで直接指定するやり方。昔よくやっていた。携帯ではいまだにこれ。
**クラスとIDセレクタ [#f4415166]
基本中の基本だが、classは複数OK（複数に対して指定したい場合）、IDはひとつだけ。IDは#で指定するこれはページ内のリンクから連想しよう！
p.hot {color: red}
.cool {color: blue}
p#hot {color: red}
#cool {color: blue}
**ブロックレベル要素とインライン要素 [#t6cdccd4]
-<a>などはインライン要素。HTMLStrictではbodyにおけるのはブロックレベル要素なので<a>タグを書くときは<p>などのブロックレベル要素で囲わないとだめ。関連してスタイルのblockとinlineも同じようにblockだと文字の間に該当要素を挟むことができず、inlineだと文字の間に該当要素を挟むことができる。
**marginとpadding [#a0fd2788]
大まかにmarginは外側の余白、paddingは内側の余白。borderはその両方に挟まれる壁のイメージで考える。
*media queries [#lca52076]
画面のサイズによって適応するCSSを書き換えてくれるという優れもの
**ファイルの読み込みを変える場合 [#k3c89e2f]
<link href="/pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 900px)"/>
<link href="/smartphone.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)"/>
**CSSファイルに記載する [#ta51cf02]
@media screen and (max-width: 960px) {
/* ブラウザ幅が 960px より小さいときに適用されるスタイル */
}
@media screen and (min-width: 960px) {
/* ブラウザ幅が 960px より大きいときに適用されるスタイル */
}
**条件適用 [#f937a531]
|@media screen and (max-width: 960px)|ブラウザ幅が 960px より小さいときに適用される|
|@media screen and (min-width: 960px)|ブラウザ幅が 960px より大きいときに適用される|
|@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)|デバイス幅が 768px より大きく 1024px より小さいときに適用されるスタイル|
*スタイル指定の優先度 [#x4c5ba7d]
外部スタイルシート < STYLE要素 < インライン・スタイル
同じ優先度同士なら後ろのほうが優先度が高くなる。
!importantキーワードで、優先度を最高に指定出来る。
また指定はより詳細な方がマッチする。
.hoge { display:none; }
div.big div.hoge { display:block; }
<div class="hoge>見えません</div> → 一般的な指定が効いてdisplay:none
<div class="big"><div class="hoge">見えます</div></div> →下の詳細な指定が効いてdisplay:block
**親子関係 [#d5a846a2]
-<div id="main"><h2/></div>にのみ適用させる書き方。
div#main h2 { color: #C13A72; }
*DIVによるレイアウト [#c1171bb2]
三段組でも基本は二段組みと一緒。回り込みを解除しない限り横に並ぶので、回り込み解除専用のDIVを用意しておく。回り込み解除のdivは表示上影響を与えないのが好ましい。divはブロックレベル要素なので中にインライン要素を非表示でいれるというのが正しい。
**display-style [#bbcf6185]
*CSSハック [#e14495bb]
**スターハック [#u15f4fef]
-先頭に*。IE6以下対応 [#a4610ab7]
* html p { color:#FF0000; }
**条件分岐コメント [#qcadd47a]
-見た目単なるHTMLコメントなんだけど、IEのみ解釈するという不可解な仕様
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen" />
<![endif]-->
*逆引きリファレンス [#be30a233]
**<LI>を横に並べたい [#m6a93e34]
+display:inlineを指定する。
+float:leftを指定する
#counter
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
