前回CSSについて教えてもらったけど、実際にCSSを書くには何が必要なの？HTMLと同じツールでいいのかな？
そうだね！必要なツールは、基本的にHTMLと同じなんだ。テキストエディターとWebブラウザーがあれば大丈夫。でも、CSSならではの便利な機能もあるから、それも一緒に学んでいこう！
僕はHTMLの時にVS CodeとChromeを入れたから、それでCSSも書けるってこと？
すでに環境が整っているなら、CSSファイルを作成してHTMLとリンクするだけで始められるよ。今回は、CSS特有の作業フローと、より効率的に開発するためのテクニックを覚えよう。
CSSを書くために必要なもの
CSSを学習するために必要なのは、HTMLと同じく2つだけです：
1. Webブラウザー（CSSが適用されたページを表示する）
| ブラウザー | CSS対応 | 開発者ツール | おすすめ度 |
|---|---|---|---|
| Chrome | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
| Firefox | ⭐⭐⭐ | ⭐⭐ | ⭐⭐ |
| Safari | ⭐⭐ | ⭐⭐ | ⭐⭐ |
| Edge | ⭐⭐⭐ | ⭐⭐ | ⭐⭐ |
2. テキストエディター（CSSファイルを編集する）
| エディター | CSS機能 | 自動補完 | 色表示 | おすすめ度 |
|---|---|---|---|---|
| VS Code | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
| Cursor | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
| Sublime Text | ⭐⭐ | ⭐⭐ | ⭐⭐ | ⭐⭐ |
| メモ帳 | ⭐ | ⭐ | ⭐ | ⭐ |
CSSをやるなら、やっぱりChrome + VS Codeの組み合わせがベストだね。特にChromeの開発者ツールは、CSSの効果をリアルタイムで確認できるから重宝するよ！
ブラウザーとエディターのインストール
すでにHTMLレッスンでChromeとVS Codeをインストールしている方は、このセクションはスキップして「CSSプロジェクトを作ってみよう！」に進んでください。
Chromeのインストール（未インストールの場合）
- Google Chrome公式サイトにアクセス
- 「Chromeをダウンロード」ボタンをクリック
- 自動的にお使いのOSに適したファイルがダウンロードされます
VS Codeのインストール（未インストールの場合）
- VS Code公式サイトにアクセス
- 「Download for Mac/Windows」ボタンをクリック
- お使いのOSに適したファイルが自動的にダウンロードされます
VS Codeを日本語化する（オプション）
- 左サイドバーの「Extensions」（四角いアイコン）をクリック
- 検索欄に「Japanese」と入力
- 「Japanese Language Pack for Visual Studio Code」を選択
- 「Install」ボタンをクリック
- 「Restart Now」をクリックして再起動
CSSプロジェクトを作ってみよう！
環境が整ったところで、最初のCSSプロジェクトを作ってみよう！HTMLファイルとCSSファイルを連携させて、美しいスタイルを適用したWebページを作成してみるよ。
ステップ1: VS Codeでプロジェクトフォルダーを作成
VS Codeを起動したら、まずCSS学習用のフォルダーを開きます。
- 左サイドバーの「エクスプローラー」アイコンをクリックします。
- 「エクスプローラー」にある「フォルダーを開く」ボタンをクリックします
ステップ2: 新しいフォルダーの作成
CSS学習用のフォルダーを作成します。
- ダイアログ内で「新規フォルダ」ボタンをクリックします
- 新規フォルダー作成ダイアログが表示されます
ステップ3: フォルダー名を入力
CSS学習用フォルダーの名前を入力します。
- フォルダー名として「css-practice」と入力します
- 「作成」ボタンをクリックしてフォルダーを作成します
- 作成したフォルダーを選択して「開く」をクリックします
ステップ4: 作成者を信頼する
フォルダーを開く際に、セキュリティ確認ダイアログが表示されます。
- 「はい、作成者を信頼します」ボタンをクリックします
- これで安全にフォルダーを開くことができます
ステップ5: HTMLファイルを作成
まずは、CSSを適用するためのHTMLファイルを作成しましょう。
- 左サイドバーのエクスプローラーに表示されている「CSS-PRACTICE」のエリアにマウスを移動します。
- 「新しいファイル」アイコンをクリックします
- ファイル名を「index.html」と入力してEnterキーを押します
ステップ6: HTMLコードを書く
VS Codeで「index.html」ファイルに以下のコードを入力してください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS練習ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSSでデザインしよう！</h1>
<p class="intro">これは私が作ったCSSサンプルページです。</p>
<div class="content">
<h2>なぜCSSを学ぶのか？</h2>
<p>CSSを使うことで、Webページを美しく装飾できます。</p>
<ul>
<li>色を変更する</li>
<li>レイアウトを整える</li>
<li>フォントを調整する</li>
<li>アニメーションを追加する</li>
</ul>
</div>
<button class="sample-button">スタイル付きボタン</button>
</body>
</html>HTMLコードの中に<link rel="stylesheet" href="style.css">という行があるね。これはどういう意味？
よく見つけたね！この行はHTMLファイルに「style.cssというCSSファイルを読み込んでスタイルを適用してね」と指示しているんだ。これがHTMLとCSSを繋ぐ大切な橋渡しになるよ。
ステップ7: CSSファイルを作成
次に、スタイルを定義するCSSファイルを作成します。
- 再度「新しいファイル」アイコンをクリックします
- ファイル名を「style.css」と入力してEnterキーを押します
ステップ8: CSSコードを書く
VS Codeで「style.css」ファイルに以下のコードを入力してください：
/* 全体のリセットとベーススタイル */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
line-height: 1.6;
color: #333;
background-color: #d1fae5;
min-height: 100vh;
padding: 20px;
}
/* メインタイトル */
h1 {
color: #111827;
text-align: center;
font-size: 2.5rem;
margin-bottom: 30px;
}
/* イントロダクション段落 */
.intro {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
text-align: center;
font-size: 1.2rem;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* コンテンツエリア */
.content {
background: white;
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.content h2 {
color: #059669;
border-bottom: 3px solid #059669;
padding-bottom: 10px;
margin-bottom: 20px;
}
.content ul {
margin: 20px 0;
padding-left: 20px;
}
.content li {
margin-bottom: 10px;
position: relative;
}
.content li::marker {
color: #059669;
}
/* サンプルボタン */
.sample-button {
display: block;
margin: 0 auto;
padding: 15px 30px;
font-size: 1.1rem;
color: white;
background: linear-gradient(45deg, #14b8a6, #0d9488);
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
}
.sample-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}うわー！CSSコードってHTMLより複雑そうに見えるね。でも、なんとなく「色」とか「サイズ」とかの単語が見える！
最初は複雑に見えるかもしれないけど、1つ1つは実はシンプルなんだ。今は全部理解しなくても大丈夫。まずは結果を見て「こんなことができるんだ！」と実感してもらおう。詳しい説明は次のレッスンでね。
ステップ9: ファイルを保存する
HTMLファイルとCSSファイルの両方を保存します。
- Ctrl+S（Windows）またはCmd+S（Mac）を押す
- 「File」→「Save All」をクリックして全ファイルを保存
VS Codeの画面で、ファイル名の横の白い丸（未保存マーク）が消えれば保存完了です。
自動保存の設定（オプション）
「ファイル」→「自動保存」を選択すると、ファイルを編集した時点で自動的に保存されます。
これにより、手動で保存する手間が省けます。
ステップ10: ブラウザーで表示してみる
いよいよ作成したCSSが適用されたWebページを表示してみましょう！
- VS Codeで
index.htmlファイルを右クリックします - 「Finderで表示」をクリックします
- Finderで
css-practiceフォルダーが開き、index.htmlファイルが表示されます index.htmlファイルをダブルクリックしてブラウザーで開きます
わあ！すごい！背景に色が付いて、下線が引かれて、ボタンも丸くて可愛い色になってる！
そうだろう！これがCSSの力だよ。同じHTMLでも、CSSがあることで全く違う印象のWebページになったでしょう？この見違える変化を、これから詳しく学んでいこうね。
CSS開発に便利な拡張機能
VS CodeでCSS開発をより快適にする拡張機能を紹介します。
おすすめ拡張機能
1. Live Preview
- 機能: HTMLとCSSをVS Code内でリアルタイムプレビュー
- メリット: コードを変更すると即座に結果が反映される
- CSS特化: スタイルの変更がすぐに確認できるので、効率的にデザインを調整可能
- リンク: Live Preview - Marketplace
2. CSS Peek
- 機能: HTMLファイルからCSSの定義箇所に素早くジャンプ
- メリット:
class="intro"のような箇所で、対応するCSSルールを瞬時に確認 - 効率性: 大きなプロジェクトでも迷子にならずにスタイルを編集可能
- リンク: CSS Peek - Marketplace
3. Auto Rename Tag
- 機能: HTMLタグを変更すると自動で対応するタグも変更
- メリット:
<h1>を<h2>に変更すると</h1>も自動で</h2>になる - 効率性: HTMLとCSSを同時に扱う際のミスを防げる
- リンク: Auto Rename Tag - Marketplace
4. IntelliSense for CSS class names
- 機能: HTMLでclass名を入力する際に、CSSで定義済みのクラス名を自動提案
- メリット: class名の打ち間違いを防ぎ、既存スタイルの再利用が簡単
- 整合性: HTMLとCSSの同期が保たれる
- リンク: IntelliSense for CSS class names - Marketplace
これらの拡張機能を使うと、CSS開発がとても楽しく、効率的になるよ。特にLive PreviewとColor Highlightは、視覚的にスタイルを確認できるから、初心者にはとてもおすすめだね！
リンクをクリックして「Install」をクリック、またはアクティビティバーの「拡張機能」アイコンをクリックして上記の名前で検索すると簡単にインストールできるから、ぜひ試してみてね。
Chromeの開発者ツールでCSS確認
開発者ツールの開き方
Chromeブラウザ上で開発者ツールを開くには、以下の方法があります：
- F12キーを押す
- 右クリック → 「検証」を選択
- Ctrl+Shift+I（Windows）/ Cmd+Option+I（Mac）
CSSデバッグの基本操作
1. 要素の選択
- 開発者ツールの左上にある「要素を選択」アイコン（矢印）をクリック
- ページ上で調べたい要素をクリック
- 画面下部や右側に、その要素のHTMLとCSSが表示される
2. スタイルの確認と編集
- 「Styles」パネルで現在適用されているCSSプロパティを確認
- プロパティの値をダブルクリックして編集（即時反映）
- チェックボックスでプロパティの有効/無効を切り替え
3. 色の編集
- CSSの色指定部分（例: #3BB8C4）をクリック
- カラーピッカーが表示される
- 好きな色をマウスで選択し、即座に反映
開発者ツールでの変更は一時的なものです。永続的に変更するには、VS CodeでCSSファイルを編集する必要があります。
プロジェクト構成のベストプラクティス
おすすめのフォルダー構成
CSSプロジェクトを作る時は、以下のような構成がおすすめです：
my-css-project/
├── index.html # メインページ
├── about.html # その他のページ
├── css/ # CSSファイル専用フォルダー
│ ├── style.css # メインスタイル
│ ├── reset.css # リセットCSS
│ └── responsive.css # レスポンシブ用CSS
├── images/ # 画像フォルダー
│ ├── logo.png
│ └── background.jpg
└── js/ # JavaScriptファイル（後で学習）
└── script.jsファイル名の付け方
CSSファイル名の良い例：
style.css（メインスタイル）layout.css（レイアウト専用）components.css（パーツ専用）responsive.css（レスポンシブ対応）
避けるべき例：
スタイル.css（日本語）my style.css（スペース）Style.CSS（大文字）
CSSファイルも、HTMLと同じく英語の小文字で、単語の区切りにはハイフン（-）を使うのが一般的です。
まとめ
CSSの環境ができて、実際に美しいWebページも作れた！HTMLだけの時とは全然違う印象になってビックリ！
僕も！開発者ツールで色を変えたりできるのも面白かった。CSSってこんなにできることがあるんだね。
素晴らしい！君たちは今、CSS開発の基本的な流れを完全にマスターしたんだ。環境構築から実際のスタイル適用まで、これでプロと同じ開発環境で学習を進められるよ。次回は、今回書いたCSSコードの意味を詳しく解説していくからね。
- 必要なツール: ChromeブラウザーとVS Codeエディターでスタート可能
- ファイル構成: HTMLとCSSファイルを同じフォルダーに配置し、linkタグで連携
- 開発フロー: VS Codeで編集 → ブラウザーで確認 → 開発者ツールでデバッグ
- 便利機能: Live Preview、Color Highlight等の拡張機能で効率化
- ベストプラクティス: 整理されたフォルダー構成と分かりやすいファイル名
次回は、今回作成したCSSコードの構造と基本文法を詳しく学んでいきます。CSSの書き方の基本ルールとセレクターの概念を理解することで、自由自在にスタイルを適用できるようになりましょう！