css3

2015.04.18

:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。

使い方の基本

○番目のエレメントを指定する
※3番目の場合

li:nth-child(3){
	color:red;
}

li:nth-child(3){

color:red;

}

奇数、偶数を指定する

※奇数

li:nth-child(odd){
 color:red;
}
又は
li:nth-child(1+2n){
	color:red;
}

li:nth-child(odd){

color:red;

}

又は

li:nth-child(1+2n){

color:red;

}

※偶数

li:nth-child(even){
	color:red;
}
又は
li:nth-child(2n){
	color:red;
}

li:nth-child(even){

color:red;

}

又は

li:nth-child(2n){

color:red;

}

○番目以降をすべて指定する
※３番目以降を指定

li:nth-child(n+2){
	color:red;
}

li:nth-child(n+2){

color:red;

}

IE8以下での対応

ハックを利用する
３番目を指定する場合

ul>*:first-child + * + * {
	color : red;
}

ul>*:first-child + * + * {

color : red;

}

:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。

jQueryで対応する

jqueryで「addClass」を定義して対応することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("li:nth-child(3n)")
	.addClass("li-third");
});
</script>

$(function(){

$("li:nth-child(3n)")

.addClass("li-third");

});

</script>

３つごとのliに「li-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。

Selectivizrを利用する

css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。

http://selectivizr.com/

※利用するときはjqueryも一緒に（一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり）

Selectivizr CSS3 pseudo class and attribute selectors for IE 6 8

2015.04.13

html5,CSS3でサイト制作するときにお世話になるjavascriptライブラリ（主にIE対応）

IE8以下はhtml5を認識しない、css3にも対応していないのでjavascriptライブラリにお世話になります。

そのまとめ。

html5shiv.js

https://github.com/aFarkas/html5shiv

html5から導入されたタグ(header,footer,section,article,asideなど)はIE8以下では認識されない。
それらをIE8でも解釈させるためのjavascript ライブラリ。

<!--[if lt IE 9]>
	<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

respond.js
https://github.com/scottjehl/Respond

scottjehl Respond · GitHub

Media Queries（max-widthとmin-width）を解釈可能にするpolyfill

<!--[if lt IE 9]>
	<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

selectivizr
https://github.com/keithclark/selectivizr

Selectivizr CSS3 pseudo class and attribute selectors for IE 6 8

CSS3をIE8以下でも認識させるためのjavascriptライブラリ「Selectivizr」
疑似クラス・擬似要素（の一部）が利用可能に。

Selectivizrを使う上での注意

jQuery,prototype,YUIなどのJavaScriptライブラリが必須
CSSソースはlink要素を使って読み込む

<!--[if lt IE 9]>
<script type="text/javascript" src="./selectivizr-min.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

modernizr
http://modernizr.com/

Modernizr the feature detection library for HTML5 CSS3

ブラウザで対応している機能をCSS,Javascriptで確認できる。

2015.03.13

nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

<ul class="line-boxies">
	<li>col 1</li>
	<li>col 2</li>
	<li>col 3</li>
	<li>col 4</li>
	<li>col 1</li>
	<li>col 2</li>
	<li>col 3</li>
	<li>col 4</li>
</ul>

</ul>

CSS（ie8　非対応）

ul.line-boxies{
	margin:30px auto;
	width:380px;
	list-style: none;
	overflow: hidden;
}
ul.line-boxies li{
	float: left;
	margin:20px 20px 20px 0;
	padding-left:0;
	width:80px;
	height:40px;
	background:#efefef;
	box-shadow: 0 1px 1px #444;
}
ul.line-boxies li:nth-child(4n){
	margin-right:0;
}

ul.line-boxies{

margin:30px auto;

width:380px;

list-style: none;

overflow: hidden;

}

ul.line-boxies li{

float: left;

margin:20px 20px 20px 0;

padding-left:0;

width:80px;

height:40px;

background:#efefef;

box-shadow: 0 1px 1px #444;

}

ul.line-boxies li:nth-child(4n){

margin-right:0;

}

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

ul.line-boxies > *:first-child+*+*+*{
	margin-right:0;
}
ul.line-boxies > *:first-child+*+*+*+*+*+*+*{
	margin-right:0;
}

ul.line-boxies > *:first-child+*+*+*{

margin-right:0;

}

ul.line-boxies > *:first-child+*+*+*+*+*+*+*{

margin-right:0;

}

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

<!--[if (gte IE 6)&(lte IE 8)]>

<![endif]-->

2015.02.21

クロスブラウザ（IE8以下でも）opacity,RGBaに対応する

IE8以下では透明の要素（opacity,rgba）には対応していませんが、
IE8以下でも対応させるには

opacity:0.7;
filter: alpha(opacity=70);        /* ie5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* ie8 */

opacity:0.7;

filter: alpha(opacity=70); /* ie5-7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* ie8 */

例えば背景だけを透過させてテキストは透過させたくない場合は、opacityではなくRGBaを設定します。

