サイトアイコン プログラマー(PG)・システムエンジニア(SE)になるための入門講座

HTMLとCSSの違いとは？初心者向けに役割・書き方・使い分けをわかりやすく解説

pgse

HTMLとCSSの違いとは？初心者向けに役割・書き方・使い分けをわかりやすく解説

結論からいうと、HTMLはWebページの構造を作る言語、CSSはWebページの見た目を整える言語です。

HTMLで見出し、文章、画像、リンクなどを配置し、CSSで文字の色、サイズ、余白、レイアウトを指定します。

比較項目 HTML CSS
正式名称 HyperText Markup Language Cascading Style Sheets
主な役割 ページの構造や内容を作る ページのデザインや配置を整える
指定する内容 見出し、本文、画像、リンク、表 色、文字サイズ、余白、位置、背景
単体での利用 内容を表示できる 基本的にHTMLなどの対象が必要
主な拡張子 .html、.htm .css
  1. HTMLとは
  2. CSSとは
    1. CSSで指定できる主な内容
  3. HTMLとCSSの違い
    1. HTMLはページの骨組みを作る
    2. CSSはページの見た目を整える
  4. HTMLとCSSが使われる場面
  5. なぜHTMLとCSSを分けるのか
  6. CSSをHTMLへ適用する3つの方法
    1. 外部CSS
    2. 内部CSS
    3. インラインCSS
  7. 初心者が混乱しやすいポイント
    1. 文字が表示されない原因をCSSだけだと思う
    2. HTMLを変更してもデザインが変わらない
    3. CSSを変更したのに反映されない
    4. 同じ要素に複数のCSSが設定されている
  8. 実際のIT現場での利用例
    1. 社内ポータルの表示崩れ
    2. ボタンが押せない
    3. スマートフォンだけ表示が崩れる
  9. 筆者が現場で経験した失敗例
  10. HTML・CSSでよくあるトラブル
  11. 障害発生時の確認順序
  12. 原因を切り分ける考え方
    1. 1人だけ発生している場合
    2. 複数ユーザーで発生している場合
    3. 社内からだけ発生している場合
    4. ログイン後だけ発生する場合
  13. GUIで確認する方法
    1. HTMLファイルを確認する
    2. ブラウザの開発者ツールを使う
  14. CUIで確認する方法
    1. コマンドプロンプトでファイル内容を確認する
    2. PowerShellでファイル内容を確認する
    3. ファイルの更新日時を確認する
  15. ログの確認方法
    1. イベントビューアーを確認する方法
  16. ブラウザの開発者ツールで見るポイント
    1. Console
    2. Network
  17. 便利なショートカットキー
  18. 初心者がやりがちなミス
  19. 作業時の注意点
  20. 上司へ報告するポイント
  21. エスカレーションするタイミング
  22. HTML・CSSと関連するIT用語
  23. よくある質問
    1. HTMLとCSSはプログラミング言語ですか？
    2. HTMLだけでWebページを作れますか？
    3. CSSだけでWebページを作れますか？
    4. HTMLとCSSはどちらから勉強すべきですか？
    5. CSSを変更しても反映されないのはなぜですか？
    6. HTMLとCSSを編集するソフトは何を使いますか？
  24. まとめ

HTMLとは

HTMLは「HyperText Markup Language」の略で、Webページの内容と構造を作るためのマークアップ言語です。

マークアップ言語とは、文章にタグを付けて「これは見出し」「これは段落」「これは画像」と意味を持たせる記述方法を指します。

HTMLでは、主に次のような要素を配置します。

たとえば、h1タグは大見出し、pタグは段落、aタグはリンクを表します。

<h1>社内システムのお知らせ</h1>

<p>メンテナンス日時をご確認ください。</p>

HTMLだけでもWebページは表示できますが、装飾を指定しなければ、文字や画像がシンプルに並んだ状態になります。

CSSとは

CSSは「Cascading Style Sheets」の略で、HTMLで作成したWebページの見た目を整えるための言語です。

CSSでは、文字の色、背景色、文字サイズ、余白、枠線、配置などを指定できます。

たとえば、見出しの文字を青色にする場合は、次のような指定を行います。

h1 { color: blue; }

この指定では、HTML内のh1タグに対して、文字色を青にする設定を適用しています。

CSSで指定できる主な内容

HTMLとCSSの違い

HTMLはページの骨組みを作る

HTMLは、Webページに何を表示するかを決めます。

見出し、本文、画像、リンクなどを適切なタグで囲み、ページの構造を作る役割があります。

