CSSの実習(2) - フォント・テキストの指定。

まずは、基本となるスタイルを。

通常、ウェブブラウザには、デフォルトの表示スタイルが定義されております。

これらが紛れ込むと、スタイルが巧く設定出来なくなるかも知れません。

そこで、基本となるスタイルを定義して、これらの定義をリセットする必要があります。

初めに決めた基本スタイルでは、

• ゴシック体
• 文字の大きさは通常の大きさ
• 文字のスタイルは直立体
• テキストの装飾はなし
• 字の太さは普通に
• 行揃えは左に
• 行の高さは一・五文字分(行間の幅は〇・五文字分)
• 字下げはなし(零文字分)

と言うスタイルにする事としました。

そこで、スタイル定義ファイル style.css 内の全称セレクタに対するプロパティ定義に、以下のように追記する事で新たなプロパティを指定します。

• 読み飛ばす

* {
    background-color: transparent;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

ここで、

1. font-family プロパティは使用するフォントの指定
   • 本来、ゴシック体の指定のみなら sans-serif だけで良いのですが、一部のOSでのインターネットエクスプローラで文字化けが起こるため、バグ対策として、"ＭＳ Ｐゴシック" を sans-serif の前に指定します。
2. font-size プロパティは文字の大きさの指定
   • 文字の大きさには他にも幾つかの単位がありますが、インターネットエクスプローラでは7.0までに不具合があるため、パーセント単位が安全です。
3. font-style プロパティは文字のスタイル(斜体か直立体かの)指定
4. text-decoration プロパティはテキストへの装飾の指定
5. font-weight プロパティは文字の太さの指定
6. text-align プロパティは行揃えの指定
7. line-height プロパティは行の高さの指定
8. text-indent プロパティは字下げの指定

となっております。

<h1>要素(第一等級見出し)へのスタイル定義。

基本となるスタイルを指定したら、各要素についてもスタイルを指定して行きます。

先ず、<h1>要素(第一等級見出し)について、スタイルを決めましょう。

初めに決めた<h1>要素のスタイルは

• 文字の大きさは通常の二文字分
• 行の高さは通常の一・二文字分
• 文字のスタイルは斜体
• 字の太さは太く
• 行揃えは中央に

とするつもりでした。

そこで、スタイル定義ファイル style.css 内の<h1>要素の要素セレクタに対するプロパティ定義に、以下のように追記する事で新たなプロパティを指定します。

• 読み飛ばす

h1 {
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

<h2>要素(第二等級見出し)へのスタイル定義。

続いて、<h2>要素(第二等級見出し)について決めましょう。

初めに決めた<h2>要素のスタイルは、

• 文字の大きさは通常の一・二文字分
• 行の高さは通常の一・二文字分

と言うスタイルとしました。

そこで、スタイル定義ファイル style.css 内の<h2>要素の要素セレクタに対するプロパティ定義に、以下のように追記する事で新たなプロパティを指定します。

• 読み飛ばす

h2 {
    background-color: #fff;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

<p>要素(段落)へのスタイル定義。

続いて、<p>要素(段落)のスタイルを指定します。

初めに決めた<p>要素のスタイルは、

• 字下げを一文字分取る

と言うものでした。

前回までで、スタイル定義ファイル style.css には<p>要素(段落)の要素セレクタに対するプロパティ定義は記述しておりませんので、差し当たって<h2>要素に対するプロパティ定義に続けて、以下の定義を追加しましょう。

• 読み飛ばす

p {
    text-indent: 1em;
    }

アンカーへのスタイル定義。

最後に、リンクアンカー(<a>要素)のスタイル定義です。

• その他の要素には、自動的に基本となるスタイルが適用されるため、わざわざ指定する必要が無いと言う事を忘れないでください。

初めに決めた<a>要素のスタイルは、

• 下線を引く

と言うものでした。

そこで、スタイル定義ファイル style.css 内のリンク擬似要素セレクタに対するプロパティ定義に、以下のように追記する事で新たなプロパティを指定します。

• 読み飛ばす

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited  {
    color: #000;
    text-decoration: underline;
    }