サイト全体のカラー
サイトのカラーリングでずいぶん印象が違ってくると思います。
自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。
サイト(webページ)は5つの要素があります。(重要)
これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。
見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青
そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト
Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。
自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。
サイト(webページ)は5つの要素があります。(重要)
|
要素 |
タグ |
| 見出し | h1 h2 h3 |
| 文章 | p |
| 背景 | body |
| リンク | a |
| ・未訪問 | a:link |
| ・訪問済 | a:visited |
| ・マウスをあわせた時 | a:hover |
| ・クリックしている時 | a:active |
| 強調 | string em |
これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。
見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青
そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト
Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。
HTMLとスタイルシート(基本)
HTMLは文書などのページを表示去るための構造です。
もっと細かく指定するためのものがスタイルシートと書きました。
たとえばHTMLで大きな文字で表題を表示したいと考えます。
タグを使って大きさとそのスタイルを指示します。
でもこれではどのくらいの大きさなのか?不明です。
フォントの大きさには「24ポイント」とか数字できちんと指示すれば誰から見てもその大きさで見てもらうことが出来ます。
そこでスタイルシートで指示を出しておきます。
すると、<h1>と言うタグで表示される文字の大きさは24ポイントで表示されるようになります。
セレクタ {プロパティ :値}
これが基本になります。
*セレクタについては別に書いておきます。
どのスタイルに対して何を(プロパティ)どれくらい(値)といった指定になります。
スタイルシートをHTMLの中に記述する方法は3つあります。
1 HTMLの<head>内に<style>を使って記述していく方法
2 CSSファイルを作ってリンクタグを使って指定する方法。
3 その2つを使って指定する方法。
1を使って指定していく場合のHTMLの書き方
<!-- --> この形はコメントで、styleタグに対応していないブラウザでstyleの定義が無視されても表示に影響が現れないようになります。
もっと細かく指定するためのものがスタイルシートと書きました。
たとえばHTMLで大きな文字で表題を表示したいと考えます。
タグを使って大きさとそのスタイルを指示します。
でもこれではどのくらいの大きさなのか?不明です。
フォントの大きさには「24ポイント」とか数字できちんと指示すれば誰から見てもその大きさで見てもらうことが出来ます。
そこでスタイルシートで指示を出しておきます。
すると、<h1>と言うタグで表示される文字の大きさは24ポイントで表示されるようになります。
セレクタ {プロパティ :値}
これが基本になります。
*セレクタについては別に書いておきます。
どのスタイルに対して何を(プロパティ)どれくらい(値)といった指定になります。
スタイルシートをHTMLの中に記述する方法は3つあります。
1 HTMLの<head>内に<style>を使って記述していく方法
2 CSSファイルを作ってリンクタグを使って指定する方法。
3 その2つを使って指定する方法。
1を使って指定していく場合のHTMLの書き方
<!-- --> この形はコメントで、styleタグに対応していないブラウザでstyleの定義が無視されても表示に影響が現れないようになります。
スタイルシート