CSSはページの見た目を整える

CSSは、HTMLで作られた要素をどのように見せるかを決めます。

同じHTMLでも、CSSを変更すれば、文字色や配置、画面全体の印象を大きく変えられます。

HTMLは建物の骨組み、CSSは壁紙や家具、照明などの内装と考えると理解しやすいでしょう。

HTMLとCSSが使われる場面

HTMLとCSSは、一般的なWebサイトだけでなく、IT業務のさまざまな場面で利用されています。

社内SEやヘルプデスクでは、Webシステムの表示崩れや文字が見えないといった問い合わせを受けることがあります。

その際、HTMLの問題なのか、CSSの問題なのかを切り分けられると、原因特定が早くなります。

なぜHTMLとCSSを分けるのか

HTMLだけでも文字色や配置を直接指定できますが、現在はHTMLとCSSを分けて管理する方法が一般的です。

役割を分けることで、次のメリットがあります。

たとえば、社内ポータル全体の見出し色を変更するとき、各HTMLファイルを個別に修正するのは効率的ではありません。

共通のCSSファイルを使用していれば、CSSの設定を1か所変更するだけで、複数ページへ反映できます。

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

外部CSS

CSSを別ファイルとして保存し、HTMLから読み込む方法です。

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

複数のページで同じCSSを使えるため、企業サイトや業務システムでは外部CSSがよく利用されます。

実務では、基本的に外部CSSを使用するケースが多いと覚えておきましょう。

内部CSS

HTMLファイル内のstyleタグにCSSを書く方法です。

1つのページだけに設定を適用したい場合や、簡単なテストで使われます。

インラインCSS

HTMLタグのstyle属性へ直接CSSを書く方法です。

<p style=”color: red;”>重要なお知らせ</p>

すぐに変更できる反面、設定が複数箇所へ分散するため、管理しにくくなります。業務システムで多用するのは避けたほうがよいでしょう。

初心者が混乱しやすいポイント

文字が表示されない原因をCSSだけだと思う

文字が見えない場合、CSSで文字色と背景色が同じになっている可能性があります。

ただし、HTML自体に文字が書かれていない、JavaScriptの処理に失敗している、サーバーからデータを取得できていない場合もあります。

見た目の問題に見えても、CSSだけが原因とは限りません。

HTMLを変更してもデザインが変わらない

文字色や余白を変えたい場合は、HTMLではなくCSSを修正する必要があります。

HTMLは内容と構造、CSSは見た目という役割を意識しましょう。

CSSを変更したのに反映されない

CSSを修正しても画面が変わらない場合、ブラウザに古いCSSがキャッシュされていることがあります。

キャッシュとは、一度取得したデータを端末内へ一時保存し、次回の表示を速くする仕組みです。

Windowsでは、Ctrl＋F5を押すと、キャッシュの影響を抑えてページを再読み込みできます。

同じ要素に複数のCSSが設定されている

CSSでは、同じHTML要素に複数の設定が適用されることがあります。

どの設定が優先されるかは、記述場所、セレクタの指定方法、記述順序などによって変わります。

この仕組みが「Cascading」、つまり複数の設定を段階的に適用するというCSSの特徴です。

実際のIT現場での利用例

社内ポータルの表示崩れ

社内ポータルで、メニューが縦に並び、文字サイズも通常より大きくなることがあります。

この場合、HTMLは正常に読み込まれているものの、CSSファイルの読み込みに失敗している可能性があります。

CSSファイルの保存場所、ファイル名、ネットワーク通信、Webサーバーの設定などを確認します。

ボタンが押せない

画面上にボタンが表示されていても、別の透明な要素が上に重なっているとクリックできない場合があります。

CSSの配置設定や重なり順を確認します。ただし、JavaScriptのエラーが原因でボタン処理が動かないケースもあるため、ブラウザの開発者ツールで確認が必要です。

スマートフォンだけ表示が崩れる

パソコンでは正常でも、スマートフォンで文字や画像が画面からはみ出すことがあります。

この場合、CSSのレスポンシブデザイン設定が不足している可能性があります。

レスポンシブデザインとは、画面サイズに合わせて表示方法を変える仕組みです。

筆者が現場で経験した失敗例

Web画面の見出し色を変更する作業で、CSSファイルを修正したにもかかわらず、画面へ反映されなかったことがあります。

原因は、編集したCSSファイルと、実際にHTMLから読み込まれているCSSファイルが別だったことです。

似た名前のファイルが複数あり、確認せずに修正したため、作業時間を無駄にしてしまいました。

