ブラウザでインターネットに接続すると、ホームページを見ることができます。
ホームページは、htmlというファイル形式が主流です。
このhtmlファイルのデザインを指定するために使います。
ブラウザにも、それなりに、見た目を整える機能がありますが、ホームページをより引き立てるために細かい指定を行うことが出来ます。
CSSの記述は、htmlのタグの属性、ヘッダー内のスタイルタグ、外部のファイルなどいろいろなところに記述することが出来ます。
htmlのドキュメントタイプによって、外部ファイルに書くことが推奨される場合や、ヘッダー部分に記述してもよい場合もあります。
また、指定の方法もどんなルールに従うかCSS自体のルールによって指定可能なスタイルも変わります。
タグに直接書く場合を除き、大体こんな記述になります。
| 名称 | |||||
| p#id | { | color | : | #ff3300 | } |
| セレクタ | { | プロパティ | : | 値 | } |
| 宣言ブロック | |||||
| 規則集合 | |||||
スタイルシートは、ホームページの制作者だけが作るものではありません。
例えば、視力の弱くなった方が、自分用に文字を大きく表示できるようなスタイルシートをブラウザでセットすることで、自分専用の表示に使うことも出来ます。
また、ブラウザは、いろいろなものが公開されていますが、すべてのブラウザで、同じレイアウトになることはなく、表示が乱れたりしないようにするために使われることもあります。
これを、CSS ハックなどといいます。
タグの中にも、ヘッダーにも、外部ファイルにも、どこにでも書けるスタイルシートですが、スタイルの指定を間違って行っても、一部の例外を除き、ブラウザからは、エラーが発生することがありません。一行目に文字色を青で指定したものを、2行目で黒に指定しなおせば、黒で表示されます。
いろいろやっているうちに、そのようなことが、蓄積してくることがあります。
このようなサービスを使って、正しいCSSかどうかをチェックすることが出来ます。
また、常にきちんとしたレイアウトで、CSSファイルを管理していくためのツールもあります。CSS Tidyというツールを、日本語化して、公開しておりますのでお試しください。
スタイルシートは、指定方法によって適用の優先順位が変わります。あるいは、htmlに適用した時に、同じスタイル表現が出来なくなる可能性がありますので、必ずCSSのバックアップを取ってからやってみてください。