WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

CSSの書き方を実例で練習｜外部ファイルの作成・パス・反映確認まで解説

HTMLとCSSを別ファイルに書き、ブラウザのカードデザインへ反映する制作画面

CSSの基本文法を知っても、「ファイルはどこに作るの？」「HTMLとどうやってつなぐの？」というところで手が止まることがありますよね。

CSSは、セレクター・プロパティ・値の3つを使って書きます。実際のWeb制作では、HTMLとCSSを別ファイルに分け、HTMLのlink要素からCSSファイルを読み込む方法が基本です。

この記事では、作業用フォルダーの準備から、外部CSSファイルの作成、HTMLへの読み込み、カードデザインの完成、反映されないときの確認までを実践形式で解説します。

CSSの書き方は3つの部分で覚える

まず、CSSの最小単位を確認しましょう。次のコードは、titleというclassを持つHTML要素の文字色を青へ変更します。

.title {
  color: #2563eb;
}
部分名前役割
.titleセレクター変更するHTML要素を選ぶ
colorプロパティ変更する項目を決める
#2563eb値変更後の状態を決める

セレクターの後ろを波括弧{ }で囲み、その中へ「プロパティ: 値;」を書きます。コロンとセミコロンは半角で入力してください。

classセレクターは先頭にピリオドを付ける

HTMLのclass属性をCSSから選ぶときは、class名の前にピリオドを付けます。

<h1 class="title">CSSの練習</h1>
.title {
  color: #2563eb;
}

HTMLではclass="title"、CSSでは.titleです。ピリオドはCSS側だけに書きます。

複数の指定は1行ずつ書く

1つの要素へ複数のデザインを設定できます。読みやすくするため、基本は1つの指定を1行に分け、同じ位置へ字下げします。

.title {
  margin-bottom: 1rem;
  color: #2563eb;
  font-size: 2rem;
  line-height: 1.4;
}

セミコロンを書き忘れると、その後ろの指定まで反映されないことがあります。最後の行にもセミコロンを付ける習慣にすると、行を追加したときのミスを減らせます。

セレクターや3つの適用方法を先に詳しく復習したい場合は、次の記事も参考にしてください。

CSSの書き方を初心者向けに解説｜基本構文から実践手順まで

外部CSSファイルを作る手順

ここから、1枚の紹介カードを作ります。HTMLとCSSを分けて書き、ブラウザで変更前と変更後を確認しましょう。

作業用フォルダーを準備する

css-cardというフォルダーを作り、次の構成でファイルを用意します。CSSだけをまとめるため、cssフォルダーを1つ作ります。

css-card/
├── index.html
└── css/
    └── style.css

ファイルの拡張子が.htmlと.cssになっているか確認します。テキストエディターによっては、自動で.txtが付くことがあるので注意してください。

変更前のHTMLを書く

index.htmlへ次のコードを書きます。まだCSSを読み込まず、HTMLだけの表示を先に確認します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSカード練習</title>
</head>
<body>
  <main class="card">
    <p class="card__label">入門</p>
    <h1 class="card__title">CSSの書き方を練習</h1>
    <p class="card__text">外部CSSファイルを読み込み、カードを完成させます。</p>
    <a class="card__link" href="#">学習を始める</a>
  </main>
</body>
</html>

保存したindex.htmlをブラウザで開くと、ラベル、見出し、文章、リンクが上から順に表示されます。この段階を「変更前」として覚えておきましょう。

link要素でstyle.cssを読み込む

style.cssはcssフォルダーの中にあります。index.htmlのhead要素へ、次のlink要素を追加してください。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSカード練習</title>
  <link rel="stylesheet" href="css/style.css">
</head>

rel="stylesheet"は読み込むファイルがスタイルシートであること、hrefはそのファイルまでの場所を示します。

今回のindex.htmlから見ると、同じ場所にcssフォルダーがあり、その中にstyle.cssがあります。そのためhref="css/style.css"と書きます。

style.cssへ基本スタイルを書く

css/style.cssへ次のコードを書きます。最初にページ全体を整え、その後にカード内の部品を指定しています。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 3rem 1rem;
  color: #1e293b;
  background-color: #eff6ff;
  font-family: system-ui, sans-serif;
}

.card {
  width: min(100%, 36rem);
  margin-inline: auto;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgb(30 64 175 / 14%);
}

.card__label {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  color: #1d4ed8;
  background-color: #dbeafe;
  border-radius: 999px;
  font-weight: 700;
}

.card__title {
  margin: 0;
  color: #172554;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.3;
}

.card__text {
  margin: 1rem 0 0;
  line-height: 1.8;
}

.card__link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 0.5rem;
  text-decoration: none;
}

変更後の表示を確認する

2つのファイルを保存してブラウザを再読み込みします。ページに淡い青の背景が付き、白いカードの中へ内容がまとまり、リンクは青いボタンとして表示されれば成功です。

プロジェクト内のHTMLとCSSを接続し、装飾前のページがカードデザインへ変わる流れの図
HTMLのclassとCSSのセレクターを対応させると、ブラウザ上の対象へデザインが適用されます。

図の左はHTMLとCSSのファイル、中央はclassとセレクターの対応、右は装飾前後のブラウザ表示です。CSSが反映されるまでの流れをこの3段階で確認してください。

CSSファイルのパスの書き方

hrefへ書くパスは、HTMLファイルからCSSファイルまでの道順です。ファイルの置き場所が変われば、パスも変わります。

配置フォルダー例hrefの値
HTMLとCSSが同じ場所index.html
style.css		style.css
CSSがcssフォルダー内index.html
css/style.css		css/style.css
HTMLがpagesフォルダー内pages/about.html
css/style.css		../css/style.css

