In 'n' Out

知識を取り込み、そして発信する

CSSの役割と書き方

CSSとはどのような言語か

CSSは、HTMLで構成された文書に対して、視覚的なデザインやレイアウトを与えるための言語です。
文字の色や大きさ、余白、枠線、背景色、配置など、ユーザーが画面上で目にする見た目のほとんどを調整できます。
HTMLが内容と構造を作る骨組みだとすれば、CSSはそれを読みやすく整えて印象を作る装飾の役割を担います。
後に学ぶボックスモデルやレイアウトへ進む準備として、CSSの基本的な使い方と考え方を整理していきます。

CSSをHTMLに適用する方法

CSSは大きく三つの方法でHTMLに適用できます。
それぞれは使いどころが異なり、ページの規模や保守性を意識して選択する必要があります。
同じスタイルを複数箇所で使い回したい場合、特定のページだけで調整したい場合、あるいは単一の要素へ直接反映させたい場合など、目的に応じて最適な手段を選ぶことでコードの整合性が保たれ、後から見返したときの理解や修正が容易になります。
ここではCSSをHTMLに適用する三つの基本的な方法を説明し、それぞれの特徴を確認していきます。

インラインCSSの書き方

インラインCSSは、HTML要素の中に直接style属性を記述してスタイルを適用する方法です。
書いたそばから見た目が変わるため、動作確認や簡単な調整を行いたいときに使いやすい形式です。

コード例

<p style="color:red;">文字が赤色で表示されます</p>

出力例

文字が赤色で表示されます

直接書き込めるため動作の確認などで扱いやすい反面、スタイルがHTML中に散らばり管理が複雑になります。
小規模な修正には便利ですが、ページ全体の統一や保守性を考えると大規模制作では避けることが一般的です。

内部CSSの書き方

内部CSSは、HTMLファイルのhead内にstyle要素を置き、その中へスタイルをまとめて記述する方法です。
ページ単位でデザインを管理でき、インラインより整理された書き方になるため、学習の初期段階では非常に扱いやすい形式です。

コード例

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style>
        p{
            color:blue;
            font-size:18px;
        }
        </style>
    </head>
    <body>
       <p>内部CSSでスタイルを適用します。</p>
       <p>ページ内にあるすべてのp要素が青色でやや大きめの文字として統一して表示されます。</p>
    </body>
</html>

出力例

内部CSSでスタイルを適用します。

ページ内にあるすべてのp要素が青色でやや大きめの文字として統一して表示されます。

1ページ内のデザインがまとめられるため見通しは良いものの、複数ページで共通化したい場合には不向きです。
単ページの構成なら十分ですが、規模が大きくなるほど別ファイルで管理する外部CSSが必要になります。

外部CSSの書き方

外部CSSは、CSSファイルを別途用意し、それをlink要素で読み込む方法です。
もっとも保守性が高く、複数ページでスタイルを共有できるため、実際の制作現場では標準的に利用される書き方です。

コード例

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <p>ページ内にあるすべてのp要素が緑色で表示されます。</p>
/*style.css*/
p{
    color: green;
}

出力例

ページ内にあるすべてのp要素が緑色で表示されます。

デザインを一元管理でき、保守性も高いため、サイト制作ではもっとも推奨される方法です。
ただし、CSSファイルのパス指定を誤るとスタイルが読み込まれないため、ディレクトリ構造を正しく理解しておく必要があります。

当サイトでは外部CSSの書き方をメインにします。

CSSの書き方（文法の基礎）

CSSは「どの要素に対して」「どのような見た目を設定するか」を書き分けるために、決まった文法を持っています。
セレクタと呼ばれる対象を示す名前を書き、その後に続く波かっこ内にプロパティと値の組み合わせを記述するのが基本です。

構文

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

この形を理解しておくことで、色、余白、枠線、文字サイズなど、どのようなスタイルも共通した書き方で統一して扱えるようになります。
スペルを誤るとプロパティが無視されるため、慣れるまではエディタの補完機能を活用すると理解が進みます。
まずはタグ名そのままをセレクタとして使い、スタイルが一度に複数の要素へ反映される感覚をつかむと良いです。

セレクタ

セレクタはCSSがどのHTML要素にスタイルを当てるかを指定するための部分で、ルールの入口となる重要な要素です。
ブラウザはセレクタに合致した要素だけを探し出し、その後ろに書かれたスタイルルールをまとめて適用します。
どの要素を狙っているのかを正確に指定できると、無駄なく意図通りに見た目をコントロールできます。
また、基本的には、ほとんどのHTML要素に対してセレクタでスタイルを指定できます。
ただし、metaやscriptのように画面に直接表示されない要素に指定しても、見た目には変化がありません。

