- スタイルシートを覚えよう♪ - 2日目-2時間目
では、いよいよスタイルシートで色や文字の大きさなどを指定していきましょう♪
今回はオーソドックスに、スタイルシートを外部に置いて、それを読み込ませるというやり方で説明します。スタイルシートを作るには、htmlファイルを作ったときと同じで、htmlファイルと同じフォルダ内で右クリック→新規作成→テキストドキュメントを選択したら、とりあえず名前を mystyle.css とつけます。拡張子が css （シーエスエス）になるので、注意してください。
現在のフォルダの中はこんな感じになってるはずです。cssファイル（スタイルシートのファイル）が増えています。
そうしたら、そのファイルをダブルクリック、もしくはnotepadで開きます。当然最初はなにも書いていない白紙です。
では、書き込んでいきましょう。下のソースをコピーして、貼り付けてください。（これもできれば手打ちすることを押すすめします）（ちなみに、{ と }は半角の状態で、Shiftキーを押しながら、右上のほうに { と書いてるキーを押します。Enterキーの左側 ）
貼り付けたら、上書き保存をしましょう。そして、htmlファイルをダブルクリック（何回も言いますが、ブラウザは常に起動させておきましょう。そうすれば、更新（F 5）ですぐに確認できます）か更新でブラウザに表示させてください。
どうですか？色が変わりましたか？変わっていれば、背景は青になっているはずです♪。変わらない場合はどこか間違っていますので、もう一度確認してみましょう。ファイル名は間違っていませんか？mystyle.cssですよ。
完成版
ここまでくれば終わったようなものです＾＾、これになにかを付け足したり、自分の好きな色に変えていきましょう（カラーチャート参照）。ちなみにこれから説明するソースは必ずしも書かなくてはいけないわけではなく、指定したいものだけを書けばいいんですよ＾＾スタイルシートはそういうものです。
その前に、スタイルシートの書き方をご説明します。なにも難しくはありません。これさえ覚えれば、あなたも立派なWebクリエーターです＾＾
※スタイルシートの書き方は、p の 色は 何々という形で指定します。
（意味がよくわからなくても大丈夫＾＾；適当に流し読みしてください＾＾）
実際には、セレクタ { プロパティ： 値 } という形で表します。
なんだか難しい言葉が出てきましたが（汗）言葉は難しい？ですが、別に難しくはありません。この手の世界では、難しく表すのが、好きなんですよ（笑）
詳しくは、「スタイルシートの森」で解説してますので、そちらを参考にしてください。
まぁ難しく考えずにやってみましょう！！(^_-)-☆
ちなみに、セミコロン；で区切っていくつでも続けて書くことができますし、改行やスペースは基本的に無視されます。さっきコピーしたサンプルを見てもらえばわかると思いますが・・・。
■背景の色を変えたい
background-color: 色名もしくは#色コード （バックグラウンド）
body { background-color: #0000ff; } （ハイフン（ - ）は半角状態で、右上のほうの、ひらがなの「ほ」のところです。）
色の指定には何種類かありますが、簡単なのは、色名を直接書き込む方法、たとえば、blue や redなどのように。それと、
１６進数で表す#000000 のように、#に続けて６桁の文字（数字も）を書く方法があります。
この指定にはカラーチャートというのを使います。色名で指定できるものはカラーチャートのページに置いときましたので（約１４０色）、参考にしてください。とても暗記なんてできません(ーー;)ちなみに色は全部で約１６７７万色あります・・・（笑）
一部のブラウザでは色名による指定に対応していないので、なるべくなら#0000ff のように記述するようにしましょう。（※#の付け忘れに注意）
コロン 「：」 セミコロン「；」 も忘れず付けましょう。セミコロンは一番後ろのものはつけなくてもいいけど、付ける習慣をつけたほうが間違いがなくて済みます。また、上のように改行や半角スペースを適度に入れてやると見やすくなります。（空白や改行は無視されますので）
背景色で気をつけなければならないのが、背景色と文字色のバランスです。たとえば、白い背景に白い文字では何も見えません・・・。
なので、コントラストを考えて色名を決めます。見やすさが何より大事です。その辺は自分でいろいろと試してみて下さい。いろんなサイトを参考にするのもいいかも＾＾。
■背景に画像を指定したい
background-image: url(****)（バックグラウンド: ユーアールエル）
body { background-image: url(kabegami.jpg); } background のあとに注目すると、色を指定する場合と違うのがわかります。
（ と ）間に背景にしたい画像のパス（ファイル名もしくは、違うフォルダにある場合はその場所とファイル名）を指定します。
壁紙は素材屋さんに行けばたくさんあります。ただ、これも文字色とのバランスを考えなくてはいけません。
どうしてもきれいな壁紙を使いたい場合は、文字の後ろの背景だけを指定することができます。
たとえば、
p { background-color: white; color: black; } こうすれば、文字の後ろだけが白色になり、文字は黒色になります。
ようするに、body に対して背景を指定すれば、画面全体の背景が変わり、p や h1などの背景を指定すれば、その文字の後ろの色だけが変わるということ。
上の状態では背景と文字の距離が近いので、padding を使って間隔を空けます。空けたい間隔を数字で指定します。下の場合は5px の間隔をとることになります。
p { background-color: black; color: white; padding: 5px } 詳しくは姉妹サイト「スタイルシートの森」で説明しています。
■文字の色を変えたい
color （カラー）
body { color: black; }
p { color: black; } 文字色を指定したいもの、たとえば、p や h1 などに対して、color を指定する。これだけ＾＾ ちなみにこれは、文字色が黒になります。body だと、ページ全体です。
■文字のサイズを指定したい
font-size （フォントサイズ）
p { font-size: 1.2em; } 長さや大きさなどの単位にはいくつかあります。
意味わからないかもしれないけど一応一覧を。
| 単位 | 意味 | 指定例 |
|---|---|---|
| em | その要素（pや h1）のfont-sizeの値を１とする | p { font-size: 1.2em } |
| ex | その要素のフォントのx-height(小文字のxの高さ）を１とする | p { margin: 1ex } |
| px | コンピュータ画面上の1ピクセルを1とする | p { font-size: 12px } |
| % | 多くは親要素の一部分を基準とした割合 | p { font-size: 120% } |
| 単位 | 意味 | 指定例 |
|---|---|---|
| in | インチ（1in=2.54cm) | h1 { margin: 0.7in } |
| cm | センチメートル | h2 { line-height: 2cm } |
| mm | ミリメートル | h3 { word-spacing: 4mm } |
| pt | ポイント（１pt=1/72in) | h4 { font-size: 14pt } |
| pc | パイカ(1pc=12pt) | h4 { font-size: 1pc } |
このようになります＾＾；てか、こんなに使わん・・・
まぁ実際頻繁に使うのは、px, % ぐらいです。
ちなみにこの文字は15pxです。単位はなるべくならpx を使ったほうがいいでしょう。絶対単位で指定すると、文字の大きさを変えられなくなってしまいます。訪問者のなかには目の悪い方もいると思うので。
■行の間隔を空けて読みやすくするには
line-height （ラインハイト）
p { line-height: 1.4em } これは上下の文字の間隔を空ける指定です。上下の文字が近すぎると読みにくい文章になります。 ちなみに管理人は必ず間隔を空けています。このページの文字は1.4em の間隔をとっています。
■ページの上下左右に余白を作りたい
margin （マージン）
body { margin: 20px }
上下左右すべてに対して余白を指定する場合 ↑
左だけなら、↓
body { margin-left: 20px } ちなみに、左がleft, 右がright, 上がtop, 下がbottom です。
marginを指定しないと、ページ全体（上と左側）に余計な余白ができてしまいます。余白を消す場合は、bodyに対してmargin:0px としておきましょう。
余白は全体（body）だけでなく、p, h1, img, class名 など、個々に対しても指定することができます。
また、marginの左右に対してautoを指定するとページ全体が真ん中によります。
上のソースで言うと「all」に対して指定しているので、全体が真ん中よりになっっているわけです。
まぁ、難しく考えず、一番外枠に対して指定すればページ全体が真ん中によるということ。
なぜ「auto」で真ん中にくるのかって？・・・わかりません・・・＾＾；
また、paddingとは違います。使い方によっては見た目同じになることがありますが、違いを理解しておきましょう。
■文字の見た目を変える
この指定は必ずしもする必要はありません。ちなみにこのページはしてません。ですが、一応説明しておきますね。
●font-style ● font-weight ● font-family
p { font-style: italic; font-weight: bold; font-family: ＭＳ Ｐゴシック } ●font-style には、 italic （斜体）か normal（ノーマル）が入ります。斜体は文字通り斜めになります。
● font-weight は文字の太さを表します。数字もしくは単語が入ります。実際は、bold （太字）ぐらいしか使いません。指定しなければノーマルです。
今読んでるこれは指定してないのでノーマルです（見出しや強調文字は初期値で太字になっています。それを細くしたい場合は、normalを指定しましょう。
(bold)太字にしてみます。こんな感じです
● font-family はフォントの種類を表します。これはたとえば、
※これがＭＳ ゴシックです。（sans-serif）
※これがＭＳ 明朝です。（serif）
違いがわかりますよね？こういうことです。
指定なし（デフォルト）では、ゴシックの表示になります。
フォントの種類については、「スタイルシートの森」で解説してますので、そちらを参考にしてください。
実際は指定できるものが限られていますので、扱いには注意が必要です。その辺も解説してます。
指定例
p { font-family: serif } 結論を言うと、フォントの種類の指定は ＭＳ 明朝（serif） か ＭＳ ゴシック（sans-serif ）以外のものを指定しても見る人によっては思い通りの字体では表示されないということです。
（行書体や教科書体はwordを入れると一緒にインストールされます）
よくわからなければ、指定する必要はありません！＾＾；
フォントの設定は、ユーザーがブラウザで自分の好みに設定することもできますので。
ちなみに管理人は一切指定してません・・・ｵｲｵｲ (；^◇^)ﾉ~☆(ﾉ￣皿￣)ﾉ ｲﾃｯ
「ゴシック最高！！（笑）」
ただ、画像やロゴなどには好きなフォントを使うことができます。一番上のタイトルロゴなんかがそうですね。作るにはソフトが別に必要ですが・・・・。
文字のセンタリング（行揃え）
text-align
h1 { text-align: center; } center のほかにright やleftもあります。指定しなければ、左寄せになります。
センタリングしてみます
■ここまでのまとめ
これまでのソースは一つ一つ指定する必要はありません（面倒^_^;）たとえば、
改行しても無視されるので、好きなように改行することができます。 見やすいように書いたほうがあとで楽です。 このようにセミコロン ; で区切っていくつでも書くことができます。
■リンクの文字の色の指定
a:link（未訪問のリンクの文字色）
a:visited（訪問済み）
a:hover（マウスポインタがリンクの上にあるときの色）
上のを実際に表すと・・・ こちらです
これを指定するとページ全体のリンクに対して有効になります。
一部のリンクだけ色を変えたい場合は、クラスわけが必要になります。タグの属性に(class="")を付け足します。
スタイルシートは、半角スペースで間隔を空ける必要はありません。ただ、あえて間隔を空けることで ソースが見やすくなります。また、改行も好きに入れられるので、あとで手直しをする際に楽なように見やすく書くようにしたほうがいいです。
間隔を空けない場合・・・見にくい？・・・^_^;
間隔を空ける、または改行させた場合
とすると、見やすいですよね？^_^; まぁ・・・自由ですが・・・
今まで、見てきたソースもあえて間隔を空けています。最後のセミコロン；はつけなくても構わないけど、つけたほうが間違いがなくていいかと・・・あとで、付け足しとかするだろうし。
また、スタイルシートの中にコメントを書くことも、見やすさにつながります。コメントを書くには、html とは違って、/* ここにコメント*/ のように/* */で囲んで書きます。ここのコードは〜 と書いておくと便利。
また、スタイルシートについてもっと知りたい場合は、姉妹サイトの「スタイルシートの森♪」をご覧ください。ほかにもいろいろ指定できるものがあります(^^♪
ちょっと時間を使ってしまいましたが、ここは大事なので、ご勘弁ください。(o_ _)ｏ))
