Template Style

CSS3 iPhone 3G に続き、今度は、CSS3 と HTML で iPad2 を作ってみました。

More… »

Mobile Safari は、キストの文字サイズを自動的に調整してくれます。
iPhone などの小さなウィンドウでは、必須の機能といえるでしょう。
しかし、テキストのみで構成されるサイトなど場合、テキストサイズを変更されると、サイトのデザインが崩れてしまい場合があります。

サイズ変更を無効化したい場合は、スタイルシートに

-webkit-text-size-adjust: none;

と指定します。

nth-child() 疑似クラスは、任意の順番の要素を指定できます

ul li:nth-child(2n) または ul li:nth-child(even)

と記述すると、偶数番目のアイテムに対してCSSを適用できます。

ul li:nth-child(2n+1) または ul li:nth-child(odd)

と記述すると、奇数番目のアイテムに対してCSSを適用できます。

ul li:nth-child(3n)

と記述すると、3の倍数番目のアイテムに対してCSSを適用できます。

More… »

CSS3 と HTML で iPhone を作ってみました。

More… »

transition プロパティで変化させるプロパティや時間、タイミングを指定します。

transition: [プロパティ] [時間] [タイミング]

例

TRANSITION TEST

.Test a {
	color: #0000FF;
	transition: color 1s ease-in-out;
}
.Test a:hover {
	color: #FF0000;
}

More… »

CSS3 から導入された「border-radius」を使うと、画像や JavaScript を使用せずに、CSS だけで角丸が実装できます。

今現在「border-radius」に対応しているブラウザは、Firefox, Safari, Google Chrome のみです。

一気に角丸の大きさを変更する場合

.ExampleClass {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

角ごとに角丸の大きさを変更する場合

More… »

Internet Explorer にはプロパティの前にアンダースコア( _ ) を入れても、指定した値が適用されるバグがあります。そこで、IE のみに適用する値をアンダースコアを前に入れたプロパティで指定することで IE のバグを回避することができます。次のコードでは、IE 以外のブラウザでは color: #FFFFFF が、IE6 では color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF;
    _color: #000000;
}

!important とは

スタイルはタグやクラス、ID などを識別して適用されます。スタイルを重複して指定すると、タグよりもクラス、クラスよりも ID が優先されます。また、CSS ブロックや外部 CSS ファイルを使用した場合は、より下に記述したスタイルが優先されます。次のコードの場合、より下に記述した color: #000000 が適用されます。

More… »