5分でサクッと！HTML/CSSとは？図解でスッキリ！要点を解説！

April 8, 2026May 7, 2026

Webページ制作やWebデザイン学習において、基本知識となるのがHTMLとCSS。

しかし、HTML/CSSを忘れてしまったり、理解できなかったりして、復習したいけど、なかなか時間が取れなくて悩んでいませんか？

悩んでる人

ポイントをおさえて復習したいけど、どれが大事なのか分からない

この記事では、HTMLとCSSの基本から、役割と違いまで、要点に絞って解説します。

この記事で分かること

HTMLとCSSの役割・違い
Webページの基本的な作り方（STEP順）
よく使うHTMLタグとCSSプロパティ一覧
HTML CSSの次のステップ（学習方法）

手っ取り早くHTMLとCSSの概要を振り返りたい方は、ぜひ参考にしてみてください。

この記事を書いた人

システムエンジニア10年目
会社員3年⇒フリーランス7年目
保険系 / 物流系 / 鉄道系 / 小売系などのシステム開発に従事
プログラミングメンター

HTML/CSSの基本

HTMLとCSSは、Webページを作るための基礎。

次の2つがイメージできれば、基本は完璧です！

ポイント

HTML ⇒Webページの骨組み
CSS　⇒Webページのデザイン

HTMLだけでも一応Webページとして表示できます。

ただし、CSSを適用しないと、無骨で読みにくいデザインに。。。

両方をセットで使うことで、おしゃれで見やすいWebページが完成するのです！

おしけん

HTMLは「家の骨組み」、CSSは「内装デザイン」のようなイメージです。骨組みだけではそっけないですが、内装を整えるとグッと見栄えが良くなりますよ！

HTMLとは？Webページの骨組みを作る言語

HTMLは、Webページの骨組みや土台を作るために用意された言語。

見出しや段落、画像の配置など、Webページの骨格にあたる部分をHTMLで記述します。

HTMLの特徴

< >で囲まれた記号を用いて文書の構造や意味を定義できる。
Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略。

おしけん

ちなみに、< >で囲まれた記号のことを「タグ」と呼びます

HTMLを使えば、Webページの段落や見出し構成、テキスト配置や役割を、コンピュータが理解できます。

CSSとは？Webページのデザインを整える言語

CSSは、Webページの見た目を整えるために用意された言語。

CSSを使うことで、見栄えが良くユーザーにとって読みやすいページに仕上がります。

CSSの特徴

HTMLで構成されたWebページのデザインを調整できる。
Cascading Style Sheets（カスケーディングスタイルシート）の略。

次は、HTMLとCSSを使ったWebページ作成について、説明していきます。

HTML/CSSを使ったWebページの作り方

WebページはHTMLとCSSを組み合わせて、次の4ステップで作っていきます。

HTMLファイルを新規作成する
Webページ内容をHTMLで組み立てる
WebページのデザインをCSSで調整する
Webブラウザで完成ページを確認する

STEP1：HTMLファイルを新規作成する

メモアプリやテキストエディタなどを使い、HTMLファイルを新規作成します。

ファイル名は、Index.htmlが一般的です。

HTMLファイルは、Webページの土台となるファイルです。

ファイルの拡張子は「.html」となります。

HTMLファイルを作成したら、まず次のテンプレートを記述します。

HTMLファイルの中身

<!-- HTMLの基本テンプレート -->
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <title>Webページのタイトル</title>
   </head>
   <body>
      <!-- ここにWebページの表示内容を書く -->
   </body>
</html>

おしけん

テンプレートは、HTMLの中でも最低限必要な記述です

STEP2：Webページ内容をHTMLで組み立てる

STEP1で作成したHTMLファイルの内容にブラッシュアップしていきます！

HTMLタグを使って、見出し・文章・画像・リンクなど、ページに表示したい内容を記述していきます。

STEP3：WebページのデザインをCSSで調整する

HTMLで内容をカスタマイズした後、CSSを使って文字の色や大きさ、余白、レイアウトなどを整えます。

実務では、別ファイルstyle.cssに記述するのが一般的です。

CSSを追加することで、見やすく、おしゃれなWebデザインを作ることができます。

CSSのカスタマイズでは、CSSプロパティを使っていきます。

STEP4：Webブラウザで完成ページを確認する

最後に、作成したHTMLファイルをWebブラウザで開いて、表示結果を確認します。

おしけん

Webブラウザで確認しながら、HTMLを書いたり、CSSを調整します

実務では、STEP1からSTEP4を繰り返しながら、Webページ制作を進めていきます。

よく使うHTMLの基本タグ一覧

Webページは、HTMLタグを組み合わせることで作ります。

用途に応じて様々なHTMLタグが用意されています。

Webページは、HTMLタグを組み合わせることで構成されています。

最初は使用頻度が高いHTMLタグを覚えれば十分です。

pタグ：文章の段落を作る

pタグは、Webページで文章のまとまりや段落（paragraph）を作るときに使います。

