CSS（Cascading Style Sheets/シー・エス・エス）の書き方とルールをわかりやすく解説します。
CSSの書き方の基本基礎
CSSは、セレクタ（selector）とプロパティ（property）で構成されています。
セレクタ {
プロパティ: 値;
}CSSの書き方の基本は、まず「セレクタ名」を書いて、波括弧（中括弧）で囲います。
囲った中に、「プロパティ名」を書いて、コロンを付けて、値を書きます。
最後に、セミコロンを付けて完了です。
これが、スタイルの1つのグループになります。次のセレクタは、改行して同様に書いていきます。
セレクタとは
CSSを適用する対象のことをセレクタと言います。
h1、p、div、ul、li、dl、dt、dd、table、buttonなどのHTMLもその対象になります。
h1 {
プロパティ: 値;
}
p {
プロパティ: 値;
}セレクタは、id属性とclass属性を指定してオリジナルの対象を設定することもできます。
id属性とclass属性については、後述します。
プロパティとは
CSSで決められているスタイルの種類のことをプロパティと言います。
プロパティと指定できる値は決められています。
例えば、テキストに色を指定したい場合、使うプロパティは「color」です。
colorプロパティに指定する値は、色を表すカラーコードを入れることができます。
カラーコードの形式は、W3C標準の基本カラー名、16進数、短縮形、RGB形式、RGBA形式などで指定できます。
黒の場合の値は、black、#000000、#000、rgb(0,0,0）rgba(0,0,0,1)のどの形式で指定しても黒を表現できます。
p {
color: black;
}
p {
color: #000;
}
p {
color: rgba(0,0,0);
}参考までに、よく使うプロパティをまとめておきます。
文字・テキストに関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| color | 文字の色 |
| font-size | 文字の大きさ(フォントサイズ) |
| font-weight | 文字の太さ |
| text-decoration | テキストの装飾 |
| font-family | 文字の字体 |
| text-align | テキストや画像の水平方向の位置 |
| line-height | 行間の調整 |
| letter-spacing | 字間の調整 |
| vertical-align | テキストや画像の縦方向の位置 |
枠線に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| border | 枠線の色、太さ |
| border-radius | 角の角度調整 |
横幅と高さに関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| width | 横幅の調整 |
| height | 高さの調整 |
余白に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| margin | 外側の余白 |
| padding | 内側の余白 |
| box-sizing | 要素の幅・高さの算出設定（paddingやborderをwidthやheightに含めるか否か） |
背景に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| background | 背景全般の設定 |
| background-color | 要素の背景色の設定 |
| background-image | 要素の背景画像の設定 |
| background-size | 背景画像のサイズ設定 |
| background-repeat | 背景画像の繰り返し設定 |
| background-position | 背景画像の位置設定 |
| background-attachment | 背景画像の位置の固定・スクロール設定 |
表示表現に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| display | インライン要素・ブロック要素扱いの指定、非表示設定、レイアウト設定 |
位置に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| position | 要素の配置を設定 |
影の表現に関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| box-shadow | ボックスの影を表現 |
| text-shadow | テキストの影を表現 |
はみ出しに関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| overflow | 要素の内容がブロックからはみ出す場合の挙動や制御を設定 |
アニメーションに関連するCSSプロパティ
| プロパティ名 | 使用目的・用途 |
|---|---|
| transform | 要素の回転、移動、拡大縮小、傾斜を表現 |
| transition | 状態変化など簡単なアニメーション |
| animation | アニメーションのスタイル設定 |
その他、高度なアニメーションとして、CSSのアットルールである@keyframesを使ってアニメーションの挙動とタイミングの指定をすることができます。
CSSのプロパティの種類と値はたくさんありますので、はじめに丸暗記する必要はありません。表現の目的やデザインの用途に応じて、どのように表示されるか試しながら繰り返し練習してください。
id属性とclass属性
次に、id属性とclass属性について解説します。まずは、使い方を理解しましょう。
CSSのセレクタは、id属性とclass属性を指定してオリジナルのスタイルを設定することができます。idとclassは目印のようなもので自由に付けることができます。
オリジナルのセレクタを作ることで、HTMLタグとCSSのスタイルを紐付することができます。それが、id属性とclass属性です。idとclassは、HTMLの要素に識別するための名前を付ける役割になります。
例えば、HTMLで記述したグループAのテキストを赤色に、グループBのテキストを青色にしたい場合、id属性またはclass属性で、任意の名前を付けてスタイルを適用して色を指定することができます。
下記は、HTMLのpタグのclass属性に、titleAとtitleBという名前（クラス名）を付けた例です。
<p class="titleA">グループA</p>
<p class="titleB">グループB</p>これらのクラスにCSSファイルでスタイルを指定します。
セレクタが.titleAと.titleB、プロパティがcolor、値がredとblueです。
書き方の基本は、class属性の場合は、セレクタ名の前に、.（ドット）を付けます。
id属性の場合は、セレクタ名の前に、#（シャープ）を付けます。
これは、スタイル指定のルールなので覚えておきましょう。
.titleA {
color: red;
}
.titleB {
color: blue;
}同様に、id属性にtitleAとtitleBという名前（アイディ名）を付けた例はこのようになります。
<p id="titleA">グループA</p>
<p id="titleB">グループB</p>id属性の場合は、セレクタ名の前が、#（シャープ）に変わるだけです。
#titleA {
color: red;
}
#titleB {
color: blue;
}これで、pタグで囲ったテキストをCSSで指定した色で表示することができます。
id属性とclass属性の違い
次に、idとclassの違いを理解しましょう。
id属性とは
id属性は、要素を一意に識別するための属性です。言い換えると、1つのHTMLファイルに1つのみ利用できる属性になります。従って、1つHTMLファイル内に同じ名前のidを2回以上使ってはいけません。CSSでは、1つの特定のセレクタに対して、独自のスタイルを適用する場合に使用することが多いです。
<p id="text-color-1">1回目</p>
<p id="text-color-2">2回目</p>
<p id="text-color-3">3回目</p>id属性は、アンカーリンク（ページ内リンク）などにもよく使います。
class属性とは
class属性は、要素にスタイルを適用するための属性です。言い換えると、1つのHTMLファイルに複数のクラスを利用できる属性になります。従って、1つHTMLファイル内に同じ名前のclassを何回でも使うことができます。CSSでは、複数のセレクタに同じスタイルを適用する場合に使用します。
<p class="text-color">1回目</p>
<p class="text-color">2回目</p>
<p class="text-color">3回目</p>Web制作において、CSSでデザインを行う場合は、基本的には、class属性を使ってスタイルを指定します。
CSSは、複数の要素に複数のスタイルを適用する場面が多くあります。
id属性は、JavaScriptなどの他言語でも使用することがあるため、CSSのみが目的の場合は、id属性を多用しないほうが後々整理しやすくなります。制作現場でも、class属性を使うことが一般的といえます。
id属性とclass属性のルール
必須のルールとして、id名やclass名は、同じ名前を2重で作ってはいけません。
理由は、idやclassの量が増えてきた際に、スタイルが効かないなどのトラブルが起きるからです。
idとclassの名前は、重複して作成しないよう注意しましょう。
id属性とclass属性の名前の付け方
名前の付け方の基本ルールを4つ挙げますので覚えておきましょう。
- 空白は使わない。
- 半角英数、-（ハイフン）、_（アンダースコア）の組み合わせが可能。
- アルファベットの大文字と小文字は区別される。
- 先頭に数字を使わない。
これらに反するとスタイルがうまく反映されなかったり、他のプログラムのトラブルのもとになります。
また、id属性とclass属性の名前は、上記のようなルールに沿っていれば、どのような名前を付けても良いのですが、基本的には自分であとから見ても、他の人が見ても内容を判別できる名前にしておくことも大切です。
命名規則の記法
命名規則の記法を3つ紹介します。CSSに限らず、プログラミング言語ではよく使う命名規則です。個人によって好みや偏りがありますが、プロジェクトチームで決めておくと他の人が見てもわかりやすくなります。
基本は、単語の間の空白の代わりに、アンダースコア、ハイフン、大文字など使います。
スネークケース
単語の間にアンダースコアを使う記法です。
例）item_list
ケバブケース
単語の間にハイフンを使う記法です。
例）item-list
キャメルケース
2番目の単語の頭は大文字を使う記法です。
例）itemList
CSSではスネークケース（アンダースコア）やケバブケース（ハイフン）を使うことが多いです。
よく使われるid属性とclass属性の名前
id属性とclass属性によるセレクタ名は、自由に名付けることができますが、参考までにWeb制作の現場でよく使われるid属性とclass属性の名前の一例を紹介します。
| 使用場所 | セレクタ名 |
|---|---|
| ボックス | wrapper, wrap, container, inner |
| ヘッダー | header, header_contents, header_area |
| フッター | footer, footer_contents, footer_area |
| メインコンテンツ | main, main_contents, contents |
| コンテンツ | content, contents, container, sec, section, block |
| サイドバー | sidebar, side-bar |
| ナビゲーション | navi, nav, menu |
| グローバルナビゲーション | gnavi, gnav, global-nav |
| 見出し | title, heading, sub_title |
| 段落、セクション | section, sec, entry-body |
| ロゴ | logo |
| ファーストビュー、メインビジュアル | main-visual, fv |
| 画像 | image, images |
| 記事 | entry |
| 概要 | outline, summary |
| お知らせ | info, infomation |
| コピーライト | copyright |
CSSを記述できる3つの場所と書き方の違い
CSSを書ける場所は、基本3つあります。
- HTMLファイルのhead要素内
- HTMLファイルのHTMLタグのstyle属性
- CSSファイル
いずれもスタイルコードの書き方はほぼ同じですが、書く場所によってメリット・デメリットがありますが、結論から言うと、基本的には、CSSファイルに書く方法が実用的です。
例として、HTMLのpタグで表示するテキストをCSSで青色に指定することとします。
<p>テキストの色は青色です</p>このHTMLコードを使って、3つの場所でCSSを書く例をそれぞれ解説していきます。
1. HTMLファイルのhead要素内に書く方法
書き方は、まずhead要素内にstyle要素を配置します。
<html>
<head>
<style></style>
</head>
<body>
<p>テキストの色は青色です</p>
<body>
</html>配置したstyle要素内に、CSSのコードを書きます。
テキストを青色にする場合、セレクタがp、プロパティがcolor、値がblueとなりますので、このように書くことができます。
<html>
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>テキストの色は青色です</p>
<body>
</html>2. HTMLファイルのHTMLタグのstyle属性に直接書く方法
この手法をインラインCSSまたはインラインスタイルシートと言います。
HTMLタグのstyle属性を使って、プロパティと値を指定します。
<HTMLタグ style="プロパティ:値;"></HTML閉じタグ><html>
<head>
</head>
<body>
<p style="color: blue;">テキストの色は青色です</p>
<body>
</html>3. CSSファイルに書く方法
HTMLファイルで外部にあるCSSファイルを読み込みます。
読み込む方法は、HTMLファイルのheadタグ内に、linkタグでCSSファイルを指定します。リンク先のURLは、相対パスと絶対パスが利用できます。
<link rel="stylesheet" type="text/css" href="リンク先のCSSファイルのURL">例として、リンク先のCSSファイル名は、style.cssとします。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>テキストの色は青色です</p>
<body>
</html>リンク先のCSSファイルstyle.cssにスタイルを記述します。
p {
color: blue;
}これで、CSSの読み込みが完了するので、CSSファイルに書いたスタイルが、HTML側に反映されます。
HTMLファイル内に書くCSSの特徴
メリットは、CSSファイルを読み込む必要がないため、ブラウザでの表示スピードが上がります。
使用例としては、以下のような時に用いられます。
- 部分的に、CSSファイルを上書きしてCSS適用する場合
- テスト段階で、CSSを試す場合
- 意図的に表示スピードを上げるために共通部分をhead要素内で適用する場合
デメリットは、ファイルやコードが増えてきた際に整理が困難になることです。
また、CSSが重複した場合、修正箇所を見つけるのが大変です。従って、テスト段階または部分的に使用することが多い方法です。
CSSファイルに書くCSSの特徴
メリットは、共通のCSSを1つのファイルにまとめることができるため、複数のHTMLファイルに1つのCSSファイルを適用することができます。何度も同じスタイルコードを書く必要がないということです。Web開発においては、HTMLやCSSのコードやファイル数は莫大な量になることが通常です。独立したCSSファイルにまとめておくことで整理しやすくなるだけではなく、データ容量を軽減することにもつながります。
また、複数人のチームで進めるプロジェクトの場合、誰が見てもわかりやすく指示できるようにしておくことは必須です。Webの現場では、テスト段階を除き、基本的には独立したCSSファイルに書く方法が採用されています。
まとめ
CSSの書き方の基本は、まずHTMLファイルにHTMLコードを書いたhtmlタグにidやclassを付けて、CSSファイルにスタイルコードを指定する流れです。
CSSは、書き方の基本さえ理解できれば、あとはいろいろなプロパティと値を調べてながら使っていくことで、応用的なスキルを身につけることができます。
CSSに少し慣れてきたら、Webサイトを1ページ、HTMLとCSSを使って自由にデザインしてみてください。
