CSS

レスポンシブのためのメディアクエリの書き方

レスポンシブデザイン(ウィンドウサイズでPCやスマートフォンでの閲覧に最適化)でサイト構築する場合に要になります。
ウィンドウサイズによって読み込むCSS(スタイルシート)を切り替えることでユーザビリティの向上を図れますし、またモバイルフレンドリーに適用するためスマートフォン検索でもGoogleに嫌われにくくなります。

続きを読む

古いIE(6~9)にCSS3を対応させる

サポートの切れたWindowsOSの標準ブラウザを無視し、モダンブラウザを対象にCSS3を記述するのであれば、下記の対応はいらないと思います。(2016年9月現在)
古いIEに対応する必要がある方は参考にしてみてください。

– – – – – – – – – – – –

古いIE(Internet Explorer 6~9)でもCSS3のプロパティを反映させようと思った場合、『CSS3 PIE』というものを使います。
今のところ対応しているプロパティは少ない(角丸、グラデーション、ボックスの影など)ですが、使えないよりマシと思えば利用してみるのもいいと思います。

続きを読む

text-shadow box-shadowの使い方

テキストやボックスを立体的に見せるスタイルシートの説明です。
text-shadowはテキストに、box-shadowはボックスに影を付けます。(そのままです)

続きを読む

gradient(グラデーション)の使用例

グラデーションを指定するgradientの使用例と説明です。
background に指定することでボックスの背景に線形グラデーションを表現できます。
使用にはベンダープレフィックス(-moz-,-webkit-)を付ける方法が一般的のようです。

続きを読む