それ以降は、HTMLのlinkタグ、ブラウザの開発者ツール、読み込まれているファイルのURLを確認してから修正するようにしています。

ファイル名だけで判断せず、実際にどのCSSが読み込まれているかを確認することが重要です。

HTML・CSSでよくあるトラブル

症状 主な原因 確認ポイント
ページ全体の表示が崩れる CSSファイルを読み込めていない ファイルパス、通信結果、Webサーバー
一部の文字が表示されない 文字色、非表示設定、HTMLの記述不足 CSS設定、HTMLソース
画像が表示されない 画像ファイルのパスが間違っている HTMLのsrc属性、ファイルの存在
修正が反映されない ブラウザキャッシュ、別ファイルを編集 Ctrl＋F5、読み込み先URL
特定端末だけ崩れる ブラウザ差、画面サイズ、キャッシュ ブラウザの種類、拡大率
ボタンをクリックできない 要素の重なり、JavaScriptエラー 開発者ツール、コンソール

障害発生時の確認順序

  1. 影響を受けているユーザーと端末数を確認する
  2. すべてのページで発生するか、特定ページだけか確認する
  3. 別のブラウザでも同じ症状が出るか試す
  4. Ctrl＋F5で再読み込みする
  5. 直前にHTMLやCSSの変更がなかったか確認する
  6. ブラウザの開発者ツールでエラーを確認する
  7. CSS、画像、JavaScriptの読み込み結果を確認する
  8. Webサーバーやアプリケーションのログを確認する
  9. 正常時のファイルと差分を比較する

現場では、いきなりHTMLやCSSを修正するのではなく、最初に影響範囲を確認することが大切です。

原因を切り分ける考え方

1人だけ発生している場合

特定ユーザーだけで発生している場合は、端末側のキャッシュ、ブラウザ設定、拡張機能、画面の拡大率などを確認します。

複数ユーザーで発生している場合

複数の端末で同じ症状が発生している場合、公開中のHTMLやCSS、Webサーバー、ネットワーク側の問題が考えられます。

社内からだけ発生している場合

社内ネットワークだけでCSSや画像が読み込めない場合は、プロキシサーバー、ファイアウォール、DNS、アクセス制限などを確認します。

ログイン後だけ発生する場合

ログイン後の画面だけ崩れる場合、ユーザー権限、アカウントごとの表示設定、アプリケーション処理が関係している可能性があります。

Active Directoryのグループや権限によって表示するメニューを変更しているシステムでは、ユーザー側の所属グループも確認します。

GUIで確認する方法

GUIとは、画面上のボタンやメニューを使って操作する方法です。

HTMLファイルを確認する

  1. 対象のHTMLファイルを右クリックする
  2. 「プログラムから開く」を選択する
  3. メモ帳やVisual Studio Codeを選ぶ
  4. 見出し、画像、リンクなどのタグを確認する

ブラウザの開発者ツールを使う

  1. 対象のWebページを開く
  2. F12キーを押す
  3. 「Elements」または「要素」タブを開く
  4. 確認したい部分を選択する
  5. 適用されているHTMLとCSSを確認する

開発者ツールでは、CSSの設定を一時的に変更して、表示がどう変わるか試せます。

ただし、開発者ツール上の変更はページを再読み込みすると元に戻ります。正式に反映するには、サーバー上のファイルを修正する必要があります。

CUIで確認する方法

CUIとは、コマンドを入力して操作する方法です。Windowsでは、コマンドプロンプトやPowerShellを利用します。

コマンドプロンプトでファイル内容を確認する

type index.html

CSSファイルを確認する場合は、次のように入力します。

type style.css

PowerShellでファイル内容を確認する

Get-Content .\index.html

HTML内でCSSファイルの読み込み部分を検索する場合は、次のように確認できます。

Select-String -Path .\index.html -Pattern “stylesheet”

特定の色指定をCSSから検索する場合は、次のように入力します。

Select-String -Path .\style.css -Pattern “color”

ファイルの更新日時を確認する

Get-Item .\style.css | Select-Object Name, Length, LastWriteTime

更新日時を確認すると、障害発生直前にファイルが変更されていないか判断できます。

ログの確認方法

HTMLやCSSの問題は、Windowsのイベントビューアーに直接記録されない場合も多くあります。

Webシステムでは、次のログを確認します。

イベントビューアーを確認する方法

  1. Windowsキー＋Rを押す
  2. eventvwr.mscと入力する
  3. Enterキーを押す
  4. 「Windowsログ」を開く
  5. 「アプリケーション」を選ぶ
  6. 障害発生時刻付近のエラーや警告を確認する

