HTML/CSSコーディングを始めたいものの、「何を準備すればよいの？」「HTMLとCSSはどの順番で書くの？」と迷っていませんか？
この記事では、コーディングの意味からファイルの作り方、実際に1ページを完成させる手順、学習の進め方まで初心者向けに解説します。サンプルコードをそのまま試せるので、まずは小さなWebページを1つ作ってみましょう。
HTML/CSSコーディングとはWebページを形にする作業
HTML/CSSコーディングとは、デザインや掲載したい情報を、ブラウザが読み取れるコードへ置き換える作業です。HTMLでページの内容と構造を作り、CSSで色・余白・文字サイズ・配置などの見た目を整えます。
| 技術 | 主な役割 | 例 |
|---|---|---|
| HTML | 内容と構造を作る | 見出し、段落、画像、リンク |
| CSS | 見た目と配置を整える | 色、余白、横並び、画面幅への対応 |
| JavaScript | ページに動きや処理を加える | メニューの開閉、入力内容の確認 |
HTMLとCSSはプログラミング言語ではありません。HTMLはマークアップ言語、CSSはスタイルシート言語ですが、Web制作の現場では両方のコードを書く作業をまとめて「コーディング」と呼ぶことが一般的です。
作業の基本は、設計を確認し、HTMLで構造を作り、CSSで見た目を整え、最後に複数の画面幅で確認する流れです。
HTML/CSSコーディングを始める前に用意するもの
コードエディターとブラウザを用意する
コードを書くアプリをコードエディターと呼びます。初心者には、入力補完やファイル管理の機能があり、Windows・macOS・Linuxで使えるVisual Studio Codeが取り組みやすいでしょう。
書いたページの確認には、普段使っているChrome、Edge、Firefox、Safariなどのブラウザを使えます。最初は、エディターとブラウザを並べて、保存と再読み込みを繰り返すだけで十分です。
作業用フォルダと2つのファイルを作る
パソコンの分かりやすい場所に、練習用のフォルダを1つ作ります。その中へHTMLを書くindex.htmlと、CSSを書くstyle.cssを作成してください。
my-page/
├── index.html
├── style.css
└── images/imagesフォルダは、写真やイラストを使うときに追加します。ファイル名は半角英数字の小文字を基本にし、空白の代わりにハイフンを使うとパスの間違いを減らせます。
HTMLとCSSで1ページをコーディングする手順
ここからは、見出し・説明文・リンクを置いたカードを作ります。変更前のHTMLを確認し、CSSファイルを読み込み、見た目を整える順番で進めます。
変更前のHTMLを書く
index.htmlへ次のコードを書き、保存します。HTMLでは、ページのタイトルをh1、説明をp、リンクをaとして意味に合う要素で組み立てます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTMLとCSSの練習</title>
</head>
<body>
<main class="card">
<h1>はじめてのWebページ</h1>
<p id="about">HTMLとCSSで見た目を整えます。</p>
<a class="button" href="#about">詳しく見る</a>
</main>
</body>
</html>index.htmlをブラウザで開くと、見出し・文章・青い下線付きリンクが表示されます。この時点ではブラウザの初期スタイルなので、内容は読めますがカードのデザインにはなっていません。
HTMLタグの開始タグ・終了タグや属性から確認したい方は、次の記事も参考にしてください。
HTMLからstyle.cssを読み込む
別ファイルのCSSを反映するには、head要素の中へlink要素を追加します。href="style.css"は、同じフォルダにあるstyle.cssを読み込む指定です。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTMLとCSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>CSSが反映されない原因の多くは、ファイル名やパスの違いです。読み込み方を詳しく確認したい場合は、次の記事でフォルダ構成と確認ポイントを解説しています。
style.cssで見た目を整える
次に、style.cssへ次のコードを書きます。CSSでは、装飾したい要素をセレクターで選び、波括弧の中へプロパティと値を書きます。
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 24px;
display: grid;
place-items: center;
color: #172554;
background-color: #eff6ff;
font-family: system-ui, sans-serif;
}
.card {
width: min(100%, 560px);
padding: 48px 32px;
text-align: center;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 16px 40px rgb(30 64 175 / 15%);
}
.card h1 {
margin: 0 0 16px;
font-size: clamp(2rem, 6vw, 3rem);
line-height: 1.2;
}
.card p {
margin: 0 0 24px;
line-height: 1.8;
}
.button {
display: inline-block;
padding: 12px 24px;
color: #ffffff;
background-color: #2563eb;
border-radius: 999px;
text-decoration: none;
}
.button:hover,
.button:focus-visible {
background-color: #1d4ed8;
}たとえば、.cardはclass="card"が付いた要素を選ぶclassセレクターです。背景色、余白、角丸、影をまとめて指定し、カードらしい見た目にしています。
CSSの「どの要素を選び、何を変えるか」という基本から学びたい方は、次の記事もあわせて確認できます。
変更後の表示を確認する
2つのファイルを保存してブラウザを再読み込みすると、ページ中央に白いカードが表示されます。HTMLの内容は同じでも、CSSによって背景色、余白、文字サイズ、ボタンの形が変わることを確認できます。
ウィンドウの幅を狭くしてもカードが画面からはみ出さないか確認してください。width: min(100%, 560px)と左右の余白があるため、パソコンだけでなく幅の狭い画面にも収まりやすくなっています。
実際のHTML/CSSコーディングの進め方
デザインを見てページを区切る
いきなり細かなCSSを書くのではなく、最初にヘッダー、ナビゲーション、メインコンテンツ、フッターなどのまとまりを確認します。見た目の箱だけでなく、「見出しなのか」「主要な内容なのか」という意味も考えることが大切です。
HTMLで内容と構造を先に作る
文章、画像、リンクなど必要な内容をHTMLへ書き、見出しの順序やタグの入れ子を確認します。CSSがない状態でも、情報の順番と意味が伝わる構造を目指しましょう。
CSSで大きな配置から整える
CSSはページ全体の幅や余白、Flexbox・Gridによる配置を先に決め、文字やボタンなど細かな部品へ進むと調整しやすくなります。最初から1px単位の違いにこだわると、全体の組み直しが増えてしまいます。
画面幅と操作方法を変えて確認する
パソコン幅だけで完成とせず、ブラウザの幅を狭くして、文章や画像がはみ出さないかを確認します。キーボードのTabキーでもリンクやボタンを操作し、フォーカス位置が見えるか確かめてください。
崩れや警告を直して仕上げる
最後に、リンク切れ、画像の代替テキスト、見出し順、文字と背景のコントラストを見直します。ブラウザの開発者ツールを使うと、適用中のCSSや要素の幅を確認でき、原因を探しやすくなります。
読みやすく保守しやすいコーディングのポイント
- 見た目ではなく内容の意味に合うHTML要素を使う
- class名は
cardやsite-headerのように役割が分かる名前にする - 同じ装飾を何度も書かず、共通のclassへまとめる
- 固定幅だけに頼らず、狭い画面でも収まる指定にする
- 画像には内容を伝える代替テキストを付ける
- マウスだけでなくキーボードでも操作を確認する
最初から完璧な命名規則を覚える必要はありません。ただし、「あとで自分や別の人が読んでも役割を推測できるか」を意識すると、修正しやすいコードになります。
classの付け方、複数の要素への使い回し、idとの違いは、次の記事でコードを使って解説しています。
HTML/CSSコーディングを学ぶおすすめの順番
初心者は、知識を一度に暗記するより、小さなページを作りながら必要な内容を増やす方が理解しやすくなります。次の順番を目安に進めてください。
- HTMLで見出し、段落、画像、リンク、リストを作る
- CSSで色、文字、余白、枠線を変える
- classを使って必要な要素だけを装飾する
- FlexboxとGridで要素を並べる
- 画面幅に応じてレイアウトを変える
- 見本を見ながら1ページを最後まで作る
教材を読むだけでなく、コードを少し変えて結果を予想する練習が効果的です。たとえば、余白を16pxから32pxへ変え、どこが広がるかをブラウザで確かめます。
無料で試せる教材や練習サイトを探している方は、次の記事も参考にしてください。
HTML/CSSコーディングでつまずいたときの確認点
CSSが反映されない
style.cssを保存したか、link要素のファイル名と実際の名前が一致しているかを確認します。HTMLのclass名とCSSのセレクターが同じか、classセレクターの先頭にピリオドがあるかも見直してください。
レイアウトが思った位置に並ばない
要素の幅だけでなく、padding、border、marginも配置に影響します。まずは開発者ツールで要素の範囲を確認し、親要素と子要素のどちらに指定しているかを整理しましょう。
何から書けばよいか分からない
ページ全体を一度に完成させようとせず、見出しと段落だけのHTMLから始めます。表示できたら背景色を変え、次に余白を加えるというように、変更を1つずつ確認すると原因を見失いません。
HTML/CSSコーディングでよくある疑問
コーディングとプログラミングは同じですか？
どちらもコードを書く作業ですが、Web制作では使い分けられることがあります。HTML/CSSでページの構造と見た目を作る作業をコーディング、JavaScriptやPHPなどで処理を作る作業をプログラミングと呼ぶ場合が多いです。
HTMLとCSSだけでWebサイトを作れますか？
情報を掲載する静的なWebサイトであれば、HTMLとCSSだけでも作れます。メニューの開閉や入力内容に応じた変化など、操作に反応する機能が必要になったらJavaScriptを追加します。
最初からデザインどおりに作れなくても大丈夫ですか？
問題ありません。最初はHTMLで正しい順番に内容を並べ、次に大きな配置、最後に色や細かな余白を合わせると進めやすくなります。
スマートフォンだけでも学べますか？
ブラウザ上の学習サービスならスマートフォンでも基礎を試せます。ただし、複数ファイルの管理や画面幅の確認を行う実践的なコーディングでは、パソコンの方が作業しやすいでしょう。
まとめ
HTML/CSSコーディングでは、HTMLで内容と構造を作り、CSSで見た目を整えます。コードエディター、ブラウザ、index.html、style.cssがあれば、初心者でもすぐに練習を始められます。
最初から大きなサイトを作ろうとせず、この記事のカードのような小さなページを完成させてください。HTMLを書く、CSSを読み込む、ブラウザで変化を確認するという一連の流れを繰り返すことが、コーディング習得への近道です。