2008年01月スタイルシート

TOP | RSS | ABOUT | Add to google | Add to Yahoo! bookmark

サイト全体のカラー

サイトのカラーリングでずいぶん印象が違ってくると思います。
自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。


サイト(webページ)は5つの要素があります。(重要)


要素

タグ

見出し h1 h2 h3
文章 p
背景 body
リンク a
・未訪問    a:link
・訪問済 a:visited
・マウスをあわせた時 a:hover
・クリックしている時 a:active
強調 string em


これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。


見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青

そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト

Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。

セレクタの複数指定

セレクタ


cssの定義のセレクタはHTMLのタグを指定するものです。
セレクタを「,(カンマ)」で区切って記述すると複数のセレクタを一度に指定することも出来ます。



3つのセレクタに対して文字色を黒で指定しています。


セレクタにタグを指定するとそのタグ全てにスタイルを指定することになります。
全てではなく一つだけに指定したい場合などは「class」属性で指定します。


HTMLとスタイルシート(基本)

HTMLは文書などのページを表示去るための構造です。
もっと細かく指定するためのものがスタイルシートと書きました。


たとえばHTMLで大きな文字で表題を表示したいと考えます。


タグを使って大きさとそのスタイルを指示します。
でもこれではどのくらいの大きさなのか?不明です。
フォントの大きさには「24ポイント」とか数字できちんと指示すれば誰から見てもその大きさで見てもらうことが出来ます。

そこでスタイルシートで指示を出しておきます。

すると、<h1>と言うタグで表示される文字の大きさは24ポイントで表示されるようになります。

セレクタ {プロパティ :値}

これが基本になります。
*セレクタについては別に書いておきます。

どのスタイルに対して何を(プロパティ)どれくらい(値)といった指定になります。


スタイルシートをHTMLの中に記述する方法は3つあります。
1 HTMLの<head>内に<style>を使って記述していく方法
2 CSSファイルを作ってリンクタグを使って指定する方法。
3 その2つを使って指定する方法。

1を使って指定していく場合のHTMLの書き方


<!--  --> この形はコメントで、styleタグに対応していないブラウザでstyleの定義が無視されても表示に影響が現れないようになります。