Webサーバーや業務アプリケーションがWindows上で動作している場合、関連するエラーが記録されていることがあります。

ブラウザの開発者ツールで見るポイント

Console

Consoleには、JavaScriptのエラーや読み込みに関する警告が表示されます。

赤色のエラーがある場合は、エラーメッセージ、ファイル名、行番号を記録してください。

Network

Networkでは、HTML、CSS、画像、JavaScriptなどの通信結果を確認できます。

ステータスコード 意味
200 正常に読み込めている
304 キャッシュを利用している
403 アクセス権限がない
404 指定したファイルが見つからない
500 サーバー側でエラーが発生している

CSSファイルが404になっている場合、HTMLに記述されたファイルパスや、サーバー上の配置場所を確認します。

便利なショートカットキー

操作 ショートカットキー
開発者ツールを開く F12
強制再読み込み Ctrl＋F5
ページのソースを表示 Ctrl＋U
ページ内検索 Ctrl＋F
保存 Ctrl＋S
元に戻す Ctrl＋Z
名前を付けて保存 Ctrl＋Shift＋S

初心者がやりがちなミス

作業時の注意点

HTMLやCSSの変更は、複数ユーザーや複数ページへ影響する可能性があります。

本番環境を変更する場合は、事前にバックアップを取得し、テスト環境で表示を確認してください。

共通CSSを変更すると、対象ページだけでなく、同じCSSを読み込んでいる別のページにも影響します。

修正前には、CSSファイルがどのページから参照されているかを確認することが重要です。

上司へ報告するポイント

「表示がおかしい」だけではなく、「どのページの、どの部分が、どの端末で、いつから崩れているか」を具体的に報告しましょう。

エスカレーションするタイミング

CSSの問題に見えても、Webサーバー、ネットワーク、権限、JavaScript、アプリケーション側が原因の場合があります。判断が難しいときは、確認結果を整理して担当者へ連絡してください。

HTML・CSSと関連するIT用語

用語 概要
JavaScript Webページに動きや処理を追加するプログラミング言語
Webブラウザ HTMLやCSSを読み込み、Webページを表示するソフトウェア
Webサーバー HTML、CSS、画像などをブラウザへ配信するサーバー
セレクタ CSSを適用するHTML要素を指定する部分
プロパティ CSSで色や余白などの設定項目を表す部分
レスポンシブデザイン 画面サイズに合わせて表示を調整する設計方法
キャッシュ 表示を速くするためにデータを一時保存する仕組み
DOM HTMLの構造をプログラムから操作するための仕組み

よくある質問

HTMLとCSSはプログラミング言語ですか？

HTMLはマークアップ言語、CSSはスタイルシート言語に分類されます。一般的な意味では、どちらもプログラミング言語とは区別されます。

HTMLだけでWebページを作れますか？

HTMLだけでも文章、画像、リンクなどを表示できます。ただし、見やすいデザインや柔軟なレイアウトを作るにはCSSが必要です。

CSSだけでWebページを作れますか？

CSSは適用対象となるHTMLなどが必要なため、通常はCSSだけでWebページを作ることはできません。

HTMLとCSSはどちらから勉強すべきですか？

最初にHTMLで見出し、段落、画像、リンクなどの基本構造を学び、その後CSSで色や余白、配置を学ぶと理解しやすいでしょう。

CSSを変更しても反映されないのはなぜですか？

ブラウザキャッシュ、編集ファイルの間違い、CSSの記述ミス、読み込み先の間違いなどが考えられます。Ctrl＋F5と開発者ツールのNetworkを確認してください。

HTMLとCSSを編集するソフトは何を使いますか？

Windowsのメモ帳でも編集できますが、Visual Studio Codeなどのテキストエディターを使うと、タグや設定が色分けされるため確認しやすくなります。

まとめ

HTMLとCSSは、どちらもWebページを作るために重要ですが、役割が異なります。

HTMLはページの内容と構造を作り、CSSは文字色、余白、配置などの見た目を整えます。

Webページの表示トラブルが発生した場合は、HTMLやCSSだけに原因を限定せず、ブラウザキャッシュ、ファイルの読み込み、ネットワーク、Webサーバー、権限、JavaScriptも順番に確認してください。

IT現場では、すぐに修正することよりも、影響範囲、変更履歴、読み込まれているファイル、エラー内容を正確に確認することが評価されます。

モバイルバージョンを終了