読者です 読者をやめる 読者になる 読者になる

初めてのCSS。ブログをカスタマイズしたい人向けの解説 - ブロガー向けCSS入門

WEBデザイン入門 ブロガー向けのCSS入門

f:id:nasust:20161212143136j:plain


こんにちはnasustです。 この記事からCSSの入門的な解説を書いていきます。

この解説は以下のブロガーを想定して解説していきます。

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

ですのでCSSを基礎を中心に解説します。

CSSとは何ですか

一言で申せばHTMLの文章を装飾する設定です。 例えば以下のようなHTMLがあるとします。

<p>おはようございます</p>
<p style="color:red;">こんにちは</p>

これは以下のように表示されます。


おはようございます

こんにちは


“こんにちは"が赤く表示されています。 このようにHTMLのタグに対して色々なデザインを設定する事ができるのがCSSです。

CSSは1996年に最初の規格が出ており、現代までに3回もの大きなバージョンアップしており、 その度にデザインの表現力がよりリッチになっています。

今後の入門記事では現代までの全てのCSSの機能を解説していきます

CSSはどこで設定できるのですか?

CSSは以下の三箇所で設定できます。

  • styleタグ内で記述する
  • htmlファイルとは別の外部のファイルに記述する
  • タグのstyle属性に記述する

それぞれの設定について解説していきます。

styleタグ内で記述する

<!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>

この様にstyleタグで囲まれた部分に記述することができます。 基本的にheadタグに囲まれた部分にstyleタグを書きますが別の場所でも大丈夫です。

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

この様にbodyタグ内で書きましたが、"こんにちは"が赤くなります。 ブログでは記事内にstyleタグを書いて設定することも出来ます。

htmlファイルとは別の外部のファイルに記述する

<!DOCTYPE html>
<html lang="ja">
<head>
   <link rel="stylesheet" href="http://nasust.hatenablog.com/style.css">
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color-red">こんにちは</p>
</body>
</html>

別のファイルの"style.css"

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

このように拡張子がcssのファイル内に記述します。htmlではlinkタグのhref属性にcssファイルのurlを記述します。

もしcssファイルが同じドメイン内にありましたら、href="style.css"で指定することも出来ます。

cssファイルが外部にあるメリットは、例えば別のブログの記事でもcssファイルを指定することが出来るので使い回すことができます。

タグのstyle属性に記述する

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

このようにタグのstyle属性に書くこともできます。

cssの優先順位

では、以下のように書いたらどうなるでしょうか。

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

正解は"こんにちは"は青になります。このようにタグのstyle属性の方が優先になります。 cssにはこういう優先順位が色々あります。

例えば皆さんがブログをカスタマイズする場合は、こういう優先順位を利用して元のデザインを上書きしていく事です。

基本的な優先順位を解説していきます。

複数のCSSの場合

<!DOCTYPE html>
<html lang="ja">
<head>
   <link rel="stylesheet" href="http://nasust.hatenablog.com/styleA.css">
   <link rel="stylesheet" href="http://nasust.hatenablog.com/styleB.css">
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color-red">こんにちは</p>
</body>
</html>

別のファイルの"styleA.css"

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

別のファイルの"styleB.css"

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

この場合は、styleB.cssの.font-color-redが適用されます。これはシンプルにheadタグの後のcssファイルが設定を上書きした為です。

同じcssファイルの場合

“style.css

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

この場合は、青くなります。colorプロパティが後の.font-color-redで上書きした為です。

外部のcssファイルとstyle属性の場合

<!DOCTYPE html>
<html lang="ja">
<head>
   <link rel="stylesheet" href="http://nasust.hatenablog.com/style.css">
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color-red" style="color:blue;">こんにちは</p>
</body>
</html>

“style.css

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

この場合は"こんにちは"は青く表示されます。タグのstyle属性が優先されます。

まとめ

  • CSSは複数の場所で記述することができる
  • CSSの設定は優先順位がある

今後、このように入門的なCSSの解説を書いていきますのでよろしくお願いします。


次回

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

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

広告を非表示にする