スタイルシート、フォーマットと最適化のツール CSSTidy

直接 CSS Tidyへ

CSSとは

ブラウザでインターネットに接続すると、ホームページを見ることができます。
ホームページは、htmlというファイル形式が主流です。

このhtmlファイルのデザインを指定するために使います。

ブラウザにも、それなりに、見た目を整える機能がありますが、ホームページをより引き立てるために細かい指定を行うことが出来ます。

html文書は、このCSS(カスケーディングスタイルシート)を使う事で、レイアウトや、色、背景などを、自在に設定することができます。

CSSの記述の仕方

CSSの記述は、htmlのタグの属性、ヘッダー内のスタイルタグ、外部のファイルなどいろいろなところに記述することが出来ます。
htmlのドキュメントタイプによって、外部ファイルに書くことが推奨される場合や、ヘッダー部分に記述してもよい場合もあります。

また、指定の方法もどんなルールに従うかCSS自体のルールによって指定可能なスタイルも変わります。

タグに直接書く場合を除き、大体こんな記述になります。

名称
p#id { color : #ff3300 }
セレクタ { プロパティ : }
宣言ブロック
規則集合(rule sets)

スタイルシートは、ホームページの制作者だけが作るものではありません。

例えば、視力の弱くなった方が、自分用に文字を大きく表示できるようなスタイルシートをブラウザでセットすることで、自分専用の表示に使うことも出来ます。

また、ブラウザは、いろいろなものが公開されていますが、すべてのブラウザで、同じレイアウトになることはなく、表示が乱れたりしないようにするために使われることもあります。
これを、CSS ハックなどといいます。

CSSの陥りやすいところ

タグの中にも、ヘッダーにも、外部ファイルにも、どこにでも書けるスタイルシートですが、スタイルの指定を間違って行っても、一部の例外を除き、ブラウザからは、エラーが発生することがありません。一行目に文字色を青で指定したものを、2行目で黒に指定しなおせば、黒で表示されます。

いろいろやっているうちに、そのようなことが、蓄積してくることがあります。

CSSがルールに従って正しく使われているかどうかを、チェックするサービスがあります。

このようなサービスを使って、正しいCSSかどうかをチェックすることが出来ます。

CSS Tidy

また、常にきちんとしたレイアウトで、CSSファイルを管理していくためのツールもあります。CSS Tidyというツールを、日本語化して、公開しておりますのでお試しください。

スタイルシートは、指定方法によって適用の優先順位が変わります。あるいは、htmlに適用した時に、同じスタイル表現が出来なくなる可能性がありますので、必ずCSSのバックアップを取ってからやってみてください。

資料

  1. New CSS2.2邦訳
  2. Web Design - HTML5 & CSS3 Checklist
  3. "Cascading Style Sheets"の翻訳
  4. CSS1邦訳
  5. CSS2邦訳
  6. CSS2.1邦訳
  7. css3邦訳
  8. IE7 JavaScript library
  9. IE7 test
  10. CSS LINT CSSの記述を指南してくれるサービス