05. CSSの基本と読み込み

この章では、CSSの基本を学びます。

CSSは、HTMLで作った構造に見た目を付けるための言語です。

文字サイズ、色、余白、背景、横幅、並び方などを指定できます。

CSSの基本文法

CSSは、どの要素に、どんな見た目を当てるかを書きます。

基本形は次の通りです。

CSSの基本形

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

たとえば、h1の文字色を青にしたい場合は、次のように書きます。

見出しの色を変える

h1 {
    color: #005bac;
}

h1がセレクタ、colorがプロパティ、#005bacが値です。

複数のスタイルを指定することもできます。

複数の指定

h1 {
    color: #005bac;
    font-size: 32px;
    line-height: 1.4;
}

CSSでは、プロパティごとに最後にセミコロン;を書きます。

CSSファイルを読み込む

HTMLにCSSを当てるには、head内でCSSファイルを読み込みます。

CSSの読み込み

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
    <link rel="stylesheet" href="./style.css">
</head>

href="./style.css"は、同じ階層にあるstyle.cssを読み込むという意味です。

CSSが効かない時は、まずファイルの場所とファイル名を確認します。

よくある原因は次の通りです。

CSSファイル名が違う
ファイルの置き場所が違う
hrefのパスが間違っている
linkタグをbodyに書いている
保存し忘れている

クラスでスタイルを当てる

HTMLタグに直接スタイルを当てることもできますが、実務ではクラスを使うことが多いです。

クラスを使うと、特定の要素だけにスタイルを当てられます。

HTML

<section class="profile">
    <h2 class="profile-title">プロフィール</h2>
    <p class="profile-text">Web制作を学んでいます。</p>
</section>

CSS

.profile {
    padding: 40px;
    background-color: #f7f7f7;
}

.profile-title {
    font-size: 28px;
}

.profile-text {
    line-height: 1.8;
}

CSSでクラスを指定する時は、クラス名の前に.を付けます。

HTMLではclass="profile"、CSSでは.profileです。

よく使う文字まわりのプロパティ

文字まわりでは、次のプロパティをよく使います。

プロパティ	用途
`color`	文字色
`font-size`	文字サイズ
`font-weight`	文字の太さ
`line-height`	行の高さ
`text-align`	文字の揃え方
`letter-spacing`	文字間

例を見てみます。

文字の指定

.lead {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    text-align: left;
}

line-heightは、本文の読みやすさに大きく関わります。

日本語の本文では、1.7から1.9くらいにすると読みやすいことが多いです。

よく使う色と背景のプロパティ

色や背景では、次のプロパティをよく使います。

プロパティ	用途
`color`	文字色
`background-color`	背景色
`border`	枠線
`box-shadow`	影
`opacity`	透明度

背景と枠線

.card {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

最初のうちは、影や透明度を強くしすぎるより、余白や文字サイズを整える方が見やすくなります。

よく使うサイズと余白のプロパティ

サイズや余白では、次のプロパティをよく使います。

プロパティ	用途
`width`	横幅
`max-width`	最大幅
`height`	高さ
`padding`	内側の余白
`margin`	外側の余白
`gap`	要素同士の間隔

幅と余白

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

max-widthとmargin: 0 auto;は、中央寄せのレイアウトでよく使います。

paddingは、画面端に内容がくっつかないようにするためにも使います。

単位の基本

CSSでは、値に単位を付けることがあります。

最初によく使う単位は次の通りです。

単位	意味
`px`	固定の大きさ
`%`	親要素に対する割合
`em`	現在の文字サイズを基準にした単位
`rem`	ルートの文字サイズを基準にした単位
`vw`	画面幅を基準にした単位
`vh`	画面高さを基準にした単位

このサイトの教材では、UIの見た目を安定させるためにフォントサイズはpxで説明します。

ただし、実務ではデザインシステムやプロジェクト方針によって単位の使い方が変わることがあります。

コメントを書く

CSSでは、コメントを書くことができます。

CSSコメント

/* セクション全体 */
.section {
    padding: 80px 0;
}

コメントは、何でも書けばよいわけではありません。

複雑な意図がある時や、まとまりを区切る時に使います。

CSSが効かない時

CSSが効かない時は、順番に確認します。

CSSファイルが読み込まれているか
セレクタが合っているか
クラス名のスペルが一致しているか
後から書いたCSSに上書きされていないか
ブラウザのキャッシュが残っていないか

最初から!importantを付けるのは避けます。

!importantは上書きを強制するため、あとから管理しづらくなります。

この章のまとめ

CSSは、セレクタ、プロパティ、値で書く
HTMLにはlinkタグでCSSファイルを読み込む
実務ではクラスを使ってスタイルを当てることが多い
文字、色、背景、幅、余白の基本プロパティを覚える
CSSが効かない時は、読み込み、セレクタ、上書き、キャッシュを確認する