Webページの基礎知識として、今回から「CSS (スタイルシート) 」について勉強します。
はじめに
Webページを作るうえで欠かせないのが「CSS（スタイルシート）」です。
HTMLが「骨組み」だとすれば、CSSは「見た目（デザイン）」を整える役割を担います。
この記事では、CSSの基本から実際の書き方、よく使うプロパティまでをわかりやすく解説します。
CSSとは？
CSS（Cascading Style Sheets）は、Webページの見た目を装飾するための言語です。
例えば以下のようなことができます。
- 文字の色を変える
- フォントサイズを変更する
- 背景色をつける
- レイアウトを整える
HTMLとCSSの関係
例えば、HTMLだけだと、以下のようなシンプルな表示になります。
<h1>タイトル</h1>
<p>本文です</p>これに次の CSS を適用すると…
h1 {
color: blue;
}
p {
font-size: 18px;
}👉 「タイトル」が青色、「本文です」のフォントサイズが 18px と見た目が大きく変わります
CSSの基本構文
CSS の基本構文は以下のとおりです。
セレクタ {
プロパティ: 値;
}
| 用語 | 説明 |
|---|---|
| セレクタ | 対象（ここの例では pタグ） |
| プロパティ | 設定内容（ここの例では color） |
| 値 | 設定値（ここの例では red） |
コード例：
h1 {
color: blue;
}
p {
font-size: 18px;
}CSSの書き方 (3パターン)
CSSの適用方法は主に3つのパターンがあります。
① インラインCSS
HTMLタグの style 属性に直接スタイル (CSS) を書き込む方法です。
<p style="color:red;">テキスト</p>👉 そのタグだけに限定してスタイルを適用できる。すぐ書けるが管理しにくい
② 内部CSS
HTMLファイルの <head> タグ内に <style> タグを記述し、その中にCSSコードを埋め込む方法です。
<style>
p {
color: red;
}
</style>👉 そのページ固有の特別なデザインを適用する場合などに使われる
③ 外部CSS（推奨）
デザインを別ファイル（.css ）にまとめ、HTMLから読み込む方法です。
<link rel="stylesheet" href="style.css">👉 複数のページでデザインを共有・一括管理できるため、一般的なWebサイトではこの方法が主流
よく使うCSSプロパティ
まず覚えるべきプロパティです。
文字関連
p {
color: #333;
font-size: 16px;
font-weight: bold;
}背景
div {
background-color: lightblue;
}余白（超重要）
.box {
margin: 20px;
padding: 10px;
}枠線
.box {
border: 1px solid #000;
}クラスとIDの使い分け
CSSで「特定の要素だけ」にスタイルを適用させることができます。
クラス
<p class="text-red">赤文字</p>.text-red {
color: red;
}👉 何度でも使える
ID
<p id="title">タイトル</p>#title {
font-size: 24px;
}👉 1ページに1回のみ
CSSが効かないときの主な原因
つまずきやすいポイントです。
✔ スペルミス
colr: red; /* NG */❌ color を colr と記述している
✔ 優先順位（重要）
p {
color: blue;
}
.text-red {
color: red;
}👉 classの方が優先される
SWELLでのCSS活用ポイント
このサイトのWordPressテーマ「SWELL」では、以下の場所にCSSを書けます。
追加CSS
外観 → カスタマイズ → 追加CSS
子テーマ
より本格的に管理する場合は子テーマをインストールし、子テーマのCSSにコードを記述します。
カスタムCSS
ページ単独でCSSを適用させたい場合、各ページ内のカスタムCSSにコードを記述します。
よくあるカスタマイズ例
/* 見出しデザイン */
h2 {
border-left: 5px solid #00aaff;
padding-left: 10px;
}
/* ボックス装飾 */
.box {
background: #f5f5f5;
padding: 20px;
}おわりに (まとめ)
CSSはWebデザインの基本であり、必ず習得したいスキルです。
- HTMLは構造、CSSは見た目のカスタマイズ
- 外部CSSが基本
- 本格的にカスタマイズする場合は子テーマのCSSを使用
- レイアウト構築には余白のプロパティが重要
- margin (外側の余白)・padding (内側の余白)
- スペルミス、セレクタや優先順位を間違えないようにする
次回は「CSSセレクタ」について勉強します。
この記事が、少しでも誰かのお役に立てれば幸いです。
当サイトの記事で使用したVBAなどのサンプルをDLできます
この記事のサンプルはありません！
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
