■ホームページ作成のためのCSS■
HTML(XHTML)では文章構造のみを示し、レイアウト情報は全てCSSで指定します。
このように考えて完全分離型でのサイトを構築することで、レイアウト情報を一元管理できることになります。
つまり、共有するひとつのCSSファイルを書き換えるだけで、大量なページレイアウトを一気に変更できるのです。
なので、コンテンツを追加する場合は、レイアウトのことを気にしないで文章構造だけを考えれば良いだけということになります。
CSSは、基本的にHTML(XHTML)の要素単位で指定を行います。
最初に適応する要素を示し、その後に { } の中でどのように表示させるのかを指定していきます。
簡単に示すと、下記のような表示になります。
適用先 {
プロパティ： 値； / *コメント* /
プロパティ： 値； / *コメント* /
プロパティ： 値； / *コメント* /
}
表示の指定はCSSの値を ： で区切り「何を」「どのようにする」という形で指定し、複数を指定する場合に ； で区切ります。
「 /* 」と「 /* 」で囲っている範囲はコメントで、表示には一切反映されません。
ただしコメントなどを設定する場合において、閉じ忘れには十分注意が必要です。
CSSの書式で、適応先を示す部分はセレクタと呼ばれております。
セレクタの種類は様々ありますが、基本的にIE6.0のサポートしている範囲で使用されることが多いです。
これらの使えるセレクタを知ることも、CSSを作成する上で重要なことです。
セレクタで指定する適用先の要素は、ボックスと呼ばれる構造に従って表示されます。
ボックスは四角形で構築され、要素を表示する内容のほかに、内側の余白であるパディングと外側の余白であるマージン、
その間にある境界線のボーダーで、要素を含め4つの部分から成り立っております。
背景はパディング内で表示されますが、マージンは常に透明であるという決まりがあるため背景は表示されません。
ボーダーは背景が適応されるため、点線や二重線を使用すると空白部分に背景が適応されます。
なお WIDTH や HEIGHT でボックスの大きさを指定した場合、余白やボーダーを含まない要素内容部分の大きさとして適応されます。
◆W3C CSS Validator
CSSが正しい構文で作られているかどうか調べるには、こちらのサイトを尋ねると良いでしょう。
Webにアップした状況であれば、こちらのサイトに自分のサイトのURLを入力すれば検査結果が出ます。
Webにアップする前であれば、Textを直接入力して正しいCSS構文かどうか調べてくれます。正しいと認定されればW3Cから
「認証アイコン」を受け取ることができます。
僕も認証されているので、TOPページに張っております。
たとえサイトを作って数ヶ月人が尋ねてこなくても、これひとつもらえるだけでもモチベーションがあがると思います。
参考までにCSSを整理するのに「スペース」を使用する人が多いですが、出来るだけ「Tab」キーで対応しましょう。
こちらは認定とはあまり関係ないのですが、Firefoxなどはスペースの連続に対してfont-sizeなどをきちんと読み込まないことがありますので注意が必要です。
