偶数・奇数 疑似グラス スマホ

わからなくなったらここで確認

↓


●nth-child() 疑似クラスを試してみる | d-spica

http://blog.d-spica.com/entry/080526nthchild.html

CSSの省略 （margin）

たまに分からなくなるのでメモ


margin:5px;→全部

margin:5px　5px;→上下　左右

margin:5px　5px　5px;→上　左右　下

角丸 シャドウ 【CSS3】

◆角丸
border:5px solid #ffcc99;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;



◆シャドウ
box-shadow:1 px 1 px 5 px #000;
-moz-box-shadow:1 px 1 px 5 px #000;
-webkit-box-shadow:1 px 1 px 5 px #000;

:横　縦　ぼかし　＃色;


横を『0』にすると両サイドに影ができる。

綺麗だった比率は　： 0 0 0.2em ＃色；
※IEだと、0ゼロにすると消える…
↓
解決策を探すのが面倒なので、IEだけ背景にいれるしかない。

とっても親切参考サイト↓
http://www.tagindex.com/stylesheet/filter/glow.html
http://www.htmq.com/style/filter.shtml

IE7と8 『ie-css3』がうまくいかないとき 【CSS3】

◆『ie-css3』がうまくいかないとき『角丸』

→CSS3で指定したところが、消えた
原因↓
背景の色の指定
なぜか、背景の色を指定したいとき、一番下に表示される。

CSS3プラス
position:relative;
z-index:1;

と、かくと直った。




◆IE用にまとめたCSSをつくってみる。

スタイル名{
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}


何気に動く、IE8・IE7は動いた。IE9は知らない。

※注意点

置くところは、CSS3でかいたCSSより上に置かないとできない。
一番上らへんに置けば問題ない。今のところ角丸だけ？

＜例＞
{IE用にまとめたCSS}
｛角丸してねCSS3｝



『PIE.htc』を使うと、↑これらはいらない。

displayBOX 【CSS3】

◆簡単にレイアウト




A…display:box;（★）

BとC…box-flex:●●;→比率
　　　　box-ordinal-group：●●；→順番



（★）…-moz-とか、つくところが違うので注意！！


IEとオペラは見れない。