コード例

p{
    color: red;
}

div {
    font-size: 20px;
}

body {
    font-weight: bold;
}

セレクタにはpやdivなどのタグ名だけでなく、htmlやbodyなどのページ全体の土台となる要素も指定でき、これを要素セレクタと言います。

構文

.クラス{
    プロパティ:値;
}
        
#id{
    プロパティ：値;
}

コード例

.abc{
    color: red;
}

#def {
    font-size: 20px;
}

クラス名をセレクタにするものをクラスセレクタと言い、クラスセレクタを使用するときにはクラス名の前にドット（.）を付けます。 id名をセレクタにするものをidセレクタと言い、idセレクタを使用するときにはidの前にシャープ（#）を付けます。
クラスセレクタや id セレクタを使うと、同じタグでも役割ごとにスタイルを細かく出し分けることができます。
セレクタに一致した要素だけが、波かっこ（{}）の中に書いたスタイルを受け取ります。

プロパティと値

プロパティと値はCSSの中で見た目を具体的に指定する部分です。
プロパティには色やサイズなど変更したい項目の名前を書き、その横に値を指定してスタイルを細かく定義します。
複数のプロパティをまとめることで、ひとつの要素に複数の見た目の変更を同時に与えることができます。

プロパティと値は必ずセットで記述し、プロパティの後にコロン、値の後にセミコロンを置きます。
値の形式はプロパティごとに決められており、色名や数値など正しい形式で記述する必要があります。

コード例

<p>赤くなる段落です</p>
<div class="divBox">クラスを指定したボックスが幅200px、上下左右余白が20px、背景色は薄いグレーで表示します</div>
<div id="mainBox">フォントサイズを18pxにします</div>
p{
    color: red;
}

.divBox {
    width: 200px;
    padding: 20px;
    background-color: lightgray;
}

#mainBox {
    font-size: 18px;
}

出力例

赤くなる段落です

クラスを指定したボックスが幅200px、上下左右余白が20px、背景色は薄いグレーで表示します
フォントサイズを18pxにします

出力例のように要素セレクタに対しての指定、クラスセレクタ対しての指定、idセレクタに対しての指定で見た目が変化します。
同じタグを使っていてもクラスやidを付与することで、使い分けが可能になります。

※出力例の文字色はサイト全体のスタイル調整の都合でclassを用いています。
実際の動作としては、上記CSSの指定が適用された状態と同じ結果になります。

優先順位

優先順位は複数のCSSが同じ要素に異なる指定をしたときに、最終的にどのルールが採用されるかを決める仕組みです。
スタイル指定が重なる場面は多く、優先順位の理解は意図したデザインを保つために重要です。

コード例

<p>黒くしたい段落</p>
<p>青くしたい段落</p>
<p class="special">緑にしたい段落</p>
p{
    color: black;
}

p{
    color: blue;
}

p.special{
    color: green;
}

出力例

黒くしたい段落

青くしたい段落

緑にしたい段落

要素セレクタよりもクラスセレクタやidセレクタの方が強く、同じ強さの場合は後から書いたルールが優先されます。
この例では同じp要素でも、2つ目のpで指定したblueが最初のblackを上書きしますが、3つ目のpは具体的な条件を持つp.specialが採用されgreenが適用されます。
優先順位を誤解しているとデザインの調整が思うようにいかない原因になりがちです。
なお、後に書いたルールが優先されるのは“強さが同じ場合”に限られ、ID＞クラス＞要素のように強さが異なる場合は、順番よりも強さが優先されます。
強いセレクタを乱用すると後の修正が難しくなるため、必要以上に複雑な指定は避け、どのルールが当たっているか常に把握する習慣をつけると扱いやすくなります。

コメントについて

CSSでもコードを分かりやすくするためにコメントを残すことができます。
複数のスタイルが重なると何をどこで設定したのか分からなくなることがあるため、必要に応じて説明を書いておくと後から見返すときに役立ちます。

構文

/*...*/

コード例

<p>赤い太字にしたい</p>
/*段落の設定*/
p{
    color: red;
    /*font-weight: bold;*/
}

出力例

赤い太字にしたい

コード例では赤くする設定は活かして、太くする設定はコメントで囲んだため、赤い文字になります。 つまり、プロパティ:値をコメントで囲むとその設定は無効になります。
デバッグにとても便利で、設定したけど迷った際に一旦無効にしておいて、後で決めるということもできます。