HTMLでページを作れたものの、「見た目が簡素でWebサイトらしくならない」「どのCSSから書けばよいか分からない」と悩んでいませんか。色や装飾を思いつくまま追加すると、かえって読みにくくなることもあります。
Webデザインでは、HTMLで内容と構造を作り、CSSで文字・色・余白・配置を整えるのが基本です。その前に「誰へ何を伝えるページか」を決めると、必要なデザインを選びやすくなります。
この記事では、HTMLとCSSの役割、Webデザインの4原則、色や文字の決め方、シンプルなページを見やすいカードデザインへ変える手順を初心者向けに解説します。完成コードをコピーし、ブラウザで結果を確認してみましょう。
HTMLだけでWebデザインは完成しない
HTMLは、見出し、段落、画像、リンクなどの内容と構造を表す言語です。ブラウザはCSSがない状態でも基本的な見た目を付けますが、これはブラウザの初期スタイルです。
CSSは、HTML要素の文字サイズ、色、背景、余白、枠線、レイアウトなどを指定します。HTMLを正しく書いたうえでCSSを追加すると、内容の意味を保ちながらデザインを変更できます。
| 項目 | HTML | CSS |
|---|---|---|
| 主な役割 | 内容と構造を作る | 見た目と配置を整える |
| 代表的な内容 | 見出し、文章、画像、リンク | 色、文字、余白、横並び |
| 基本ファイル | index.html | style.css |
| 考えること | 内容に合うタグを選ぶ | 読みやすさと一貫性を作る |
最初から派手な装飾を目指す必要はありません。内容の順番をHTMLで整理し、余白と文字の読みやすさからCSSを追加するだけでも、ページの印象は大きく変わります。
CSSの基本構文から練習したい場合は、次の記事でプロフィールカードを作りながら学べます。
デザインを始める前に目的と読者を決める
Webデザインは、単におしゃれに見せるための装飾ではありません。利用者が必要な情報を見つけ、迷わず次の行動へ進めるように、内容を整理して伝える役割があります。
コードを書く前に、次の項目を短い文章で決めておきましょう。
- 誰が読むページか
- その人は何を知りたいか
- ページを読んだ後に何をしてほしいか
- 信頼感、親しみやすさなど、どのような印象を与えたいか
たとえば、HTML初心者向けの学習ページなら、専門用語を減らし、コードと表示結果を近くに置きます。申し込みページなら、サービス内容や料金を確認した後にボタンへ進める順番を作ります。
読者を細かく想像することは役立ちますが、年齢や職業だけで決めつけないことも大切です。「スマートフォンで読む」「前提知識がない」「短時間で手順を確認したい」のように、利用状況や目的まで考えます。
Webデザインの4原則で情報を整理する
見やすいデザインを作るときは、近接・整列・反復・コントラストの4原則が役立ちます。装飾を増やす前に、この4つで情報の関係を整理してみてください。
近接で関連する情報をまとめる
近接とは、関連する要素を近くに置き、異なるグループとの間を広く空けることです。見出しと説明文、画像とキャプションなどを近づけると、同じまとまりだと判断しやすくなります。
CSSではmarginやgapで間隔を調整します。すべての余白を同じにせず、グループの内側を狭く、グループ同士を広くすると関係が伝わります。
整列で位置をそろえる
整列とは、文章や画像の端を共通の線へそろえることです。見えない基準線があるように配置すると、要素が多くても落ち着いて見えます。
本文は左揃えを基本にし、カードの幅や内側の余白もそろえます。FlexboxやGridを使うと、複数の要素を同じ基準へ配置しやすくなります。
反復でルールを統一する
反復とは、色、文字サイズ、余白、角丸などのルールを繰り返すことです。同じ役割のボタンやカードへ同じ見た目を使うと、操作方法も理解しやすくなります。
HTMLへ共通のclassを付け、1つのCSSルールを複数の要素へ適用します。ページごとに似た色を少しずつ変えるより、共通ルールへまとめた方が修正もしやすくなります。
コントラストで重要度を示す
コントラストとは、大きさ、太さ、色などに明確な差を付けることです。見出しを本文より大きくし、主要なボタンへアクセントカラーを使うと、最初に見る場所が分かります。
差が小さすぎると意図が伝わらず、すべてを強調すると優先順位がなくなります。最も重要な要素を決め、強い色や大きな文字を使う場所を絞りましょう。
色・文字・余白を決める基本
色は役割ごとに少数へ絞る
最初は、背景色、文字色、メインカラー、アクセントカラーを決めます。多くの色を同じ強さで使わず、背景と本文は落ち着かせ、ボタンなど重要な場所だけアクセントカラーを使うとまとまります。
| 役割 | 使用例 | 確認すること |
|---|---|---|
| 背景色 | ページ全体やカードの背景 | 長時間見てもまぶしすぎないか |
| 文字色 | 見出しや本文 | 背景との明暗差が十分か |
| メインカラー | 見出し、枠線、アイコン | サイト全体で統一されているか |
| アクセントカラー | 主要なボタンや重要表示 | 使う場所を絞れているか |
淡い文字色はおしゃれに見えても、背景との違いが小さいと読みにくくなります。色だけで状態を伝えず、文字やアイコンも組み合わせてください。
背景色をCSSで指定する方法は、次の記事で確認できます。
文字は読みやすさを優先する
本文の文字は、小さくしすぎず、十分な行間を取ります。装飾的なフォントは見出しなど限定した場所で使い、本文には読み慣れた書体を選ぶのが基本です。
body {
color: #1f2937;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.7;
}system-uiは、利用者のOSで使われる標準的な書体を優先します。本文を固定の小さなpx値へせず、ブラウザの文字サイズ設定も反映しやすいremを使っています。
余白は一定の間隔でそろえる
余白は、要素を離すだけでなく情報のグループを作ります。8px、16px、24px、32pxのように基準を決め、その倍数を使うとページ全体をそろえやすくなります。
カードの内側はpadding、カード同士の間はgap、章と章の間はmarginというように役割を分けると、CSSを読み返しやすくなります。
HTMLとCSSでカードデザインを作る
ここからは、見出し・説明文・リンクだけのHTMLへCSSを追加し、中央配置のカードデザインへ変更します。変更前の状態から順番に見ていきましょう。
変更前のHTMLを用意する
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML/CSSを学ぶ</title>
</head>
<body>
<main class="page">
<article class="card">
<h1>HTML/CSSを学ぶ</h1>
<p>基本から少しずつ練習します。</p>
<a class="button" href="/start/">学習を始める</a>
</article>
</main>
</body>
</html>この状態でも内容は読めますが、ブラウザの初期スタイルで表示されます。背景、カード、余白、ボタンなどはまだ設定されていません。
CSSファイルを読み込む
index.htmlと同じフォルダーへstyle.cssを作ります。HTMLのhead要素内へ、次のlink要素を追加してください。
<link rel="stylesheet" href="style.css">rel="stylesheet"でCSSファイルを読み込むことを示し、href="style.css"でファイルの場所を指定します。CSSが反映されない場合は、ファイル名と保存場所を確認しましょう。
カードへCSSを追加する
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #1f2937;
background: #f3f6fb;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
.page {
display: grid;
min-height: 100svh;
place-items: center;
padding: 24px;
}
.card {
width: min(100%, 560px);
padding: clamp(32px, 7vw, 64px);
text-align: center;
background: #ffffff;
border: 1px solid #dbe4f0;
border-radius: 20px;
box-shadow: 0 20px 50px rgb(15 23 42 / 12%);
}
.card h1 {
margin: 0;
color: #123568;
font-size: clamp(2rem, 7vw, 3rem);
line-height: 1.25;
}
.card p {
margin: 16px 0 32px;
}
.button {
display: inline-block;
padding: 14px 28px;
color: #ffffff;
background: #e84f3d;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
}
.button:hover {
background: #c93f30;
}
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 4px;
}.pageではGridを使ってカードを中央に置き、.cardでは幅、内側の余白、背景、角丸、影を指定しました。幅をmin(100%, 560px)にすることで、狭い画面では親要素に収まり、広い画面でも大きくなりすぎません。
clamp()は、最小値・画面幅に応じた値・最大値をまとめて指定する関数です。画面が狭いときは余白と見出しを小さくし、広いときは上限までゆるやかに大きくします。
変更後の表示を確認する
左側はHTMLだけの表示、右側はCSSを追加した表示です。見出しと説明文の間隔、カードの範囲、主要なリンクが分かりやすくなりました。
ボタンには:hoverだけでなく:focus-visibleも設定しています。マウスを使わずTabキーで移動した場合にも、現在の位置を確認できます。
Webデザインを実装する順番
- ページの目的と読者を決める
- 必要な内容をHTMLで並べる
- 見出しや領域の構造を確認する
- 文字と余白を整える
- 色と枠線で重要度を付ける
- FlexboxやGridで配置する
- スマートフォン幅で確認する
- キーボード操作やコントラストを確認する
この順番なら、デザインが崩れたときも原因を切り分けやすくなります。最初からアニメーションや複雑な装飾を追加せず、読みやすい土台を完成させてから必要な表現を足しましょう。
パソコンで完成した後にスマートフォン対応を考えるのではなく、作業中からブラウザ幅を狭めて確認します。レスポンシブ対応の具体的な手順は次の記事で解説しています。
初心者が避けたいWebデザインの失敗
色やフォントを増やしすぎる
色とフォントが多いと、どこが重要なのか分かりにくくなります。役割ごとのルールを先に決め、例外を増やしすぎないようにしてください。
文字を小さくして情報を詰め込む
画面へ多くの情報を入れるために文字や余白を小さくすると、読む負担が増えます。内容を見出しやリストへ分け、重要でない情報は別ページへ移すことも検討しましょう。
固定幅だけでレイアウトを作る
width: 1200pxのような固定幅だけで作ると、スマートフォンで横へはみ出します。max-width、min()、割合、Gridなどを使い、画面幅が変わっても内容が収まるようにします。
見た目だけでHTMLタグを選ぶ
文字を大きくする目的でh1を増やしたり、移動するリンクをdivだけで作ったりすると、文書の意味や操作方法が伝わりません。HTMLは役割に合うタグを選び、見た目はCSSで変更します。
参考サイトをそのままコピーする
他のサイトを見るときは、色やレイアウトを丸ごと写すのではなく、「ボタンの余白」「カードの整列」「見出しの強弱」のように仕組みを分析します。画像、文章、ロゴ、コードの利用条件も確認してください。
自分のページへ取り入れるときは、目的と内容に合わせて調整し、なぜそのデザインを使うのか説明できる状態を目指します。
HTMLデザインに関するよくある質問
HTMLだけで色や余白を変更できますか？
現在のWeb制作では、色や余白などの見た目はCSSで指定します。HTMLのstyle属性へCSSを書くこともできますが、ページ全体のデザインはstyle.cssへ分けると再利用や修正がしやすくなります。
おしゃれなデザインにする最初の一歩は何ですか？
最初は余白、文字サイズ、色数を整えてください。装飾を増やすより、関連情報を近づけ、端をそろえ、主要なボタンだけを強調する方が見やすくなります。
BootstrapなどのCSSフレームワークは必要ですか？
必須ではありません。フレームワークは部品やレイアウトを効率よく作れますが、先にHTMLとCSSの基本を理解しておくと、既定のデザインを目的に合わせて調整できます。
小さな学習ページは標準のHTML・CSSだけで作り、同じ部品が増えたときにフレームワークやコンポーネント設計を検討するとよいでしょう。
デザインがスマートフォンで崩れる原因は何ですか？
固定幅、大きすぎる画像、長い文字列、横並びのまま切り替えていないことなどが主な原因です。meta viewportを設定し、画像を親要素へ収め、内容が窮屈になる幅でレイアウトを変更してください。
まとめ
HTMLは内容と構造、CSSは色・文字・余白・配置などのデザインを担当します。Webデザインを始めるときは、誰へ何を伝えるかを決め、近接・整列・反復・コントラストで情報を整理しましょう。
まずは記事のカード例をコピーし、色や余白を1か所ずつ変更してブラウザで確認してみてください。読みやすいHTMLとCSSの土台を作った後に、ページの目的へ合う装飾を少しずつ追加するのが完成への近道です。