パソコやあ！パソコだよ！わからないことがあればコメントで教えてね！
CSSとは？ - ウェブサイトを美しくする魔法の言語
こんにちは！今回から始まる「CSS実践入門シリーズ」では、技術者でありながらフロントエンド初心者の方に向けて、実際のウェブサイト構築を通じてCSS・HTML・JavaScriptを学んでいきます。
🎯 このシリーズで学べること
- CSS基礎: スタイルシートの基本から応用まで
- HTMLテンプレート: Hugoテンプレート言語の活用
- レスポンシブデザイン: モバイル対応の実装
- JavaScript: インタラクティブ機能の追加
- 実践的カスタマイズ: 実際のサイト改善例
📚 第1回：CSS基礎知識
CSSとは何か？
CSS（Cascading Style Sheets） は、HTMLで作られた構造に対して「見た目」を指定する言語です。
1
2
3
| <!-- HTML：構造を定義 -->
<h1>私のブログタイトル</h1>
<p>これは記事の本文です。</p>
|
1
2
3
4
5
6
7
8
9
10
11
| /* CSS：見た目を定義 */
h1 {
color: blue; /* 文字色を青に */
font-size: 24px; /* 文字サイズを24pxに */
font-weight: bold; /* 太字に */
}
p {
color: #333; /* 文字色をダークグレーに */
line-height: 1.6; /* 行間を1.6倍に */
}
|
CSSの基本構文
CSSは以下の構文で書かれます：
1
2
3
4
| セレクタ {
プロパティ: 値;
プロパティ: 値;
}
|
実例で理解しよう
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| /* クラスセレクタ：.article-title */
.article-title {
color: #2c3e50; /* 文字色 */
font-size: 28px; /* 文字サイズ */
margin-bottom: 20px; /* 下の余白 */
border-bottom: 2px solid #3498db; /* 下線 */
}
/* IDセレクタ：#main-content */
#main-content {
max-width: 800px; /* 最大幅 */
margin: 0 auto; /* 中央揃え */
padding: 20px; /* 内側の余白 */
}
/* 要素セレクタ：p */
p {
color: #34495e; /* 文字色 */
line-height: 1.8; /* 行間 */
margin-bottom: 16px; /* 下の余白 */
}
|
よく使うCSSプロパティ
📝 テキスト関連
1
2
3
4
5
6
7
8
| .text-sample {
color: #333333; /* 文字色 */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 文字の太さ */
text-align: center; /* 文字の配置 */
line-height: 1.6; /* 行間 */
text-decoration: none; /* 下線なし */
}
|
📦 レイアウト関連
1
2
3
4
5
6
7
8
| .layout-sample {
width: 300px; /* 幅 */
height: 200px; /* 高さ */
margin: 20px; /* 外側の余白 */
padding: 15px; /* 内側の余白 */
border: 1px solid #ddd; /* 枠線 */
background-color: #f8f9fa; /* 背景色 */
}
|
🎨 装飾関連
1
2
3
4
5
6
7
8
9
10
11
| .decoration-sample {
background-color: #e3f2fd; /* 背景色 */
border-radius: 8px; /* 角丸 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影 */
transition: all 0.3s ease; /* アニメーション */
}
.decoration-sample:hover {
background-color: #bbdefb; /* ホバー時の色 */
transform: translateY(-2px); /* ホバー時の移動 */
}
|
CSS実践例：シンプルなカードデザイン
実際にブログでよく使うカードコンポーネントを作ってみましょう。
HTML構造
1
2
3
4
5
6
7
8
| <article class="blog-card">
<h2 class="card-title">記事のタイトル</h2>
<p class="card-meta">2025年9月13日 | 技術記事</p>
<p class="card-excerpt">
この記事では、CSSの基本的な使い方について説明します...
</p>
<a href="#" class="card-link">続きを読む</a>
</article>
|
CSS実装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| /* カード全体のスタイル */
.blog-card {
background: #ffffff; /* 背景色：白 */
border: 1px solid #e1e8ed; /* 薄いグレーの枠線 */
border-radius: 12px; /* 角丸 */
padding: 24px; /* 内側の余白 */
margin-bottom: 24px; /* 下の余白 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 薄い影 */
transition: all 0.3s ease; /* スムーズなアニメーション */
}
/* ホバー時の効果 */
.blog-card:hover {
transform: translateY(-4px); /* 少し上に移動 */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 影を濃く */
}
/* タイトルのスタイル */
.card-title {
color: #1a202c; /* ダークグレー */
font-size: 20px; /* 文字サイズ */
font-weight: 600; /* セミボールド */
margin-bottom: 8px; /* 下の余白 */
line-height: 1.3; /* 行間 */
}
/* メタ情報のスタイル */
.card-meta {
color: #718096; /* グレー */
font-size: 14px; /* 小さめの文字 */
margin-bottom: 12px; /* 下の余白 */
}
/* 抜粋のスタイル */
.card-excerpt {
color: #4a5568; /* ミディアムグレー */
font-size: 16px; /* 標準サイズ */
line-height: 1.6; /* 読みやすい行間 */
margin-bottom: 16px; /* 下の余白 */
}
/* リンクのスタイル */
.card-link {
color: #3182ce; /* ブルー */
text-decoration: none; /* 下線なし */
font-weight: 500; /* ミディアムウェイト */
font-size: 14px; /* 小さめの文字 */
transition: color 0.2s ease; /* 色変化のアニメーション */
}
.card-link:hover {
color: #2c5282; /* ホバー時は濃いブルー */
text-decoration: underline; /* ホバー時に下線 */
}
|
結果
上記のCSSを適用すると、以下のような美しいカードができあがります：
- 白い背景に薄いグレーの枠線
- 角丸で優しい印象
- ホバー時に少し浮き上がる効果
- 階層的な文字色で読みやすさを確保
💡 初心者へのアドバイス
1. 色の指定方法
1
2
3
4
5
| /* 色の指定は複数の方法があります */
color: red; /* 色名 */
color: #ff0000; /* 16進数 */
color: rgb(255, 0, 0); /* RGB値 */
color: rgba(255, 0, 0, 0.5); /* RGBA（透明度付き） */
|
2. 単位の使い分け
1
2
3
4
5
6
7
| /* 絶対単位 */
font-size: 16px; /* ピクセル：固定サイズ */
/* 相対単位 */
font-size: 1.2em; /* em：親要素基準 */
font-size: 1.2rem; /* rem：ルート要素基準 */
width: 50%; /* パーセンテージ */
|
3. 余白の考え方
1
2
3
4
5
6
7
8
9
10
11
| .sample {
/* margin：外側の余白（他の要素との距離） */
margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
/* 短縮記法：margin: 20px 15px; */
/* padding：内側の余白（境界線から内容までの距離） */
padding: 10px 20px; /* 上下10px、左右20px */
}
|
🚀 次回予告
次回は「CSSセレクタとカスケード」について学びます：
- より高度なセレクタの使い方
- CSS詳細度の理解
- 効率的なCSS設計方法
- 実際のウェブサイトでの使用例
📝 今回のまとめ
- CSSはHTMLに見た目を指定する言語
- 基本構文：セレクタ { プロパティ: 値; }
- よく使うプロパティ：color, font-size, margin, padding等
- 実践例：ブログカードコンポーネント
- 色・単位・余白の基本的な考え方
次回も引き続き、実践的な内容でCSS・ウェブデザインを学んでいきましょう！
💡 質問やフィードバックがあれば、コメント欄やTwitter（@firebird19245）でお気軽にどうぞ！
シリーズ記事
- 【第1回】CSSの基礎知識（この記事）
- 【第2回】CSSセレクタとカスケード（次回）
- 【第3回】Flexboxレイアウト入門
- 【第4回】レスポンシブデザイン完全ガイド
- 【第5回】JavaScript入門 - インタラクティブなウェブサイト作り