<p>これは段落のテキストです。</p>
<p>2つ目の段落のテキストです。</p>

brタグ：文章の途中で改行する

brタグは、文章の途中で改行を入れたいときに使うタグです。

<p>1行目のテキストです。<br>2行目のテキストです。</p>

h1～h6タグ：文章の見出しを作る

h1〜h6タグは、Webページの見出しを作るために使います。
数字が小さいほど文字が大きく表示され、h1が最も重要な見出しになります。

<h1>大見出し（ページタイトル）</h1>
<h2>中見出し（セクションタイトル）</h2>
<h3>小見出し（サブセクション）</h3>

imgタグ：画像を挿入する

imgタグは、Webページに画像を挿入するときに使います。
src属性に画像ファイルのパスを指定します。

<img src="images/photo.jpg" alt="写真の説明">

悩んでる人

alt属性ってなんのためにあるの？

おしけん

alt属性は画像の代替テキストです。画像が読み込めなかったときに表示される説明文で、SEO対策にも効果的なので必ず記述する習慣をつけましょう！

よく使うCSSの基本プロパティ一覧

Webページは、CSSを使うことで、おしゃれで綺麗なデザインにすることができます。

CSSでは、調整したい項目をプロパティという形で指定し、様々なプロパティが用意されています。

CSSプロパティ	概要	使用例
`color`	文字色を指定する	`color: #333;`
`font-size`	文字サイズを指定する	`font-size: 16px;`
`font-weight`	文字の太さを指定する	`font-weight: bold;`
`text-decoration`	文字に下線・打ち消し線などを引く	`text-decoration: underline;`
`text-align`	テキストの水平方向の配置を指定する	`text-align: center;`
`margin`	要素の外側の余白を指定する	`margin: 20px;`
`padding`	要素の内側の余白を指定する	`padding: 10px 20px;`
`background`	背景色・背景画像を指定する	`background: #f5f5f5;`

それぞれのCSSプロパティの使い方を説明していきます。

color：文字色を指定する

colorプロパティを使うことで、文字の色を自由に変更できます。

h1 {
  color: #2563eb;   /* HEXカラーコードで指定 */
}

p {
  color: rgb(75, 85, 99);  /* RGB値で指定 */
}

font-weight：文字の太さを指定する

font-weightプロパティを使うことで、文字を太くしたり細くしたりできます。

p {
  font-weight: bold;   /* 太い文字 */
}

.thin {
  font-weight: 300;   /* 細い文字：ピクセル指定可 */
}

text-decoration：文字に装飾を付ける

text-decorationプロパティで、下線・打ち消し線などの装飾を文字に付けられます。

a {
  text-decoration: none;       /* リンクの下線を消す */
}

.deleted {
  text-decoration: line-through; /* 打ち消し線 */
}

text-align：テキスト配置を指定する

text-alignプロパティで、テキストの水平方向の位置を調整できます。

.title {
  text-align: center;  /* 中央揃え */
}
.body-text {
  text-align: left;    /* 左揃え（デフォルト） */
}

HTML CSSを学んだ次のステップ

HTML CSSをひと通り学んだ後は、次のステップに進むことで実践的なスキルが身につきます。

Flexboxでレイアウトを作れるようにする

Flexboxは横並びのレイアウトを簡単に組むためのCSSの機能です。

モダンなWebサイトのほとんどでFlexboxが使われており、習得必須のスキルといえます。

レスポンシブデザイン（スマホ対応）を学ぶ

スマートフォンやタブレットで綺麗に表示するためのレスポンシブデザインは、現代のWeb制作では必須です。

メディアクエリというCSSの機能を使って、画面サイズごとのデザインを切り替えできます。

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 16px;
  }
}

おしけん

@mediaがレスポンシブ対応させるのに、めちゃくちゃ重要です

JavaScriptを組み合わせてインタラクティブにする

HTML CSSだけでは作れない動きのあるWebページを作るには、JavaScriptが必要です。

メニューの開閉やスライダーなど、ユーザーのアクションに反応する機能を追加できます。

まとめ

この記事では、HTML CSSの基本から、Webページの作り方、よく使うタグ・プロパティまで解説しました。

最後に今回のおさらいをしておきましょう！

HTMLはWebページの骨組み（構造）を作るための言語
CSSはWebページのデザイン（見た目）を整えるための言語
Webページ制作は HTML記述 → CSS調整 → ブラウザ確認 の繰り返し
よく使うHTMLタグは p・h1-6・img・a・div・ul/li
よく使うCSSプロパティは color・font-size・margin・padding・display
次のステップは Flexbox・レスポンシブデザイン・JavaScript

HTML CSSの概要を大まかにイメージできていれば、自転車の乗り方のように、時間が経っても体に染み込んでいきます。

まずは実際に手を動かして、小さなWebページを1つ作ってみることが上達への一番の近道です。

皆さんのWeb制作ライフが充実したものになることを願っています。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！