.box{
background-color: rgba(0,0,0,0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); /* IE8以下*/
}

.box{

background-color: rgba(0,0,0,0.8);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); /* IE8以下*/

}

GradientType

グラデーションの方向を指定
0は縦方向、1は横方向のグラデーションになります。

StartColorStr

グラデーションの開始の色を指定。
#00000000～#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

EndColorStr

グラデーションの終わりの色を指定
#00000000～#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

参考サイト

RGBa Browser Support
http://css-tricks.com/rgba-browser-support/

IE8とIE9できれいに透過を適応させるCSS
http://news.ko-zu.com/bgiecss/

2015.01.12

css3アニメーションライブラリの一部

Animate.css

https://daneden.github.io/animate.css/

http://mynameismatthieu.com/WOW/

CSS3 Animation Cheat Sheet Justin Aguilar

http://www.justinaguilar.com/animations/index.html

Hover.css A collection of CSS3 powered hover effects

https://ianlunn.github.io/Hover/

2014.03.08

Retina Display 用のMedia Query

Retina 対応の画像を用意する場合

; html-script: false ]@media only screen and (min-device-width : 320px)
  and (max-device-width : 480px) {

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

}

; html-script: false ]@media only screen and (min-device-width : 320px)

and (max-device-width : 480px) {

@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and ( min--moz-device-pixel-ratio: 2),

only screen and ( -o-min-device-pixel-ratio: 2/1),

only screen and ( min-device-pixel-ratio: 2),

only screen and ( min-resolution: 192dpi),

only screen and ( min-resolution: 2dppx) {

/* Retina-specific stuff here */

}

device pixel ratio　とは
デバイスピクセル比とかいわれている
デバイスピクセル（dpx）とCSSピクセル（csspx）の対応

スマートフォンの画面解像度とピクセル密度についてはこちらのサイトがとても分かりやすかったです。
http://myakura.github.io/n/density.html

CSS TRICKS
Retina Display Media Query
http://css-tricks.com/snippets/css/retina-display-media-query/

mixin

@mixin imgRetina($image, $extension, $width, $height) {
     background: url($image + '.' + $extension) no-repeat;
     width: $width;
     height: $height;

     @media (min--moz-device-pixel-ratio: 1.3),
           (-o-min-device-pixel-ratio: 2.6/2),
           (-webkit-min-device-pixel-ratio: 1.3),
           (min-device-pixel-ratio: 1.3),
           (min-resolution: 1.3dppx) {     
                background-image: url($image + '-2x' + '.' + $extension) no-repeat;
                background-size: $width $height;
     }
}

@mixin imgRetina($image, $extension, $width, $height) {

background: url($image + '.' + $extension) no-repeat;

width: $width;

height: $height;

@media (min--moz-device-pixel-ratio: 1.3),

(-o-min-device-pixel-ratio: 2.6/2),

(-webkit-min-device-pixel-ratio: 1.3),

(min-device-pixel-ratio: 1.3),

(min-resolution: 1.3dppx) {

background-image: url($image + '-2x' + '.' + $extension) no-repeat;

background-size: $width $height;

}

device pixel ratio が1.3にするとAndroidの高解像度デバイスにも対応するってことでしょうか
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
http://www.webcreatorbox.com/tech/sass-mixin/

css3

:nth-childの基本とIE対応

使い方の基本

○番目のエレメントを指定する
※3番目の場合

奇数、偶数を指定する

○番目以降をすべて指定する
※３番目以降を指定

IE8以下での対応

ハックを利用する
３番目を指定する場合

jQueryで対応する

Selectivizrを利用する

html5,CSS3でサイト制作するときにお世話になるjavascriptライブラリ（主にIE対応）

html5shiv.js

respond.js
https://github.com/scottjehl/Respond

selectivizr
https://github.com/keithclark/selectivizr

modernizr
http://modernizr.com/

nth-child、last-childをie8でも使いたい

クロスブラウザ（IE8以下でも）opacity,RGBaに対応する

GradientType

StartColorStr

EndColorStr

css3アニメーションライブラリの一部

Retina Display 用のMedia Query

最近の投稿

カテゴリー

メタ情報

使い方の基本

○番目のエレメントを指定する ※3番目の場合

奇数、偶数を指定する

○番目以降をすべて指定する ※３番目以降を指定

IE8以下での対応

ハックを利用する ３番目を指定する場合

jQueryで対応する

Selectivizrを利用する

html5shiv.js

respond.js https://github.com/scottjehl/Respond

selectivizr https://github.com/keithclark/selectivizr

modernizr http://modernizr.com/

GradientType

StartColorStr

EndColorStr

最近の投稿

カテゴリー

メタ情報

○番目のエレメントを指定する
※3番目の場合

○番目以降をすべて指定する
※３番目以降を指定

ハックを利用する
３番目を指定する場合

respond.js
https://github.com/scottjehl/Respond

selectivizr
https://github.com/keithclark/selectivizr

modernizr
http://modernizr.com/