CSS の書き方にはいくつかの基本ルールがあります。可読性や保守性を高めるために、以下のルールに従うとよいでしょう。
目次
1. 基本的な構文
CSS は セレクタ（対象の要素） に プロパティ（指定する内容） を適用する形で記述します。
セレクタ {
プロパティ: 値;
}
例:
p {
color: blue;
font-size: 16px;
}
2. セレクタの指定方法
- 要素セレクタ:
p,divなどの HTML 要素を指定 - クラスセレクタ:
.をつけてクラスを指定（例:.title） - IDセレクタ:
#をつけて ID を指定（例:#header） - 子孫セレクタ: スペースを空けて指定（例:
div p→div内のpに適用） - 直下の子セレクタ:
>を使って直下の子を指定（例:div > p） - グループセレクタ:
,を使って複数指定（例:h1, h2, h3）
例:
.title {
font-weight: bold;
}
#header {
background-color: gray;
}
div p {
color: red;
}
3. プロパティと値の書き方
- 各プロパティは
:で値と区切る - プロパティと値の間にスペースを入れる
- 各プロパティの後には
;をつける
正しい書き方:
p {
font-size: 14px;
color: black;
}
間違った書き方:
p {
font-size:14px /* コロンの後にスペースがない */
color black /* コロンが抜けている */
}
4. コメントの記述
コメントを入れることで、コードの可読性を向上させます。
/* これはコメントです */
p {
color: green; /* この行のみにコメントを追加 */
}
5. インデントと改行
可読性を上げるため、適切なインデントを使いましょう。
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
6. 一貫した単位を使う
数値には適切な単位をつける。
p {
font-size: 16px; /* OK */
line-height: 1.5; /* OK (単位なしでOK) */
margin: 10px; /* OK */
}
7. ショートハンドプロパティを活用
CSS には複数のプロパティをまとめて指定できる ショートハンド があります。
例: margin のショートハンド
/* 上・右・下・左の順 */ margin: 10px 20px 15px 5px;
例: border のショートハンド
border: 2px solid red; /* 太さ, スタイル, 色 */
8. クラスとIDの使い分け
- クラス（
.class）: 複数の要素 に適用したい場合 - ID（
#id）: 一つの要素だけ に適用する場合（基本的に複数の ID を同じページで使わない）
例:
/* クラスは複数要素に適用可能 */
.button {
background-color: blue;
}
/* ID は1つの要素に限定（基本的に使いすぎない） */
#main-header {
font-size: 24px;
}
9. 外部CSSファイルの活用
CSS を HTML に直接書かず、外部ファイル として分けるのが一般的です。
HTML で CSS を読み込む:
<link rel="stylesheet" href="style.css">
外部 CSS（style.css）:
body {
background-color: #f0f0f0;
}
10. メディアクエリ（レスポンシブデザイン）
画面サイズによってデザインを変えたい場合は、メディアクエリを使用します。
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
まとめ
✅ セレクタ { プロパティ: 値; } の形式で記述
✅ スペースや ; のルールを守る
✅ コメントを活用して可読性を上げる
✅ クラス（.class）と ID（#id）の使い分けを意識する
✅ 外部 CSS ファイルを活用する
✅ ショートハンドやメディアクエリを適切に使う
正しい CSS の書き方を守ると、整理された保守しやすいコード になります！ 🚀
