CSS（スタイルシート）について

CSS（スタイルシート）とは？

CSSとはカスケーディング・スタイルシートの略で、一般的にスタイルシートと呼ばれています。CSSは、HTMLタグとは別に表示するスタイルを指定することができ、文字のスタイルやサイズ、余白の大きさや画像などの回り込みなど、様々なプロパティを指定することが出来ます。

CSSの記述方法は３通りあり、ＨＴＭＬタグ内で、そのタグのみに指定する方法、 <head> ～<head> の間で指定する方法、外部ＣＳＳファイルを作成し、リンクする方法があります。

ページをレイアウトする際に <table> タグでデザインする方法が広く使われていますが、現在ではページの構造とページのデザインを分離し、ページ構造はＨＴＭＬで、ページデザインはＣＳＳで行うことが推奨されています。

<table> タグでデザインすると何重にも入れ子にしてテキストや画像を配置する場合も多く、ブラウザでの表示が遅くなってしまうことがあります。ＷＥＢブラウザは、 <table> タグがある場合、一番深い階層にある </table> を読み込むまでページを表示しません。表示が遅いページは訪問者にも嫌われる傾向があります。

また、ページデザインでを <table> で行う場合、セルの結合や分割などにより構造が複雑化し、音声ブラウザなどで読み上げる場合にも読み上げる順番がずれて意味が通じなくなる場合もあり、ＷＥＢアクセシビリティの低下にもつながります。
さらに、サイドバーなどを配置した場合、メインの文章がＨＴＭＬファイルの下のほうに来ることが多く、ＳＥＯ的にもマイナスとなります。

<table> タグ以外でも、デザインをＨＴＭＬで記述することによりＨＴＭＬソースも頻雑になり、ファイル容量が大きくなりがちです。デザインをＣＳＳで指定することにより、ＨＴＭＬソースを簡略化でき、ＳＥＯ対策やＷＥＢアクセシビリティの向上にもつながります。

CSS（スタイルシート）の活用例

当サイトでも、 <table> タグでデザインしたページもありますが、基本的にはＣＳＳ中心でデザインしています。初心者がいきなりデザインを総てＣＳＳで行うということは困難なことだと思いますので出来る範囲から行うほうがいいでしょう。

ＨＴＭＬデザインとＣＳＳデザインが混在したハイブリッドデザインと呼ばれるページも多くあり、最低限のデザインをＨＴＭＬで行うなどの方法もあります。たとえば、ヘッダー・フッター・サイドバー・メインコンテンツの配置のみを<table>タグで行うなどすれば、ページ全体の配置などは比較的容易にできるので、その他の要素のデザインをＣＳＳで行うようにすればＨＴＭＬを簡略化することが出来ます。

以下に例として当サイト内の <table> でデザインしたページとＣＳＳでデザインしたページをあげます。

まず、このページ（今表示している「ＣＳＳについて」）と下記リストの１番を比べてみてください。このページはレイアウトまでＣＳＳでデザインしていますが、下記リストの１番はレイアウトを <table>タグにて行っています。

<table>タグで配置決めをし、ほかの要素をＣＳＳでデザイン
http://www.neo-times.com/hp/sample1.html
上記のページのＣＳＳを解除したページ（ＨＴＭＬのみを読み込み表示した場合）
http://www.neo-times.com/hp/sample2.html
このページのＣＳＳを解除して表示したページ
http://www.neo-times.com/hp/sample3.html

※ご使用のブラウザによっ表示が異なる場合があります。

上記の例を見てもらえばわかるとおもいますが、おなじようにブラウザで表示されていてもＨＴＭＬのみの表示になると違いが分かると思います。<table>タグでページを区切った場合はＣＳＳを解除してもページは区切られたままです。

しかし、ＣＳＳでデザインした場合はＣＳＳを解除するとページの区切りも解除されます。また、解除されたページをみてもらえばわかりやすいですが、ＣＳＳでデザインしたページではヘッダーの次にメインコンテンツの内容があり、その下にサイドバーの内容があります。
こうするとＨＴＭＬソース上でもメインコンテンツの方先に記述されます。

逆に<table>タグで配置を決めるとＨＴＭＬソース上ではヘッダーの次に左サイドバーが記述され、その次にメインコンテンツが記述されます。これは <table> タグが上から順に、左から順に記述されるためです。ＳＥＯ的に考えた場合、ＨＴＭＬソースで上の方に記述されている文章がより重要とみなされるため、ＣＳＳでデザインした場合の方がＳＥＯ的に有利になるのはこのためです。

カテゴリリスト
ホームページ作成情報ＴＯＰ	ホームページビルダーのススメ
HPビルダーの注意点とHTML	CSS（スタイルシート）について