基礎から理解するためのCSS3に関するサイトのまとめ

CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。
まずはCSS3の基本が解説されているサイトです。これは日本語の方がいいと思うので、日本語サイトのおすすめを紹介。

CSS3リファレンス

CSS3リファレンス

有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。

CSS-EBLOG

CSS-EBLOG

各ブラウザで先行実装しているCSSプロパティがまとめられています。

CSS3 Files

CSS3 Files

【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。


次にブラウザごとの対応状況を確認するサイトを紹介。

HTML5 & CSS3 READINESS

HTML5 & CSS3 READINESS

HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。

HTML5 & CSS3 Support

HTML5 & CSS3 Support

こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セレクタごとで表示されていて判断材料が多いです。

When can I use...

When can I use...

こちらはブラウザのバージョンごとに対応状況が表示されます。Android Browserなんかもあったりします。

これらを見ればIEの対応状況がダントツに遅いことが分かります。圧倒的シェアを誇るブラウザの対応が一番遅いってどうなんだ。しかもIEはユーザーの新バージョンへの切り替えも遅い。ってことで、IEにあまり期待せずサーバ側で対応する方法が色々考え出されています。


CSS3 PIE

CSS3 PIE

CSS3非対応のIEでも対応することができます。利用できるプロパティは以下のとおりです。ジェネレータもあるので簡単に設置できます。

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image
show CSSにチェックを入れるとコードが表示されるわけですが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてくださいね。
behavior: url(PIE.htc);

CSS3が非対応なブラウザでも利用できるようにするツールのまとめ |コリス

coliss

先ほどのCSS3 PIEなど、様々なものが紹介されています。全てを解決してくれるようなものはまだ現れていないようです。


次は様々なCSS3ジェネレータです。

CSS3.0 Maker

CSS3.0 Maker

テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。

  • CSS Transform
  • Box Shadow
  • Text Shadow
  • Text Rotation
  • RGBA
  • @Font Face
  • Outline Offset
  • Transition
  • CSS Gradient

CSS3 Generator

CSS3 Generator

先ほどより指定できる要素は多いですが、先ほどの方が細かく指定できそう。

  • Border Radius
  • Box Shadow
  • Text Shadow
  • RGBA
  • @Font Face
  • Multiple Columns
  • Box Resize
  • Box Sizing
  • Outline
  • Transitions
  • Transform
  • Selectors
  • Gradients

CSS3 Plaground

CSS3 Plaground

枠の角丸、シャドウやフォント関連など様々な要素を同時に指定することができるので実用的だと思います。

  • Border Radius
  • Box Shadow
  • Text Shadow
  • Transforms
  • Columns
  • Gradient Background
  • Outline Offset

CSS3 Please!

CSS3 Please!

コードを直接編集できるジェネレータです。編集したらリアルタイムでプレビューが表示されます。珍しい形ですが自分でコードを触れるので勉強になりそう。

CSS3プロパティジェネレーター

CSS3プロパティジェネレーター

日本語サイトで、テキスト関連、グラデーション、ドロップシャドウ、角丸などの設定がおこなえます。

CSS3 Button Generator

CSS3 Button Generator

以下の要素を指定して画像のようなボタンを作ることができます。

  • background color (グラデーション)
  • border / padding
  • drop shadow
  • innner shadow
  • text font
  • text shadow

css3 button generator

css3 button generator

こちらもボタンで、テキスト、背景、ボーダーなどを自由に設定できます。指定できる要素は先ほどのものとほぼ同じですがhover設定もできます。

Button Maker

Button Maker

こちらも指定できる要素はほぼ同じですが、hover設定はこちらの方が豊富です。


ということで色々集めてみました。IEが不甲斐ないので普及まで時間がかかるかもしれませんが、面白そうなのでこれを機に勉強してみます。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加