Language(HTML)のレイアウト部分の構造を構築するために作られたそうです。Webページを作るにあたって、レイアウトのためにHTMLを使うと、どうしても意図的な誤用や本来の目的からは離れた使い方をせざるを得ない。それだと音声認識ブラウザに本文を読ませるのが遅くなったり、表示速度にも様々な不都合があったそうです。その代表的なものが、tableを使ったレイアウトです。本来は表を作成するためのものであるtableタグですが、これを応用すればコンテンツのを自由に配置することができるため、複雑なレイアウトにはtableを使うのが一般的となっています。tableタグは、その中身のソースまで全部読み込んでから出ないとブラウザに表示されないため、表示までの時間が遅くなったり、またCPUやその他ハードの性能が上がった今ではあまりないでしょうが、以前はtableの中に複数のtableを重ねるといったソースはCPUに負担をかけてPCがフリーズするなんてこともあったようです。そこで、HTMLには本来の目的通り文書の構造に専念してもらって、レイアウトはCSSで行うことにしよう......ということになったそうです。言い切れるほどの知識がないんでスンマセン。今後HTMLでは使わないようにすることになっているタグや属性はレイアウトに関わるものが多く。実際DTD宣言でStrictを選ぶと使用できないタグが実感できます。以前のブラウザとの互換性などもありますので、そう簡単にはそのようなタグが使えなくなるということはないでしょうが、このCSS、慣れるととても便利ですし、様々な効果を得られるのでさわりだけでも知っておくと役に立ちますよ。△TOP2.はじめの一歩まず覚えなくてはいけないのが、「CSSの指定の仕方」です。HTMLの構造のどこにどのような効果を出すのか、それを指定する方法ですね。(1)タグの中にCSSを「style」属性を用いて書き込む。(インラインスタイルシート)(2)指定したタグをCSSで制御する。(3)指定したclassを持つタグをCSSで制御する。(4)指定したidを持つタグをCSSで制御する。(1)ですが、これはあまりお勧めしません。全てこの方法でCSSを用いるとソースが非常に煩雑となり、また、CSSの利点である『複数の項目を一括制御』ができないためです。任意の一箇所だけにCSSの効果を用いたい時は有効ですよ。style="text-align:center;font-size:15px">といった具合に、普通の属性のように扱います。""の中の値にはCSSのプロパティを書くことになります。プロパティの書き方は、こちらと次のCSS頻出プロパティをご参照下さい。△TOP3.<head>の中に、書いて書いてさて、(2)〜(4)を説明する前に、一つ大切なことがあります。それは、<head></head>の中に、CSSを書く場所を作ること。type="text/css"><!----></style></head>色を変えた部分でワンセットです。この中の<!--と-->の間に、CSSの各指定を書いていくことになります。(ちなみに<!--と-->の中にCSSを記述するのは、CSS非対応のブラウザへの配慮のためです)これともう一つ、CSSファイルを別に作り、それにリンクすることでCSSでの制御を行うという方法もありますが、それは後程に。これより先では<!--と-->の間のCSSの指定を見やすいように間隔をあけて記述しています。コピー&ペーストで試してみることがあったら、記述の余分な間隔を消して整理しても動作に問題はありません。それでは、何をどう書いていくのか進めていきましょう。△TOP4.まずCSSの書き方、基本CSSの書式はセレクタ{プロパティ}これが基本となります。『セレクタ』の部分には、CSSの制御を指定するタグ・class名やid名を書きます。CSSはプロパティというものを用いて具体的な制御方法を記述していきます。プロパティはこのように書いていきます。プロパティ:値;プロパティ:値;プロパティ......プロパティと値の間は:(コロン)、さらにプロパティを続けて書いていく場合は;(セミコロン)でつなぎます。この:(コロン)と;(セミコロン)の入力ミスはバグの原因になりますので注意してください。あれ?なんで表示がうまくいかないんだ?と思ったら;(セミコロン)が抜けていた。なんてことはザラにありますゆえ。type="text/css"><!--p{text-align:center;font-size:18px;color:navy}--></style></head><body><p>任意の文章</p></body></html>→この書き方の表示例へこれは<p>タグに、タグ内の構造はこうしますよと指定しているものです。これを構造として簡略に書くと、タグ名{CSSのプロパティによる命令}この形で例を読み上げるとpタグの中は、{テキストを中央寄せして;フォントサイズは18ピクセル;文字の色はネイビー}でよろしくということになります。タグ名はもちろん任意です。この場合、ここで設定したCSSはそのファイル内にある全ての<p>に影響します。この性質がCSSで複数のレイアウトを一括制御に役立つのですが、逆に同じ<p>タグでも違うCSSで制御したい場合に邪魔となります。そんな時に使うのが、タグを指定するのではない他の指定方法です。例では分かりやすく『Tabキー』を用いて見やすくしています。全てつなげて書いてもいいのですが、見やすいほうが書き換え時などにも便利です。この場合、空白はスペースではなく『Tabキー』を用いてください。class="rei2">任意の文章C</p></body></html>→この書き方の表示例へこれはclass名を設定して、そのクラス名のついたタグ内の構造はこうしますよと指定しているものです。これを構造として簡略に書くと、.クラス名{CSSのプロパティによる命令}↑クラス名の約束:最初に.(ドット)を打つことで、クラス名であることを示す・半角英数・class名の頭文字は英字この形で例を読み上げるとクラスrei1の中は、{テキストを左寄せして;フォントサイズは18ピクセル;文字の色は青}でよろしくclass指定をしていないタグは「ブラウザの設定に従って表示」クラスrei2の中は、{テキストを右寄せして;フォントサイズは18ピクセル;文字の色は赤}でよろしくということになります。それぞれのクラスが対応できるように<p>タグの中に半角スペースを置いてclass="クラス名"を書きます。ここで書くクラス名に.(ドット)はいりませんのでご注意下さい。これで、同じタグでも違うCSSで制御できるようになりました。次は、classとほとんど同じように使えるidによる指定です。id="rei4">任意の文章B</p></body></html>→この書き方の表示例へこれはid名を設定して、そのid名のついたタグ内の構造はこうしますよと指定しているものです。読み方はclassと同じでidのrei3の中は、{テキストを左寄せして;フォントサイズは18ピクセル;文字の色は青}でよろしくidのrei4の中は、{テキストを右寄せして;フォントサイズは26ピクセル;フォント(字体)は「HG正楷書体-PRO」もしくはフォントグループ「serif」(優先順位は左→右);文字の色は赤}でよろしくとなります。動作はほとんどclassと同じように扱えます。一応classは一ファイル内で複数のタグに共通項として使用でき、idは一ファイル内で一箇所にのみ使用できる......というようにできているらしいんですが、実際はこれを無視してもブラウザは正常に表示してくれます。idで指定する場合は、同ページ内につき一箇所にのみ使用しましょう。数箇所に使ってしまうと、リンクを使ってページ内の任意の場所に閲覧者を誘導する際に不都合が出てきます。ページ内の任意の場所に閲覧者を誘導するリンクは、設定されたキーワードを元に「任意の場所」を探します。そのため、同一キーワードを設定したidが複数箇所にあると、ブラウザがリンク先の場所を確定できないということになります。いくつもある「任意の場所」に混乱してしまうんですね。実験したところ、表示されるリンク先は「任意の場所」ではなく、「ページの一番上(通常のリンク)」になってしまいました。以前はこのリンクはnameを使って行うようになっていましたが、今後はこのidを用いるとの話をどこだったかで読んだことがあります(現在では、現行のブラウザとの互換上両方を使っておいた方が良いようです)。補足:class、id名は共に、頭文字に数字を使うこともできます。class="01"みたいに。これが通用するのはIEのみ。NetscapeやFirefoxは使用不可ですので、やはりこの形は使わないほうがいいと思われます。→例を見る△TOP8.部分的に異なったCSSを使いたい例えばCSS制御下にある<p>タグの中の一部分に、そのタグにかかったCSSとは違うCSSを用いたい場合は、<span>タグを使います。class="rei6">ここだけrei6のCSSで制御しよう</span>任意の文章A任意の文章A。</p></body></html>→この書き方の表示例へこうすることで、(rei5部分){テキストを左寄せした;フォントサイズ18ピクセルで;青色}の文章の中で、<span></span>で囲まれた部分を(rei6部分){フォントサイズ20ピクセルで;文字を太字にした;白;背景色は黒}で表示することができます。CSSで制御できる入れ子のタグの最小の単位はこの<span>になります。代表的な使い方で例を書くと、<div><p>あいうえお<span>カキクケコ</span>さしすせそ</p></div>もちろん、<p>の中には<a>タグや<img>タグも書けます。△TOP9.外部CSSファイルをリンクするWebページをCSSを用いて作っていくと、<head>内のCSSがかなりの量になることもあります。HTMLを組んでいく時点では、CSSをHTMLに書く方が何かと便利です。開くテキストファイルは一つで済みますしね。それをそのままHTMLファイルの中に書いているとデータ量を増やしてしまうことになり、本来表示するHTML部分が下へと追いやられソースが読みにくくもなります。そこで、外部にCSSファイルを作ってリンクすることでHTMLファイルのデータを軽くすると同時に、ソースをより見やすくしてしまいましょう。CSSファイルの作り方。HTMLファイルのCSS部分を選択してコピー、もしくは切り取り、CSS部分を消す→新しく開いたテキストエディタ(メモ帳など)にCSSを貼り付ける→「名前をつけて保存」で、ファイル名の最後に『.css』と半角英数で記述。これでCSSファイルが出来上がりました。次にリンクのやり方です。/>ファイル名と場所の指定、つまりリンクの仕方は通常のリンクと同じです。この方法が最も推奨されている形です。この方法だと一つのCSSファイルを複数のページで共有できるのも利点です。共通のCSSファイルを使用したいHTMLファイルに書かれるリンク先を同じものにすればいいだけです。レイアウトを統一したWebページでは、この威力の凄さは実感できますよー。最後に、CSSの優先度について。CSSは記述の仕方によってその実行優先度が変化します。その順番は外部CSS<内部CSS<インラインスタイルシート(タグ内のstyle属性を使った指定)となります。優先順位はインラインスタイルシートが最も強くなっています。これを利用して、全体的には外部で指定して、一部だけインラインで制御なんてこともできますよ。△TOPR:でもねぇ、実際やってみると、コンテンツの配置はtableの方が楽だなーって思うことが時々ありますわ。C:うっわ、ぶち壊し。R:いやだって、やっぱりブラウザ互換とか、ブラウザの表示の大きさとの関係なんかを考えてレイアウトする場合、手馴れたtableの方がやりやすいんだもーん。C:だもーんじゃねぇや。大体、共通ページの制御とか細かいレイアウトの制御はこっちが上なんだろ?R:それは間違いなく。HTMLじゃできないこともあるしね。CSSもHTML並に分かりやすくなってくれると嬉しいなーなんて。R:......うい。