スタイルシート勉強帳

ここでは、スタイルシートのお勉強です。

スタイルシートは、HTMLを編集しなくてもデザインを変更できる。
サイト全体・ページ全体のデザインを一括編集できる。
HTMLとCSSに分離することで、HTMLファイルの容量を小さくすることができる。
など、様々な利点があります。

・・・というか、友人に「SEOに有効である」と言われてがんばってマスターしようと思った次第です。

このページは、レイアウト等をきちんとしていません（2007.04現在）が、短時間でマスターしようとしている途中です。マスターできたらきれいなレイアウトにしますね。

このページでは、スタイルシートで、

　１，文章を見やすくする

　２，リンクしてある箇所の飾り

にふれています。以下は、順次作成してゆきます。

　３，ページのレイアウトをする（表を使わないでページをレイアウトしたい）

　４，いろいろな小技集・カラーチャート

　５，～.CSSファイルを作成し、ページのHTML表記を見やすくする

くらいが、目標です。ごらんになった方の参考になればよいのですが・・・

では、さっそく。スタイルシートでページを作る

ホームページの「ソース」の中の

<HEAD> </HEAD>の間に、下記のような文章を挿入します。

■■■■■■■■これより下■■■■■■■■■■■■■■■■

<style　text/css">

<!--

body{background-color:lightcyan;}

p {font-family:"MS Gothic"; font-size:16px; font-weight:extra-light;color:blue; line-height:16px;}

h1 {font-family:"MS Gothic"; font-size:18px; color:darkcyan; line-height:50px;}

h2 {font-family:"MS Gothic"; font-size:16px; color:darkgreen; font-weight:bold;}

h3 {font-family:"MS Gothic"; font-size:16px; color:red; line-height:24px;}

a:link{color: gray; background: pink; font-size:16px;}

a:visited{color: #808080; background: #FEC2F3;font-size:16px;}

a:hover { font-weight: normal; color: #3333FF;text-decoration:none;}

a:active { font-weight: normal; color: #6699FF;}

-->

</style>

■■■■■■■■これより上■■■■■■■■■■■■■■■■

まず、なんのことかわからないかもしれませんが、とりあえず、それぞれの説明です。

また、スタイルシートは、ブラウザによっては見えてしまいますので、コメント　ではさんでおきます。

■■■■■■■■■■■■■■■■①背景の指定

body{background-color:lightcyan;}

ページの背景が、「lightcyan」（ライトシアン・薄い青）、今、後ろがそうなってますね。

■■■■■■■■■■■■■■■■②センテンスの属性の設定→Pのフォント等の属性を指定

p {font-family:"MS Gothic"; font-size:16px; font-weight:extra-light;color:blue; line-height:16px;}

通常の文字色がブルーになります。今この文がブルーなのは、通常の文章を<p>～</p>で記述しているからですね。

■■■■■■■■■■■■■■■■③ヘッダー文（見出し１）のフォント等の属性を指定

h1 {font-family:"MS Gothic"; font-size:18px; color:darkcyan; line-height:50px;}

見出し１の指定はこんな感じ、フォントはゴシック、サイズは１８ピクセル、色はダークシアン、上下の空白の高さは50ピクセル

■■■■■■■■■■■■■■■■④ヘッダー文（見出し２）のフォント等の属性を指定

h2 {font-family:"MS Gothic"; font-size:16px; color:darkgreen; font-weight:bold;}

見出し２の指定はこんな感じ、フォントはゴシック、サイズは１６ピクセル、色はダークグリーン、太字

■■■■■■■■■■■■■■■■⑤ヘッダー文（見出し3）のフォント等の属性を指定

h3 {font-family:"MS Gothic"; font-size:16px; color:red; line-height:24px;}

見出し３の指定はこんな感じ、フォントはゴシック、サイズは１６ピクセル、色は赤、上下の空白は24ピクセル

■■■■■■■■■■■■■■■

以上、まずは基本、HEADER文に入れることにより、上記のように変化します。

　なんとなく解りますよね。

　　font-family:"○○";は、字体の指定　

　　font-size:○○px；は、字体の大きさの指定

　　color:darkgreen；は字体の色の指定

　　font-weight:○○；は字の装飾の指定

　　line-height:○○px；は字の上下の空間の高さ指定　　　　　　　　　　　　　　

となるわけです。

HTML文がずいぶんすっきりしました。

■リンクボタンの設定については、次のページ（2.リンクしてある箇所の飾り）で説明します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■