CSSの勉強中に困ったら
公開:
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。
仕様を確認する
とりあえずW3Cを見に行った方が早い。
そもそもプロパティや値について分かっていない場合はここで解決することが多い。
- CSS current work & how to participate
- 現在の状況と仕様書の目次。
- CSS3の日本語訳集 - 血統の森 web実験小屋
- 日本語訳へのリンク集。
W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。
ブラウザの対応と実装
対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。
- When can I use… Support tables for HTML5, CSS3, etc
- 対応状況表。まずここに調べに行くことが多い。
- CSS - Contents and compatibility
- 有名なサイト。対応状況とサンプル。
「だいたいの対応状況は分かったけど実際のところどうなの?」となったら、各ブラウザのサイトに行く。
- Cascading Style Sheets
- MSDNの「Internet Explorer Developer Center」にある、CSSリファレンス。日本語版(未翻訳多い) と古い版の日本語版もある。
対応バージョンが書かれていたりいなかったりする。そのうち更新されるといいなと思っている。 - Mozilla CSS support chart - MDN
- Mozillaの対応状況。日本語版もある。個別に見たい場合は「CSS Reference」から探すのもいい。
MDNの各プロパティのリファレンスには他ブラウザの対応状況も載っていたりするのでとても便利。たぶん一番よく使っている。 - Safari CSS Reference: Introduction to Safari CSS Reference
- Safariのリファレンス。ちょっと見づらいけど詳しく載っている。
- Opera: Opera PrestoでサポートされるWeb仕様
- 面倒だけどサイドバーにあるPrestoのバージョンごとに調べるしかない。
他にいいページあったら教えてほしいです……。
「これ対応されるの?」とか「これバグじゃね?」と思ったら
MozillaとWebkitはすぐ検索できる。
IEは分からない……。
- Bugzilla@Mozilla
- Firefoxならここで検索。「CSS (問題の用語)」みたいに検索すると大体は出てくる。
- WebKit Bugzilla
- Webkitならここ。検索の仕方も一緒。
- Google Chrome Forum - Google グループ
- Chromeのユーザーフォーラム。バグの解決策が見つかることもある。
- My Opera - フォーラム
- 調べたいソフトウェアのフォーラムから探す。
他には、たぶん「ググれ」が一番近道。
適当な英語で検索しても結構見つかる。日本語で駄目だったら英語で検索する癖をつけておくと解決しやすい。
- Stack Overflow
- 超有名なQ&Aサイト。ググった結果、ここに行き着くことも多い。
Twitterなどで「こうしたいけど上手くいかない」みたいなこと書いたら教えてもらえることもあるけど、まずは自分で調べる。
リプライが来たらラッキー程度に思っておくべき。
ブラウザのブログ
普段からチェックしておくのもいいと思います。
- IEBlog - Site Home - MSDN Blogs
- Internet Explorerのブログ。IEBlog 日本語もある。
- The Mozilla Blog
- 日本語はこっち。
Mozilla Hacksも。 - Google Chrome Blog
- Chromeはここ。Chrome Releasesも合わせて。
- Surfin’ Safari - The WebKit Blog
- Safariというか、Webkitはここで。
- Opera Desktop Team - Desktop Team
- デスクトップ版のOperaのブログ。
英語のページが多いですが、日本語の情報しか見つからないものもあったりするので、両方で検索してみる癖をつけておいたら近道になると思います。
英語が読めないとか言ってないで、オンライン翻訳でも使いながら調べるといいんじゃないでしょうか。自分はそうしてます。
こういう困ったときに検索して行き着くページにはCSSのコードが書かれていることが多いので、それを見ながら説明文を読むと分かりやすいかと。CSSのコードは何語のページでも同じですし。
間違って解釈してしまったら……まあ自信がないときはどっかにコード載せて突っ込み待ちするのもありです。jsdo.itのDiscussionsに投稿するのもいいかと思います。
他にも探す方法は色々あるでしょうが、自分の場合はこんな感じです。