【CSS】CSS入門

アプリケーションやWEBサイトは生活に欠かせない必需ツールです。
CSSはそれらを構築する１つの技術です。

ここではCSSについてご紹介します。

CSSとは

CSSの正式名称はCascading Style Sheetsです。
プログラミング言語に分類されます。

CSSでHTMLやXMLの要素のスタイル（装飾）を設定することができます。

基本構文

HTML要素に装飾を適用する基本構文は次のようになります。

セレクター {
    プロパティ名: プロパティ値;
}

セレクター

セレクターは『スタイルを適用する要素』です。
様々な形式で要素を指定できます。
例えばh1要素に指定する場合は次のようになります。

h1 {
    プロパティ名: プロパティ値;
}

プロパティ名

プロパティ名は『スタイルの種類』です。
カラーや背景などのレイアウトや見た目に関して何を設定するかを指定します。
例えば、テキストカラーを設定するcolorプロパティは次のようになります。

h1 {
    color: プロパティ値;
}

プロパティ値

プロパティ値は『スタイルの値』です。
カラーや背景などのプロパティをどのように設定するかを指定します。
例えば、テキストカラーを赤に設定する場合は次のようになります。

h1 {
    color: red;
}

波括弧{}

波括弧（{}）はスタイルのまとまりを意味します。
波括弧の中に複数のスタイルを定義でき、それらはセレクター要素にまとめて適用されます。
例えば、テキストカラーを赤、背景色を黒に設定する場合は次のようになります。

h1 {
    color: red;
    background: black;
}

適用方法

CSSをHTML要素に適用する方法は３種類あります。
次の『h1要素のテキストカラーを赤に設定する』スタイルシートを例に見ていきましょう。

h1 {
    color: red;
}

内部スタイルシート

HTMLのstyle要素にスタイルを定義します。

ソースコード

<style>
    h1 {
        color: red;
    }
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

外部スタイルシート

HTMLファイルとは別にCSSファイルを作り、link要素でスタイルシートを読み込みます。
この方法は一般的に多く使われる方法です。

ソースコード

<link rel="stylesheet" href="/article/style/html-link-tag.css">
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

インラインスタイルシート

HTML要素のstyle属性にスタイルを定義します。
この場合、直接要素に定義するため、セレクター {}は必要ありません。

ソースコード

<h1 style="color: red;">CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

開発方法

HTML要素のスタイル適用には、外部スタイルシートの読み込みが一般的です。
外部スタイルシートはHTMLファイルとは別のCSSファイルです。

以下にCSSファイルを作成する方法をご紹介します。

1. ファイル作成

テキストエディタでファイルを作成します。
ファイル名は任意のもので構いませんが、日本語などは環境によって動作しないことがあるため、アルファベットや数字で命名することをお勧めします。

また、拡張子はcssです。ここの例ではsample.cssとします。

このファイルにCSSで内容を記述します。

2. 文字コード

１行目に文字コードを定義します。

sample.css

@charset "utf-8";

この文字コードはCSSファイルの文字コードを表わします。
上記例では文字コードにutf-8を設定していますが、開発環境のテキストエディタの文字コードと一致するようにしてください。

文字コードが異なると、ブラウザが正常に読み取れない可能性があります。

3. スタイル

２行目以降にスタイルを定義します。

sample.css

@charset "utf-8";
h1 {
    color: red;
}

4. 保存

ファイルを編集したら忘れないように保存してください。

5. 読み込み

HTMLファイルのlinkタグでCSSファイルを読み込みます。

sample.css

<link rel="stylesheet" href="/article/style/sample.css">
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー