【CSS入門】コピペで学ぶ！Webデザインの基本プロパティ完全ガイド
はじめに
Webサイトの「見た目」を担当するのがCSS（カスケーディング・スタイル・シート）です。文字の色や大きさ、レイアウト、アニメーションなど、ユーザーが目にする部分のデザインは全てCSSによって作られています。
このガイドでは、Web制作の初心者の方がまず覚えるべき、最も重要で基本的なCSSプロパティを目的別に整理して紹介します。各項目には、さらに詳しい解説とコピペしてすぐに使えるコードへのリンクを用意しています。まずはこの記事で全体像を掴み、気になった部分から詳細ページで学んでいきましょう。
HTML側のタグやclassの付け方がまだ不安な場合は、先に HTMLタグの基本ガイド を確認してからCSSを当てると、どこに何を書けばよいか迷いにくくなります。
確認日とこのページの使い方
確認日: 2026年5月19日。このページは、CSSプロパティを探すだけでなく、AIが出したCSSをどこに貼るか、反映されない時に何を確認するかを整理する入口です。
CSSは、HTMLに直接書く、ページ内の<style>に書く、外部CSSファイルへ書く、という複数の置き場所があります。既存サイトでは、まず今読み込まれているCSSファイルと、変更したいHTMLのclass名を確認してから貼り付けます。
このページで整理できること
- 文字、余白、横並び、背景、ボタンなどの基本CSSを目的別に探す
- CSSをどこに貼るか、既存CSSとの関係を確認する
- CSSが反映されない時に、セレクタ、読み込み先、キャッシュ、アップロード先を分ける
- AIにCSS修正を相談する時に、HTMLとCSSの必要部分だけを整理する
最初にどこを直したい？CSSの目的別ルート
CSSはプロパティ名を暗記するより、「何を直したいか」から記事を選ぶほうが早く身につきます。
- 文字を読みやすくしたい：文字色・中央寄せ・セレクタの基本、太字や文字サイズの指定
- 余白や横並びを整えたい：レイアウトと余白の基本、スクロールボックス
- ボタンやカードを作りたい：ボタンデザイン、背景・枠線・カード装飾
- サイト全体を管理しやすくしたい：CSS変数、共通フォント、テーマ設定
- 表示・非表示を切り替えたい：displayやレイアウトの基本
CSSを書いたのに反映されない時の先チェック
CSS初心者がつまずきやすいのは、書き方そのものより「セレクタがHTMLと合っていない」「保存先や読み込み先が違う」「ブラウザやサーバーのキャッシュが残っている」というパターンです。
.buttonならHTML側にclass="button"があるか確認する#mainならHTML側にid="main"があるか確認する- 公開後だけ変わらない場合は、CSSが反映されない時の原因と直し方でキャッシュとアップロード先を確認する
CSSをどこに貼るか、既存CSSとの関係を見る
コピペ用CSSを使う前に、いまのページがどのCSSを読んでいるかを確認します。既存サイトでは、同じセレクタが別の場所に書かれていて、後から読み込まれたCSSに上書きされることがあります。
| 貼る場所 | 向いている場面 | 注意点 |
|---|---|---|
HTML内のstyle="" |
1か所だけ試す、原因切り分けをする | 増えすぎると管理しにくく、全体デザインから外れやすい |
ページ内の<style> |
そのページだけに効かせたい | 共通パーツには効かせすぎないようにする |
| 外部CSSファイル | サイト全体で使い回したい | 読み込み順、キャッシュ、アップロード先を確認する |
| 既存クラスへ追記 | 今あるデザインに合わせたい | 別ページにも影響する可能性がある |
目次
- 1. まずは知っておきたい！CSSの基本ルール
- 2. テキストの見た目を整える（タイポグラフィ）
- 3. 余白を制する者はレイアウトを制す（ボックスモデル）
- 4. 要素を自在に配置する（レイアウト）
- 5. サイトの印象を決める色と背景
- 6. ユーザーを惹きつける装飾と動き
- 7. もう一歩進んだCSSテクニック
1. まずは知っておきたい！CSSの基本ルール
CSSは「どの要素に」「どんなスタイルを」適用するかを指定するのが基本です。そのためのルールをいくつか見ていきましょう。
セレクタ (class / id / タグ)
スタイルを適用するHTML要素を指定する方法です。classは汎用的に、idは特定の唯一の要素に、pのようなタグセレクタは全ての段落に、といった使い分けが基本です。
CSSが効かない時は、まずセレクタとHTMLの対応を確認します。HTML側の構造から復習したい場合は、HTMLタグの基本も合わせて見てください。
2. テキストの見た目を整える（タイポグラフィ）
Webサイトの印象は文字の見た目で大きく変わります。読みやすく、魅力的なテキスト表現の基本です。
文字の間隔 (letter-spacing)
文字同士の間隔（字間）を調整します。見出しなどで少し広げるだけで、洗練された印象を与えられます。
テキストの中央揃え (text-align)
テキストやインライン要素を、親要素の中で水平方向に中央揃えにします。
3. 余白を制する者はレイアウトを制す（ボックスモデル）
全てのHTML要素は「ボックス」として扱われ、その周りの余白を調整することがレイアウトの基本となります。
枠線 (border)
ボックスの周りに枠線を引きます。実線（solid）や点線（dotted）など、様々なスタイルを表現できます。
内側と外側の余白 (padding / margin)
paddingはボックスの内側の余白、marginはボックスの外側の余白を調整します。これらを使いこなすことが美しいレイアウトの鍵です。
4. 要素を自在に配置する（レイアウト）
要素を縦に積むだけでなく、横に並べたり、回り込ませたりする技術です。
横並びの基本 (display: flex)
現代のWebレイアウトで最も強力で主流な手法です。親要素に指定するだけで、子要素を簡単に横並びにできます。
高さと幅の制御 (width / height)
ボックスのサイズを指定します。`width: 100%`のように親要素に対する割合で指定するのがレスポンシブデザインの基本です。
要素の非表示 (display: none)
要素を画面上から完全に非表示にします。レイアウトからも消えるため、その要素が存在しなかったかのように振る舞います。
5. サイトの印象を決める色と背景
色と背景はサイト全体の雰囲気を決定づける重要な要素です。
グラデーション (linear-gradient)
背景に滑らかな色の変化（グラデーション）を作り出します。単色よりも深みのあるモダンなデザインを表現できます。
6. ユーザーを惹きつける装飾と動き
インタラクティブで魅力的なサイトを作るためのテクニックです。
マウスホバー時の効果 (:hover)
マウスカーソルが要素の上に乗ったときにスタイルを変化させ、視覚的なフィードバックを与えます。
アニメーション (@keyframes)
要素に動きを加えるための強力な機能です。点滅させたり、フェードイン、スライドインさせるといった多彩な表現が可能です。
7. もう一歩進んだCSSテクニック
基本を覚えたら、より効率的で管理しやすいコードを書くためのテクニックも学びましょう。
CSS変数 (:root)
サイトのテーマカラーなどを「変数」として定義し、様々な場所で使い回すことで、メンテナンス性を劇的に向上させます。
スクロール表示 (overflow)
要素の高さを固定し、内容が溢れた部分をスクロールバー付きで表示させます。
フォームのデザイン
入力欄のフォーカス時のスタイルや、ラジオボタン等のカスタマイズは、フォームの使いやすさを向上させる上で重要です。
おわりに
今回はCSSの基本的なプロパティを目的別に整理してご紹介しました。一つ一つの機能はシンプルですが、これらを組み合わせることでデザインの可能性は無限に広がります。
まずはこのまとめ記事を参考に、気になるテクニックから試してみてください。そして、個別の解説ページでコードをコピー＆ペーストして、実際に動かしながらCSSの楽しさを体験していただければ幸いです。
次に読むとつながる記事
- HTMLタグの基本：CSSを当てる対象のHTMLを確認する
- CSSレイアウトと余白の基本：横並び、幅、高さ、余白をまとめて確認する
- CSSボタンデザイン：角丸、影、ホバー、無効化を実例で確認する
- CSS変数とサイト全体設定：色や余白を使い回して管理しやすくする
- CSSが反映されない時の原因と直し方：公開後に見た目が変わらない時の確認手順
公開後にCSSが変わらない時
ロリポップなどへFTPアップロードした後にCSSだけ反映されない場合は、書き方だけでなくキャッシュやアップロード先も確認します。詳しくは CSSが反映されない時の原因と直し方 を参照してください。
CSSが反映されない時の確認順
CSSが効かない時は、書き方を直す前に「どのHTMLに」「どのCSSが」「どの順番で」当たっているかを分けます。
| 順番 | 確認すること | よくある原因 |
|---|---|---|
| 1 | HTML側のclassやidがCSSのセレクタと一致しているか |
スペル違い、.と#の混同 |
| 2 | CSSファイルがページで読み込まれているか | hrefのパス違い、別ファイルを編集している |
| 3 | 同じプロパティが後ろのCSSで上書きされていないか | 共通CSS、ページ別CSS、インラインCSSの優先順位 |
| 4 | ブラウザやサーバーのキャッシュを見ていないか | 古いCSSが残っている、更新日時やクエリが変わっていない |
| 5 | 公開サーバーの正しい場所へアップロードしたか | ローカルだけ更新、別フォルダへアップロード、URL違い |
公開後に変わらない場合は、CSS変更が反映されない時の確認やWeb公開トラブル症状別レスキューも確認してください。
AIにCSS修正を相談する時のメモ
AIにCSSを相談する時は、ページ全体を丸ごと貼るより、変更したいHTML、今のCSS、期待する見た目、実際の見え方を分けると原因を見つけやすくなります。
CSSが反映されない原因を切り分けたいです。
やりたいこと:
対象ページ:
変更したいHTML:
今書いているCSS:
期待する見た目:
実際の見え方:
確認済み:
- class/id名が一致している:
- CSSファイルの読み込みパス:
- どのCSSファイルを編集したか:
- ブラウザキャッシュを更新したか:
- サーバーへアップロードしたか:
- DevToolsで上書きされているCSSがあるか:
伏せる情報:
- FTP/SFTPパスワード
- 管理画面ログイン情報
- 非公開URLの必要以上の情報
- 個人情報を含むHTMLや画像名