【CSS】CSS入門

CSSはプログラミング言語の１つです。

ここではCSSの基礎について解説します。

CSS

CSSは“HTML等の要素を装飾する言語”です。

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

WebブラウザでのHTMLドキュメント表示において、要素のテキストカラーやサイズなど様々なスタイル（装飾）を設定できます。

CSSファイル

CSSファイルは“CSSで記述したファイル”です。

他にもスタイルシートとも呼ぶことがあり、拡張子はcssです。

また、CSSで記述したコードそのものをスタイルコードと呼ぶことがあります。

基本構文

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

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

セレクター

セレクターは“スタイルの適用要素”です。

記述形式は複数あり、例えばh1要素を指定する場合は次のようになります。

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

プロパティ名

プロパティ名は“スタイルの種類”です。

テキストカラーやサイズ、背景などのビジュアル（見た目）に関する項目を指定します。

例えば、テキストカラーの指定はcolorプロパティを使用します。

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

プロパティ値

プロパティ値は“スタイルの値”です。

プロパティによって値の種類は様々です。

例えば、テキストカラーを赤色に設定する場合は次のようになります。

h1 {
    color: red;
}

波括弧{}

波括弧（{}）は“スタイルのまとまり”を意味します。

波括弧内に複数スタイルを定義可能で、それらはセレクター要素に適用されます。

例えば、テキストカラーを赤色、背景色を黒色に設定する場合は次のようになります。

h1 {
    color: red;
    background: black;
}

適用方法

CSSをHTML要素に適用する方法は３種類あります。

次の『h1要素のテキストカラーを赤色に設定する』スタイルを元に各方法について確認します。

h1 {
    color: red;
}

内部コード

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

___ih_hl_start
<style>
    h1 {
        color: red;
    }
</style>
___ih_hl_end

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

外部コード

HTMLファイルとは別のファイル（スタイルシート/CSSファイル）を作成し、link要素で読み込みます。

一般的に最も多く使われる方法です。

___ih_hl_start
<link rel="stylesheet" href="/article/style/html-link-tag.css">
___ih_hl_end

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

インラインスタイル

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

この場合、直接要素に定義するため、セレクターと波括弧は不要で、プロパティのみ記述します。

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

開発方法

HTML要素のスタイル適用方法で最も一般的な方法は、スタイルシート（外部コード）の読み込みです。

以下にスタイルシートを作成する方法をご紹介します。

1. ファイル作成

テキストエディタでファイルを作成します。

ファイル名は任意のもので構いませんが、日本語などは環境によって動作しないことがあるため、アルファベットや数字で命名することが推奨です。

また、拡張子はcssです。

ここのサンプルではsample.cssとします。

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

2. 文字コード

１行目にCSSファイルの文字コードを定義します。

@charset "utf-8";

サンプルではutf-8を指定していますが、開発環境のテキストエディタの文字コードと一致するようにしてください。

文字コードが異なると、Webブラウザが正常に読み取れない可能性があるため注意が必要です。

3. スタイル

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

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

4. 保存

ファイルの編集を終えたら保存します。

保存しないと編集内容が消えたり、Webブラウザに反映されないことがあります。

5. 読み込み

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

<link rel="stylesheet" href="/article/style/sample.css">

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>