TOP
SEO
WEB制作初心者のためのCSSの書き方
WEB制作初心者のためのCSSの書き方
2025.10.08
こんにちは、Aoshiです。 前回の記事では、HTMLの基本タグを使ってプロフィールページを作り、 そこにクラス名を付けて整理するところまで進みました。 今回はその次のステップ、CSSで実際にデザインをつけていく方法を紹介します。
はじめに
こんにちは、Aoshiです。
前回の記事では、HTMLの基本タグを使ってプロフィールページを作り、
そこにクラス名を付けて整理するところまで進みました。
今回はその次のステップ、CSSで実際にデザインをつけていく方法を紹介します。
私は最初、HTMLで形を作ったものの「文字の大きさを変えたい」「写真を中央にしたい」と思っても、
どこをどう書けばいいのか全然分からずに苦戦していました。
でも、クラス名をうまく使ってCSSで見た目を整える方法を覚えると、
色がついたり、文字の大きさや余白を少し変えたりするだけで、
同じページがまるで別物のように見違えるようになります。
サイト作りが一気に楽しくなりました。
この記事では、そんな自分の経験も踏まえて、
初心者が最初に覚えておくと便利なCSSの基本をまとめます。
前回つけたクラス名を使いながら、プロフィールページを完成させていきましょう！
CSSとは？
CSSは、HTMLで作った骨組みに“デザイン”を与えるための言語です。
「このクラスの文字を大きく」
「この画像を中央に」
「このボタンの色を青に」
といった見た目の指定をまとめて行うことができます。
HTMLが「文章の構造」なら、CSSは「その見た目」を作る役割です。
フォルダ構成（おさらい＋CSS追加）
HTML記事のprofileフォルダをベースに、「css」フォルダを追加します。
その中に以下の2つのファイルを用意します👇
project-folder/
├── index.html
├── img/
│ └── myphoto.png
└── css/
├── reset.css ← リセット用
└── style.css ← デザイン用
💬 説明：
- reset.css → 各ブラウザの余白や文字サイズの違いをリセットするファイル。
- style.css → 文字の大きさや色、余白などを指定してデザインを整えるファイル。
reset.css（簡易版）
今回は詳しくは書きませんが、他のサイトでも一度見ておくと良いです！
reset.css は「ブラウザごとの見た目の差をなくす」ための設定で、
Web制作ではほぼ必ず使われる基本ファイルです。
まずはコピペで大丈夫です！
HTML（完成形）
💡 Live Server を入れておこう
CSSを書き始める前に、VS Code に「Live Server」拡張機能を入れておきましょう。
これを入れると、右下の 「Go Live」ボタンを押すだけでブラウザが自動的に開き、
保存するたびにページが即座に更新されます。
CSS を学ぶときは、Go Live で動きを見ながら少しずつ調整するのがおすすめです。
style.css（基本デザイン）
💡CSSの基本の書き方
CSSは以下の形で書きます👇
セレクタ（対象） {
プロパティ: 値;
}
たとえば「文字のサイズを28pxにしたい」なら：
h1 {
font-size: 28px;
}
この {} の中でスタイル（デザイン）の指示を出していきます。
CSSを当てる前の状態
🧱 1. body（ページ全体の設定）
💬 解説：
- font-family：文字の種類（今回はシンプルなサンセリフ体）
- color：文字の色（全体を暗めのグレーに統一）
- display: grid;：ページ全体を中央揃えにするための指定
- place-items: center;：上下・左右中央に配置
- padding: 40px 20px;：上下40px、左右20pxの余白をつける
🏷️ 2. .profile__title（タイトル部分）
💬 解説：
- font-size：文字の大きさ（28pxに設定）
- margin-bottom：下に20pxの余白をつける
- text-align: center;：文字を中央に寄せる
🖼️ 3. .profile__img（写真部分）
💬 解説：
- width: 200px; → 画像の幅を200pxに固定
- border-radius: 50%; → 丸い形にする（正方形＋50%で円形になる）
- margin: 0 auto 20px; → 上下0、左右自動で中央揃え、下に20pxの余白
✏️ 4. .profile__text（自己紹介文）
💬 解説：
- text-align: center; → 中央揃え
- line-height: 1.8; → 行間を広くして読みやすく
- margin-bottom: 20px; → 下に余白
🔗 5. .profile__link（リンクボタン）
💬 解説：
- display: inline-block; → ボタンのように幅と高さを持たせる
- background: #1da1f2; → 背景色をTwitterブルーに
- color: #fff; → 文字色を白に
- padding: 10px 20px; → 内側に余白（上下10px、左右20px）
- border-radius: 6px; → 角を少し丸くして柔らかい印象に
補足：VS Codeで入れておくと便利な拡張機能
- Live Server：保存すると自動でブラウザ更新
- Prettier：コードを整形して見やすくする
- Auto Rename Tag：タグ変更時に閉じタグも自動変更
7️⃣ まとめ
ここまでで、HTMLで作ったページにCSSでデザインを加える流れを体験できました。
reset.cssでブラウザの違いをリセットし、style.cssで色や文字の大きさ、余白などを整えることで、
同じHTMLでも見た目がまるで別のページのように生まれ変わります。
CSSは最初こそ専門用語が多くて難しく感じますが、
「どの部分を変えたいのか」を考えながら少しずつ書いていくうちに、
思いどおりのデザインを作れるようになります。
今回のようにクラス名を使って整理しておけば、
デザインを変えたいときも迷わずCSSを操作できるようになります。
まずは小さなページで構いません。
少しずつ余白を調整したり、文字に色をつけたりしながら、
“自分で見た目を作る”楽しさを感じてみてください。
リンクをコピー
2025.10.02 
前の記事
