Web@Youtility

CSS講座

CSS
セレクタ	CSSの記述方法
CSSテンプレート

CSSとは？

■CSSとは

「Cascading Style Sheets」
Webページのレイアウトを定義する規格。
これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれていた。 しかしこれは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとして CSSが新たに策定された。
CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体 (及び文書の論理構造を記述したHTML)から切り離すことができる。
ユーザが複数のレイアウトから適当なものを選択することができるようになる。
WWWに関する標準化団体W3Cで標準化されている。
※IT用語辞典より参照

CSSの利点

■SEO（検索エンジン最適化）対策

一般に、検索エンジンのロボットはHTMLファイルに書かれた上位200語程度を強く認識すると言われています。 その中で、CSSを使わずにHTMLのみで実装することによりHTMLの量が膨大になってくると、より強調したい キーワードが検索エンジンに認識されにくくなってきます。
しかしCSSを使用する事によって、HTMLとCSS部分を分割する事ができ、必要な部分を効率よく認識させる事ができるようになります。

■ソースの軽さ

CSSでレイアウトしたホームページは、HTML中のCSS部分を別ファイルに分割するために、 TABLEタグのみで実装したものと比較するとHTMLファイルが軽くなります。
またソースが軽くなる事によって、読み込みが速くなり、HTMＬの表示速度も向上します。
最近ではADSLや光ファイバーの普及により、重たいサイトであっても比較的快適に閲覧できるようになりました。
しかしながら、軽いサイトの方が好まれるため、少しでもソースを軽減することがユーザの快適さにつながるのではないでしょうか。

■デザイン変更の簡易化

CSS部分を外部ファイルに作成することにより、HTMLのデザイン等を変更する際にこの外部ファイルのみを変更するだけで サイト全体のデザイン、レイアウトを変更する事ができるため変更が容易になります。
例えば、全てのページで「背景色を黒、文字色を白」と変更したかったとすると
外部CSSファイルに以下のように記述します。

body{
　　　background-color:black;
　　　color:white;
}

またサイト全体ではなく、サイト内の一部分について適用させたい場合はdivタグを使用します

HTML部分
<div class="webyoutility">
　適用させたいHTMLソース
</div>

CSS部分
.webyoutility{
　　　background-color:black;
　　　color:white;
　　 }

背景色以外にもサイトの幅やフォントサイズ、罫線の有無・色など、同様に変更する事ができます