CSS(スタイルシート)とその役割

CSSとは「カスケーディング スタイル シート」の略で、HTML文書の見た目や表示方法を操作するために使用されます。
スタイルシートを使用すると、HTML文書がブラウザに表示された時の余白や色、大きさなどを指定することができます。

ページTOPへ

CSS(スタイルシート)のメリット

スタイルシートを使用することのメリットとしては、HTML文書の構造がシンプルになり、編集の効率化やSEOにも役立つと言ったものが挙げられます。
また、スタイルシートで見た目や表示方法を定義しておくと複数の箇所にその内容を適用することができ、スタイルシートの内容を変更すれば、変更内容が自動的に反映されると言った効果もあります。

※SEOとは、Search Engine Optimizationの略で、検索エンジンでの表示順位を上位にさせる為の最適化作業のこと。

ページTOPへ

現在のCSS(スタイルシート)事情について

世の中の風潮としましては、スタイルシートに対応していないブラウザにもきちんと表示されるように、余りスタイルシートに依存したデザインをしない方が良いとされて来ました。
しかし、きちんとスタイルシートを理解した上で使用すれば、スタイルシートに対応していないブラウザでも「内容が伝わらなくなるほど表示が崩れることは無い」と言うのも事実です。

また、個人的な意見となりますが、スタイルシートに対応したブラウザが無料で手に入る現在、スタイルシートに対応していないブラウザ(テキストブラウザは除く)にまで気を使う必要は無いと思います。なぜなら、スタイルシートに依存しないページを「ユーザビリティーが高い」と考えるのでは無く、「時代の変化から取り残されている」と考えるからです。

もちろん、人それぞれによって解釈の違いがあると思いますが・・・。

ページTOPへ

CSS(スタイルシート)記述のルール

スタイルを指定するには、「適用させる対象」または「条件」に「スタイルの属性(文字の色をしていするなど)」と「値(赤や青など)」を記述すると言う一定の書式(ルールセット)があります。
例えば、「p(段落の意)」と言う「タグ」を使用した場合、文字の色を赤にするといった場合のルールは以下のようになります。

この時の「p」の事をセレクタと呼び、ここで指定されたもの全てにスタイルが適用されます。
そして、「{」と「}」に囲まれた部分が宣言ブロックと呼ばれ、スタイルの内容を示しています。

ページTOPへ

宣言ブロックについて

宣言ブロックの記述する場合は、「属性(property):値(value);」と言う形が基本になります。
この時の「p」の事をセレクタと呼び、ここで指定されたもの全てにスタイルが適用されます。
そして、「{」と「}」に囲まれた部分が宣言ブロックと呼ばれ、スタイルの内容を示しています。

属性(property)とは、背景や幅・太さと言ったスタイルの属性のことです。前項の例では「color(文字の色)」の部分に当たります。

値(value)とは、属性(property)に持たせる値のことです。前項の例では「red(赤)」に当たる部分のことです。

つまり、「p(段落)タグ」を使用した文章は「color(文字の色)」を「red(赤)」で表示すると言うルールセットになります。
また、宣言ブロック内の「属性(property):値(value);」の「;」までを一区切りとして扱い、複数の内容を同時に指定することができます。
例えば、前項の例に加え文字の太さを太くする場合には次の用に指定します。

この時、一区切りを指定する「;」は必須です(一番最後の「;」は省略可能)。

ページTOPへ