Loading...

第2回 CSSの基本的な書き方 - ブロガー向けCSS入門

f:id:nasust:20161212143136j:plain


この記事は以下のブロガー対象としています。

  • ブログをカスタマイズしたい
  • 全くCSSの知識が無い

こんにちはnasustです。

今回はCSSの基本的な書き方を解説します。 CSSの書き方は二種類あります。

  • CSSのファイルまたはhtmlのstyleタグの中に書く場合
  • htmlのタグのstyle属性に書く場合

この二種類について解説します。

CSSのファイルまたはhtmlのstyleタグの中に書く場合

名前 又は 選択方法{
    プロパティ名 : 値;
}

実例:

.font-color-red{
    color: red;
}

このように名前を書いて { }で囲い、1行毎にプロパティ名 : 値;を書きます。

{ }はブロックと呼びます。この中にデザインの内容を書いていきます。

プロパティはcolorなどのフォントの色を表す名前を指定します。値はredなどプロパティの名前に合わせた値を指定します。

プロパティは、沢山の種類があります。それに付いては別の記事で解説します。

そして名前は、クラス名とIDの二種類があります。

クラス名

クラス名とは、{ }で囲まれたスタイルの塊の種類に名前を付けたものです。

そして名前の先頭に .を付けます。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        .font-color-red{
            color:red;
        }
    </style>
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color-red">こんにちは</p>
</body>
</html>

この例のようにhtmlのタグのclass属性にfont-color-redが記述されています。

これは、.font-color-redというクラスのスタイルが<p class="font-color-red">というタグに適用されるということです。

分かりやすく述べますと タグにclass="font-color-red"と指定されていれば、フォントの色が赤くなります。

何故こういう言い回しをするかというと、名前はルールだからです。CSSは「こういうルールだからスタイルを適用するよ」という動きをするのです。

つまり、

スタイルを適用するルール{
    プロパティ名 : 値;
}

という事です。ルールに当てはまるhtmlのタグにスタイルを適用するのです。

htmlの例では「pタグにfont-color-redという名前のルールに当たるからスタイルを適用するよ」ということです。

規格では選択子という用語です。カタカナですとセレクターと呼びます。良くCSSの記事でセレクターと出てくるのは、この事を指しています。

ID

IDというのは先ほどのクラス名と同じように名前を付けます。ただし、これはhtmlで出現する名前が必ず一個、つまりユニークである事なので、スタイルが一つだけ適用されます。

名前のつけ方は、先頭に#を付けます。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        #greeting{
            background-color: blue;
        }
        .font-color-red{
            color:red;
        }
    </style>
</head>
<body>
    <div id="greeting">
        <p>おはようございます</p>
        <p class="font-color-red">こんにちは</p>
    </div>
</body>
</html>

この例では、挨拶の文章を囲んだdivタグの背景が青になります。 このように指定されたIDをが付けられたタグにスタイルが適用されます。

htmlのタグのstyle属性に書く場合

例:

<!DOCTYPE html>
<html lang="ja">
<head>
<body>
    <p>おはようございます</p>
    <p style="color:red;">こんにちは</p>
</body>
</html>

このようにstyle="プロパティ名:値;"と書きます。複数のプロパティを適用したい場合は、

style="プロパティ名:値;プロパティ名:値;プロパティ名:値;⋯"

;で区切って書いていきます。 このstyleタグで書かれたデザインは、クラス名やIDで適用されるより優先されるので、仮に指定されていても上書きできます。

ブログの場合は、テンプレートで記事のデザインが決まっていますが、直接、htmlタグを書いてstyle属性でデザインを上書きすることが出来ます。

まとめ

CSSの書き方は二種類あります。

  • CSSのファイルまたはhtmlのstyleタグの中に書く場合
    • スタイルを適用するルールを書く
      • スタイルの名前はクラスとIDがある
  • htmlのタグのstyle属性に書く場合
    • スタイルのルールより優先できるので上書きできる。

次回

第3回 基本的なセレクタの解説 - CSS Level 1 - ブロガー向けCSS入門 - nasust life blog

ブロガー向けWEBデザイン入門に戻る