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> タグが上から順に、左から順に記述されるためです。ＳＥＯ的に考えた場合、ＨＴＭＬソースで上の方に記述されている文章がより重要とみなされるため、ＣＳＳでデザインした場合の方がＳＥＯ的に有利になるのはこのためです。

ホームページ作成
ホームページ作成情報 TOP	HPビルダーのススメ
HPビルダーの注意点	HTMLの知識について
CSSについて	CSSの記述方法
ホームページに動きをつける	アップロード・FTP
レンタルサーバーの選び方