HTML・CSSの書き方｜初心者向けにファイル作成から表示まで解説

HTMLとCSSを書き始めたいものの、「どのファイルを作るの？」「HTMLとCSSはどこに書けばいい？」と迷っていませんか。

最初は、同じフォルダーにindex.htmlとstyle.cssを作るところから始めれば大丈夫です。HTMLで内容と構造を書き、CSSで色・余白・配置を設定します。

この記事では、必要なツール、ファイルの作り方、HTMLとCSSの基本構文、ブラウザでの確認方法を初心者向けに解説します。完成コードをそのまま入力すれば、パソコンでもスマートフォンでも読みやすいプロフィールカードを作れます。

HTMLとCSSの書き方を最初に整理する
HTMLとCSSを書くために用意するもの
1. 作業用フォルダーと2つのファイルを作る
HTMLの基本的な書き方
1. HTML文書の基本構造を書く
2. class属性でCSSを当てる目印を付ける
CSSの基本的な書き方
1. プロフィールカードのCSSを書く
HTMLへCSSを適用する3つの方法
1. 外部CSSを読み込む方法
2. 内部CSSとインラインCSSの書き方
ブラウザで表示を確認する
HTMLやCSSが反映されないときの確認項目
読みやすく直しやすいコードを書くコツ
HTML・CSSの書き方に関するよくある質問
HTMLとCSSを書いて小さなページを完成させよう

HTMLとCSSの書き方を最初に整理する

HTML文書と外部CSSを組み合わせてパソコンとスマートフォンのWebページを表示する流れ — HTMLで内容と構造を作り、外部CSSで見た目を整えると、ブラウザに完成したページが表示されます

HTMLとCSSは、役割とファイルを分けて書くと理解しやすくなります。まずは次の違いを押さえてください。

項目	HTML	CSS
役割	文章、画像、リンクなどの内容と構造を作る	色、文字サイズ、余白、配置などの見た目を整える
基本ファイル	`index.html`	`style.css`
主な書き方	タグで内容を囲む	セレクターとプロパティで指定する
ブラウザでの確認	`index.html`を開き、保存後に再読み込みする

HTMLは見出しや段落の「意味」を伝え、CSSはその見せ方を担当します。見出しを大きくしたいからh1を選ぶのではなく、ページの主見出しだからh1を使い、大きさはCSSで調整するという考え方です。

HTML・CSSを触るのが初めてなら、全体像を説明した次の記事も先に読むと進めやすくなります。

HTML・CSS入門｜初心者が最初のWebページを作る手順を解説

HTMLとCSSを書くために用意するもの

必要なのは、テキストエディタ、Webブラウザ、作業用フォルダーの3つです。特別な有料ソフトがなくても始められます。

テキストエディタ：HTMLとCSSを入力して保存する
Webブラウザ：作ったページの表示を確認する
作業用フォルダー：HTML、CSS、画像をまとめて保存する

エディタはVisual Studio Codeなど、コードを色分けして表示できるものが便利です。ただし、最初の練習ではOS標準のテキストエディタでも構いません。リッチテキストではなく、必ずプレーンテキストで保存してください。

エディタの選び方と初期設定は、次の記事で詳しく解説しています。

HTML/CSSのコーディングでお勧めなエディタ5選！特徴について詳しく解説

作業用フォルダーと2つのファイルを作る

デスクトップなど分かりやすい場所にprofile-cardフォルダーを作り、その中へ次の2ファイルを保存します。

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

ファイル名は半角英数字で書きます。index.html.txtのように二重の拡張子にならないよう、ファイルの拡張子を表示して確認してください。

HTMLの基本的な書き方

HTMLでは、表示したい内容をタグで囲みます。次の例では、h1要素が主見出し、p要素が段落を表します。

<h1>山田花子のプロフィール</h1>
<p>Web制作を勉強しています。</p>

<h1>が開始タグ、</h1>が終了タグです。開始タグ、内容、終了タグを合わせた全体をHTML要素と呼びます。

タグや属性の意味をまとめて確認したい場合は、次の記事も参考にしてください。

HTMLタグとは？初心者が最初に覚えたいタグ一覧と使い方を解説

HTML文書の基本構造を書く

