はじめに
HTMLでWebページの構造を作れるようになると、
次に必要になるのが CSS（Cascading Style Sheets） です。
CSSを使うことで、
- 文字の色や大きさを変える
- レイアウトを整える
- Webサイトらしい見た目にする
といったことが可能になります。
本記事では、CSS入門として、
- CSSの役割と基本概念
- よく使うプロパティ
- 実際に手を動かすハンズオン
を初心者向けに解説します。
CSSとは何か？
CSSは、HTMLで作られた構造にデザインを与えるための技術です。
| 技術 | 役割 |
|---|---|
| HTML | 構造 |
| CSS | 見た目 |
| JavaScript | 動き |
CSSはHTMLと分離して管理できるため、
保守性・再利用性・可読性 が高まります。
CSSの書き方は3種類ある
1. インラインCSS（非推奨）
<p style="color: red;">赤い文字</p>
- 学習用以外ではほぼ使わない
2. 内部CSS（head内）
<style>
p {
color: blue;
}
</style>
- 小規模ページ向け
3. 外部CSS（推奨）
<link rel="stylesheet" href="style.css">
- 本番・学習ともに最も一般的
CSSの基本構文
セレクタ {
プロパティ: 値;
}
例：
p {
color: red;
font-size: 16px;
}
よく使うCSSセレクタ
要素セレクタ
p {
color: black;
}
classセレクタ（最重要）
.text {
color: green;
}
<p class="text">クラス指定</p>
idセレクタ
#title {
font-size: 32px;
}
<h1 id="title">タイトル</h1>
※ id は1ページに1つが原則
よく使うCSSプロパティ
文字装飾
color: #333;
font-size: 16px;
font-weight: bold;
余白（超重要）
margin: 20px;
padding: 10px;
枠線・背景
border: 1px solid #ccc;
background-color: #f5f5f5;
【ハンズオン】CSSでWebページを装飾しよう
ステップ1：ファイル構成
css-sample/
├─ index.html
└─ style.css
ステップ2：HTMLを作成
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS入門ハンズオン</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">CSS入門</h1>
<p class="text">
CSSでデザインを学びます。
</p>
<div class="box">
ボックス要素
</div>
</body>
</html>
ステップ3：CSSを作成
style.css
body {
font-family: Arial, sans-serif;
background-color: #fafafa;
}
.title {
color: #333;
margin-bottom: 16px;
}
.text {
color: #555;
font-size: 14px;
}
.box {
margin-top: 20px;
padding: 16px;
border: 1px solid #ccc;
background-color: #fff;
}
ステップ4：ブラウザで確認
index.htmlを開く- デザインが反映されていれば成功 🎉
CSSでよくある初心者のミス
- CSSファイルの読み込みパスが違う
- セレクタ名のスペルミス
;の付け忘れ- キャッシュが残っている（再読み込み）
SEOを意識したCSSのポイント
1. HTML構造を崩さない
- CSSで無理に
display:noneを多用しない - 見出しタグはHTML側で正しく定義
2. 可読性を重視
/* セクションタイトル */
.section-title {
font-size: 24px;
}
3. ページ表示速度を意識
- CSSは1ファイルにまとめる
- 不要な装飾を増やしすぎない
次に学ぶべきCSS技術
CSSの基礎を理解したら、次のステップがおすすめです。
- Flexbox レイアウト入門
- Grid レイアウト入門
- レスポンシブデザイン
- CSS × Docker 配信
まとめ
本記事では、CSS入門として以下を解説しました。
- CSSの役割と基本構文
- よく使うセレクタ・プロパティ
- 実践的なハンズオン
- SEOを意識した考え方
CSSは、Webページを
「見やすく・使いやすく・信頼できる」
ものにする重要な技術です。
コメントを残す