HTMLとCSSの違いとは？初心者向けに役割・書き方・使い分けをわかりやすく解説
結論からいうと、HTMLはWebページの構造を作る言語、CSSはWebページの見た目を整える言語です。
HTMLで見出し、文章、画像、リンクなどを配置し、CSSで文字の色、サイズ、余白、レイアウトを指定します。
| 比較項目 | HTML | CSS |
|---|---|---|
| 正式名称 | HyperText Markup Language | Cascading Style Sheets |
| 主な役割 | ページの構造や内容を作る | ページのデザインや配置を整える |
| 指定する内容 | 見出し、本文、画像、リンク、表 | 色、文字サイズ、余白、位置、背景 |
| 単体での利用 | 内容を表示できる | 基本的にHTMLなどの対象が必要 |
| 主な拡張子 | .html、.htm | .css |
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業務のさまざまな場面で利用されています。
- 企業のWebサイト
- 社内ポータルサイト
- 業務システムの操作画面
- FAQサイト
- 社内向けマニュアル
- 監視システムの管理画面
- HTML形式のメール
- エラー画面やメンテナンス画面
社内SEやヘルプデスクでは、Webシステムの表示崩れや文字が見えないといった問い合わせを受けることがあります。
その際、HTMLの問題なのか、CSSの問題なのかを切り分けられると、原因特定が早くなります。
なぜHTMLとCSSを分けるのか
HTMLだけでも文字色や配置を直接指定できますが、現在はHTMLとCSSを分けて管理する方法が一般的です。
役割を分けることで、次のメリットがあります。
- 複数ページのデザインを一括変更できる
- HTMLが読みやすくなる
- 修正する場所を特定しやすい
- 同じデザインを再利用できる
- スマートフォン向けの表示を調整しやすい
- 担当者ごとに作業を分担しやすい
たとえば、社内ポータル全体の見出し色を変更するとき、各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エラー | 開発者ツール、コンソール |
障害発生時の確認順序
- 影響を受けているユーザーと端末数を確認する
- すべてのページで発生するか、特定ページだけか確認する
- 別のブラウザでも同じ症状が出るか試す
- Ctrl＋F5で再読み込みする
- 直前にHTMLやCSSの変更がなかったか確認する
- ブラウザの開発者ツールでエラーを確認する
- CSS、画像、JavaScriptの読み込み結果を確認する
- Webサーバーやアプリケーションのログを確認する
- 正常時のファイルと差分を比較する
現場では、いきなりHTMLやCSSを修正するのではなく、最初に影響範囲を確認することが大切です。
原因を切り分ける考え方
1人だけ発生している場合
特定ユーザーだけで発生している場合は、端末側のキャッシュ、ブラウザ設定、拡張機能、画面の拡大率などを確認します。
複数ユーザーで発生している場合
複数の端末で同じ症状が発生している場合、公開中のHTMLやCSS、Webサーバー、ネットワーク側の問題が考えられます。
社内からだけ発生している場合
社内ネットワークだけでCSSや画像が読み込めない場合は、プロキシサーバー、ファイアウォール、DNS、アクセス制限などを確認します。
ログイン後だけ発生する場合
ログイン後の画面だけ崩れる場合、ユーザー権限、アカウントごとの表示設定、アプリケーション処理が関係している可能性があります。
Active Directoryのグループや権限によって表示するメニューを変更しているシステムでは、ユーザー側の所属グループも確認します。
GUIで確認する方法
GUIとは、画面上のボタンやメニューを使って操作する方法です。
HTMLファイルを確認する
- 対象のHTMLファイルを右クリックする
- 「プログラムから開く」を選択する
- メモ帳やVisual Studio Codeを選ぶ
- 見出し、画像、リンクなどのタグを確認する
ブラウザの開発者ツールを使う
- 対象のWebページを開く
- F12キーを押す
- 「Elements」または「要素」タブを開く
- 確認したい部分を選択する
- 適用されている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システムでは、次のログを確認します。
- Webサーバーのアクセスログ
- Webサーバーのエラーログ
- アプリケーションログ
- ブラウザのコンソール
- ブラウザのネットワーク通信履歴
イベントビューアーを確認する方法
- Windowsキー＋Rを押す
- eventvwr.mscと入力する
- Enterキーを押す
- 「Windowsログ」を開く
- 「アプリケーション」を選ぶ
- 障害発生時刻付近のエラーや警告を確認する
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のセミコロンや波かっこを消してしまう
- 半角記号と全角記号を間違える
- ファイルパスを間違える
- ブラウザキャッシュを確認しない
- 開発者ツール上の変更を保存できたと思い込む
- 複数ページへの影響を確認しない
- 変更内容を記録しない
作業時の注意点
HTMLやCSSの変更は、複数ユーザーや複数ページへ影響する可能性があります。
本番環境を変更する場合は、事前にバックアップを取得し、テスト環境で表示を確認してください。
共通CSSを変更すると、対象ページだけでなく、同じCSSを読み込んでいる別のページにも影響します。
修正前には、CSSファイルがどのページから参照されているかを確認することが重要です。
上司へ報告するポイント
- 障害が発生した日時
- 対象のWebサイトやシステム名
- 影響を受けているユーザー数
- 対象ページのURL
- 発生しているブラウザと端末
- 表示崩れの内容
- 直前の変更作業
- 確認したHTMLとCSSのファイル名
- ブラウザのエラー内容
- 実施した切り分け
- 現在の復旧状況
「表示がおかしい」だけではなく、「どのページの、どの部分が、どの端末で、いつから崩れているか」を具体的に報告しましょう。
エスカレーションするタイミング
- 複数ユーザーに影響している
- 業務システムが利用できない
- 本番環境のファイル変更が必要
- 共通CSSへの変更が必要
- Webサーバーでエラーが発生している
- 原因がJavaScriptやサーバー処理にある
- バックアップや切り戻し手順がない
- 影響範囲を判断できない
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現場では、すぐに修正することよりも、影響範囲、変更履歴、読み込まれているファイル、エラー内容を正確に確認することが評価されます。
コメント