index.htmlへ、次のコードを最初から最後まで入力します。コピーした場合も、各行の役割を一つずつ確認してみてください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プロフィールカード</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="profile-card">
    <p class="profile-card__label">Profile</p>
    <h1>山田花子</h1>
    <p>Web制作を勉強しています。HTMLとCSSで、読みやすいページを作ることが目標です。</p>
    <a class="profile-card__link" href="mailto:hello@example.com">メールを送る</a>
  </main>
</body>
</html>

コード	役割
`<!doctype html>`	現代のHTML文書であることを宣言する
`<html lang="ja">`	文書全体を囲み、主な言語が日本語だと示す
`<head>`	文字コード、ページタイトル、CSSなどの設定を書く
`meta charset`	文字コードをUTF-8にして文字化けを防ぐ
`meta name="viewport"`	スマートフォンの画面幅に合わせて表示する
`<body>`	ブラウザに表示する内容を書く
`<main>`	そのページの中心となる内容を示す

HTMLは、入れ子の関係が分かるように半角スペース2つで字下げしています。字下げは表示結果へ直接影響しませんが、開始タグと終了タグの対応を見つけやすくなります。

HTMLの基本構文については、MDNの基本的なHTMLの構文でも、要素・属性・文書構造を確認できます。

class属性でCSSを当てる目印を付ける

class属性は、複数の要素へ名前を付けるために使います。CSSでは、クラス名の先頭にピリオドを書いて対象を選びます。

<a class="profile-card__link" href="mailto:hello@example.com">メールを送る</a>

.profile-card__link {
  color: #ffffff;
}

クラス名は自由に付けられますが、役割が分かる英単語を使うと後から読み返しやすくなります。空白を含めず、全角文字も避けると安全です。

CSSの基本的な書き方

CSSは「どの要素へ」「どの見た目を」「どの値で設定するか」を書きます。

h1 {
  color: #0f766e;
  font-size: 2rem;
}

h1：装飾する要素を選ぶセレクター
color、font-size：変更する項目を表すプロパティ
#0f766e、2rem：プロパティへ設定する値

プロパティと値の間にはコロン、指定の末尾にはセミコロンを書きます。複数の指定は波括弧の中へ並べてください。

プロフィールカードのCSSを書く

style.cssへ次のコードを入力します。HTMLファイルを開いた時点では素朴だった表示が、中央寄せのカードへ変わります。

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  color: #1f2937;
  background: #f0fdfa;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.profile-card {
  width: min(100%, 560px);
  padding: clamp(24px, 6vw, 48px);
  border: 1px solid #99f6e4;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgb(15 118 110 / 15%);
}

.profile-card__label {
  margin: 0 0 8px;
  color: #0f766e;
  font-weight: 700;
  letter-spacing: 0.08em;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.2;
}

.profile-card__link {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #ffffff;
  background: #0f766e;
  font-weight: 700;
  text-decoration: none;
}

.profile-card__link:hover,
.profile-card__link:focus-visible {
  background: #115e59;
}

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

width: min(100%, 560px)は、狭い画面では画面幅に収め、広い画面では560pxより大きくしない指定です。clamp()を使った余白と文字サイズも画面幅に応じて変わります。

リンクはマウスを載せた状態だけでなく、キーボード操作でフォーカスした状態も分かるようにしました。見た目を整えるときも、操作できる場所を判別できることが大切です。

HTMLへCSSを適用する3つの方法

HTMLへCSSを適用する方法は3つあります。学習中にどの書き方も見かけますが、通常のWebページ制作では外部CSSが基本です。

方法	書く場所	向いている場面
外部CSS	別の`.css`ファイル	通常のWebサイト制作。複数ページで再利用しやすい
内部CSS	`head`内の`style`要素	1ページだけの小さな確認や、外部ファイルを編集できない場合
インラインCSS	HTML要素の`style`属性	限定的な一時調整。通常の制作では多用しない

外部CSSを読み込む方法

index.htmlのhead要素内にlink要素を書きます。HTMLとCSSが同じフォルダーなら、次のパスで読み込めます。

<link rel="stylesheet" href="style.css">

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

MDNのGetting started with CSSでも、外部・内部・インラインの3つの適用方法が説明されています。

内部CSSとインラインCSSの書き方