../は、現在のファイルがある場所から1つ上の階層へ戻る記号です。pages/about.htmlから一度上へ戻り、cssフォルダーへ進むため、../css/style.cssとなります。

フォルダー名とファイル名は、大文字・小文字まで一致させましょう。手元の環境では表示できても、公開サーバーで区別されて読み込めなくなる場合があります。

【HTML/CSS】HTMLファイルからCSSを読み込む方法を徹底解説！

保守しやすいCSSの書き方

コードが増えると、見た目が合っているだけでなく、後から探して修正しやすいことが重要になります。初心者のうちから次の書き方を意識しましょう。

class名は役割が分かる英単語にする

.blue-textのように現在の見た目だけをclass名へ入れると、色を赤へ変更したときに名前と表示が合わなくなります。.error-messageや.card__titleのように、要素の役割が分かる名前を付けます。

関連する指定を近くへまとめる

ページ全体、ヘッダー、カード、フォームなど、部品ごとにCSSをまとめます。ファイルが長くなったら、コメントで区切ると目的の場所を探しやすくなります。

/* カード */
.card {
  padding: 2rem;
}

.card__title {
  font-size: 2rem;
}

/* フォーム */
.form-field {
  margin-bottom: 1rem;
}

同じ指定を何度も書かない

複数の部品で同じ見た目を使う場合は、共通のclassを用意できます。変更箇所を1つにまとめると、修正漏れを防げます。

<a class="button button--primary" href="#">保存する</a>
<a class="button button--secondary" href="#">戻る</a>
.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.button--primary {
  color: #ffffff;
  background-color: #2563eb;
}

.button--secondary {
  color: #1e293b;
  background-color: #e2e8f0;
}

CSSは上から順に読み込まれる

同じ強さのセレクターで同じプロパティを指定すると、後に書かれたルールが適用されます。これが「カスケード」の基本です。

.message {
  color: blue;
}

.message {
  color: red;
}

この例では、後に書いたcolor: redが使われます。ただし、セレクターの詳細さ（詳細度）や!importantなども結果へ影響します。

反映されない指定をさらに強いセレクターで上書きし続けると、修正が難しくなります。まず同じプロパティが別の場所にないか、ブラウザの開発者ツールで確認しましょう。

CSSを書く時のルールとは・・・(CSSの書き方について確認したい方向け)

スマートフォンと操作方法にも対応する

CSSを書いたら、パソコンの幅だけで完成と判断しません。画面を狭くし、文字がはみ出さないか、ボタンが押しやすいかを確認します。

.card__link:hover {
  background-color: #1d4ed8;
}

.card__link:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (max-width: 36rem) {
  .card {
    padding: 1.25rem;
  }
}

:hoverは主にマウスを重ねた状態、:focus-visibleはキーボード操作などでフォーカスを表示すべき状態です。色だけでなく輪郭も付けると、現在位置が分かりやすくなります。

@mediaは条件に応じてCSSを切り替える仕組みです。この例では画面幅が36rem以下のとき、カードの内側の余白を少し狭くしています。

CSSが反映されないときの確認順

見た目が変わらない場合は、勘でコードを追加せず、次の順番で確認します。

  1. HTMLとCSSを保存したか
  2. ブラウザを再読み込みしたか
  3. link要素がhead内にあるか
  4. hrefのフォルダー名とファイル名が正しいか
  5. HTMLとCSSのclass名が一致しているか
  6. classセレクターの先頭にピリオドがあるか
  7. 波括弧、コロン、セミコロンが半角で閉じているか
  8. 同じプロパティが後ろで上書きされていないか

1行目から全部を見直すより、「CSSファイルは読み込まれているか」「対象は選べているか」「別の指定に上書きされていないか」の3段階に分けると、原因を早く見つけられます。

CSSの書き方に関するよくある質問

CSSファイル名はstyle.cssでないといけませんか？

別の名前でも問題ありません。main.cssやcommon.cssも使えます。ただし、link要素のhrefと実際のファイル名を一致させてください。

CSSはHTMLの中に書いてもよいですか？

style要素やstyle属性へ書く方法もあります。動作確認には使えますが、通常の制作では外部CSSへ分けると複数ページで共有しやすく、HTMLも読みやすくなります。

idとclassのどちらをCSSに使いますか？

再利用するデザインにはclassを使うのが基本です。idはページ内で一意の識別子として、リンク先やJavaScriptなど別の用途でも使われます。CSSをidへ強く結び付けると上書きしにくくなるため、まずclassを選びましょう。

CSSをすべて暗記する必要はありますか？

すべてを暗記する必要はありません。よく使うプロパティは制作の中で覚え、分からない機能はMDNのCSSリファレンスなどで確認します。目的からプロパティを調べ、実際の画面で試す流れを身に付けましょう。

次は練習問題で書いてみよう

記事を読むだけでは、パスやclass名の小さな間違いに気づく力は身に付きません。今回のカードを一度自分で作ったら、見本を閉じてもう一度書いてみてください。

基礎からレスポンシブ対応まで段階的に試したい場合は、解答付きの練習問題を利用できます。

HTML・CSS練習問題12問｜初級からレスポンシブまで解答付き

まとめ

CSSは「セレクター・プロパティ・値」の順で書きます。実際の制作ではHTMLとCSSを別ファイルに分け、link要素のhrefへCSSファイルまでのパスを書きます。

最初は、同じフォルダーのindex.htmlとcss/style.cssを使い、文字色や余白が反映されるところまで確認しましょう。

書いたコードが反映されないときは、保存、読み込みパス、class名、記号、上書きの順で確認します。原因を1つずつ切り分けられるようになると、CSSを書くスピードも上がります。