内部CSSはhead要素内のstyle要素へ書きます。1つのHTMLファイルだけで試せますが、ページが増えると同じCSSを繰り返すことになります。

<head>
  <style>
    p {
      color: #0f766e;
    }
  </style>
</head>

インラインCSSは、対象の要素へstyle属性を書きます。HTMLとデザイン指定が混ざり、同じ装飾を再利用しにくいため、学習後は外部CSSへまとめてください。

<p style="color: #0f766e;">緑色の文章です。</p>

ブラウザで表示を確認する

2つのファイルを保存したら、index.htmlをダブルクリックしてブラウザで開きます。白いプロフィールカードと緑色のボタンが表示されれば成功です。

コードを変更したときは、次の順番で確認します。

エディタでHTMLまたはCSSを変更する
ファイルを保存する
ブラウザを再読み込みする
パソコン幅とスマートフォン幅の両方で確認する

ブラウザの開発者ツールで画面幅を狭めると、スマートフォンに近い表示を確認できます。横スクロールが出ていないか、文章やボタンが画面からはみ出していないかも見てください。

HTMLやCSSが反映されないときの確認項目

CSSファイルの名前と場所を確認する

href="style.css"と書いた場合、index.htmlとstyle.cssは同じフォルダーに必要です。ファイル名の大文字と小文字、拡張子も一致させます。

CSSをcssフォルダーへ入れた場合は、現在のHTMLファイルから見た場所に合わせてhref="css/style.css"と書きます。

タグ・波括弧・セミコロンの閉じ忘れを確認する

HTMLの終了タグ、CSSの閉じ波括弧}が抜けると、それ以降の解釈が崩れることがあります。エディタの色分けや対応する括弧の強調表示を利用してください。

CSSの最後のセミコロンは1つの指定だけなら動く場合もありますが、指定を追加したときのミスを防ぐため、毎回書く習慣を付けましょう。

class名が一致しているか確認する

HTMLがclass="profile-card"なら、CSSは.profile-cardです。CSS側の先頭にピリオドが必要で、ハイフンやアンダースコアも含めて同じ名前にします。

保存とブラウザの再読み込みを確認する

コードが正しくても、ファイルを保存していなければ表示は変わりません。保存後にブラウザを再読み込みし、それでも変わらない場合はキャッシュを無視した再読み込みも試します。

読みやすく直しやすいコードを書くコツ

HTMLは内容の意味に合う要素を選ぶ
見出しレベルを順番に使い、見た目の大きさはCSSで変える
画像には内容を伝えるalt属性を設定する
CSSは外部ファイルへまとめる
字下げと空行でコードのまとまりを見やすくする
クラス名は役割が分かる言葉にする
変更後は画面幅とキーボード操作も確認する

main、nav、buttonなど、内容や機能に合ったHTML要素を使うと、ブラウザの標準機能や支援技術を活用できます。詳しくはMDNのHTML: A good basis for accessibilityも参考になります。

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

HTMLとCSSはどちらから書きますか？

最初にHTMLで内容と構造を作り、その後にCSSで見た目を整えると進めやすいです。構造が決まる前にCSSを細かく書くと、HTMLの変更に合わせてCSSも直す箇所が増えます。

HTMLとCSSを同じファイルに書いてもよいですか？

短い動作確認ならstyle要素へ書けます。ただし、通常のWebサイトではHTMLとCSSを別ファイルにすると、複数ページで再利用しやすく、修正箇所も探しやすくなります。

コードは暗記する必要がありますか？

すべてを暗記する必要はありません。基本構文と調べ方を理解し、実際に入力・保存・確認する作業を繰り返すと、よく使う書き方から自然に覚えられます。

HTMLとCSSを書いて小さなページを完成させよう

HTMLは内容と構造、CSSは見た目を担当します。同じフォルダーにindex.htmlとstyle.cssを作り、HTMLのhead要素から外部CSSを読み込むのが基本です。

最初から大きなサイトを作る必要はありません。今回のプロフィールカードで文章、色、余白を一つずつ変更し、保存とブラウザ確認を繰り返してみてください。「変更したコード」と「変わった表示」が結び付くと、HTML・CSSの書き方が身に付きます。

次は練習問題でコードを書く回数を増やすと効果的です。

【無料あり】HTMLとCSSの練習に使えるサイト、教材紹介