HTML（エイチティーエムエル）とCSS（シーエスエス）とはHTMLはウェブページの構造と意味を、CSSは見た目を書く言語。「HTMLファイル」は通常、拡張子が.htmlか.htmの文字のファイル、「HTML形式のメール」は太字・色・画像を使える形式【2026年10月版】

2026年10月13日・日本時間時点の情報です。 HTML（エイチティーエムエル）は、ウェブページの構造と意味を書くための言語で、CSS（シーエスエス）は、そのページの見た目を書くための言語です。どちらも文字で書くもので、ブラウザー（ウェブページを表示するソフト）が読み取って画面に出します。「HTMLファイル」は HTML で書かれた文字のファイル（拡張子は .html か .htm がよく使われます）、「HTML形式のメール」は、太字・色・画像などを使える形式のメールのことです。

3行まとめ

1. HTML はウェブコンテンツの意味と構造を定義する言語、CSS は HTML などで書かれた文書の体裁や見栄えを表すスタイルシート言語（MDN・2026年10月13日取得）。
2. 「HTML ファイル」は通常 .htm か .html の拡張子で保存される文字のファイル（MDN）。「HTML 形式のメール」は Outlook の既定の形式で、太字・色・画像を使える（Microsoft のサポート）。
3. 筆者は2026年10月13日2時52分、16行の HTML に CSS 3行を足した前後を、画面を出さない Chromium で撮影した。文字は同じまま、見出しの背景が透明から紺（rgb(0, 0, 128)）に変わった。

HTML とは何か。WHATWG は中核となるマークアップ言語、MDN は意味と構造を定義する言語と書く

HTML は HyperText Markup Language の略です。標準仕様は WHATWG が「HTML Standard」として公開していて、筆者が2026年10月13日2時46分に取得した画面には「Living Standard — Last Updated 12 October 2026」とありました。導入部は HTML をこう書いています。

HTML is the World Wide Web's core markup language.

（訳：HTML は World Wide Web の中核となるマークアップ言語です。）

MDN Web Docs（ウェブ技術の資料サイト）の英語版は、こう書いています。

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

（訳：HTML はウェブのもっとも基本的な構成要素です。ウェブコンテンツの意味と構造を定義します。ウェブページの見た目・表現（CSS）や、機能・振る舞い（JavaScript）の記述には、一般に HTML 以外の技術が使われます。）

HTML は、「ここは見出し」「これは箇条書き」のように文書の部分に意味を付けます。MDN の日本語版によると、「ハイパーテキスト」は別のページへ「接続するリンクを含むテキスト」、「マークアップ」はテキストや画像などを記述する方法、タグは「< および > で囲まれた要素名」です。見出しなら <h1> と </h1> で文字を囲みます。

CSS とは何か。HTML で書いた文書の見た目を決める「スタイルシート言語」

CSS は Cascading Style Sheets の略です。MDN の日本語版は、冒頭でこう書いています。

カスケーディングスタイルシート (Cascading Style Sheets、CSS) はスタイルシート言語であり、HTML や XML（派生言語である SVG、MathML、XHTML などを含む）で記述された文書の体裁や見栄えを表現するために用いられます。

CSS の仕様を作る W3C の CSS ワーキンググループ（CSSWG）も、「CSS Snapshot 2026」の「What is CSS?」に定義を置いています。ただし、筆者が2時54分に取得したこの文書は「Editor’s Draft, 22 June 2026」（編集者の草案）で、状態欄には、議論のための文書でいつでも変わりうること、W3C の承認を意味しないことが書かれています。確定した仕様ではなく、作業中の文書の言葉です。

CSS is a language for writing style sheets, and is designed to describe the rendering of structured documents (such as HTML and XML) on a variety of media. CSS is used to describe the presentation of a source document, and usually does not change the underlying semantics expressed by its document language.

（訳：CSS はスタイルシートを書くための言語で、さまざまなメディア上での構造化された文書（HTML や XML など）の描画を記述するように設計されています。CSS は元の文書の見せ方を記述するために使われ、通常は、その文書の言語が表す意味を変えません。）

「カスケード」は、MDN の用語集によると「ページの外観を変更するためにセレクターをどのように優先づけするかを支配するルール」のことで、ひとつの要素に複数のルールが当たる時に、どれを優先するかを決める仕組みです。

HTML と CSS の違いは何か。仕様にも、構造は HTML、見せ方は CSS と分けて書いてある

HTML の仕様書（WHATWG）も、この分担を書いています。

To influence exactly how such rendering takes place, authors can use a styling language such as CSS.

（訳：こうした描画がどう行われるかを正確に左右するために、作り手は CSS のようなスタイル用の言語を使えます。）

「HTML ファイル」とは何か。HTML で書かれた文字のファイルで、ブラウザーで開くとページとして表示される

MDN の用語集（日本語版）は、こう説明しています。

HTML 文書は、要素によって構造化されたプレーンテキストです。

HTML ファイルは、通常は .htm または .html という拡張子で保存され、ウェブサーバーによって提供され、どのウェブブラウザーでも表示することができます。

プレーンテキストは書式のない文字だけのデータで、HTML ファイルは Word のような専用の形式ではありません。拡張子の一般的な説明は、当サイトの「拡張子とは」に任せます。

MDN がメディアタイプ（ファイルの種類を示す名前）の公式の登録先とする IANA の、「text/html」の登録文書にはこうあります。

Magic number(s) : No sequence of bytes can uniquely identify an HTML document.

（訳：マジックナンバー：HTML 文書を一意に見分けられるバイト列はない。）

マジックナンバーは、ファイルの中身のバイト（データの最小単位）の並びで種類を見分けるための目印のことです。

MDN の「初めてのウェブサイト」は、作ったファイルの確認を「ウェブブラウザー内で index.html ファイルを開いてください。」と書いています。Google Chrome のヘルプによると、パソコン上のファイルを開くのは「Ctrl+O」（Mac は「⌘+o」）を押してファイルを選択、開いたページの HTML ソースコード（HTML の元の文字）を表示するのは「Ctrl+U」（Mac は「⌘+option+u」）です。ほかのブラウザーの操作は、筆者は確かめていません。

HTML ファイルの中には、スクリプトが入ることがある

IANA の同じ登録文書は、セキュリティの項で HTML を「scripted language」（訳：スクリプトを書ける言語）と呼び、こう書いています。

Script can expose the user to potential risks of information leakage, credential leakage, cross-site scripting attacks, cross-site request forgeries, and a host of other problems.

（訳：スクリプトは、情報の漏えい、認証情報の漏えい、クロスサイト・スクリプティング攻撃、クロスサイト・リクエスト・フォージェリ、そのほか多くの問題の危険に、利用者をさらす可能性があります。）

スクリプトは、ページの中で動くプログラムのことです。出どころの分からない .html の添付ファイルは、開く前に送り主を確かめるのが無難です（筆者の提案。IANA の文書が書いているのは、危険がありうるという点までです）。名前と中身が食い違うファイルへの IPA（情報処理推進機構）の注意喚起は、先の拡張子の記事に原文があります。

「.html」という名前なら HTML ファイルなのか。この Mac で file コマンドと種類の表示を比べた（2026年10月13日2時52分）

筆者はこの Mac（macOS 26.6）で4つのファイルを作り、file コマンドと、Spotlight の「種類」の属性（mdls -name kMDItemKind）で調べました。notes.html の中身は「こんにちは。これは拡張子だけ html のふつうの文章です。」の1行だけ、sample-as-text.txt は sample.html を cp で複製して名前だけ .txt にしたものです。file の説明書（man file）は、ファイルシステムの情報、決まった形式のバイト列、ファイルの先頭付近の特定の文字列の3組の検査をこの順に行い、最後の組は「less reliable」（訳：信頼性が低い）と書いています。

file --mime-type では、sample.html と sample-as-text.txt が text/html、notes.html と style.css が text/plain でした。

file は、.txt でも中身が HTML なら HTML と答え、.html でもタグのない文章なら HTML と答えませんでした。mdls の「種類」は、4つとも拡張子どおりの表示でした。この4つの結果からは、「種類」の表示は名前に従っているように見えます。ただし、「種類」の決まり方を書いた Apple の資料も、file が HTML をどの文字列で見分けているかも、筆者は確かめていません。

「HTML 形式のメール」とは何か。Outlook の既定の形式で、太字・色・画像を使える

Microsoft のサポートページ「Outlook でメッセージ形式を HTML、リッチ テキスト形式、またはプレーン テキストに変更する」（2026年10月13日2時48分に取得した日本語版）は、HTML を「これは、新しい Outlook の既定のメッセージ形式です。」と書き、従来の Outlook のタブにも同じく既定の形式と書いています。さまざまなフォント・色・箇条書き・段落番号を使ったメッセージや、メッセージ内に画像を表示する場合に「最適な形式」とも説明しています。テキスト形式については、こう書いています。

この形式は、すべてのメール プログラムで使えますが、太字や斜体のテキスト、色の付いたフォント、その他の書式設定をサポートしていません。また、テキスト形式では、添付ファイルとして画像を含めることができますが、メッセージ内に画像を表示することはできません。

受け取る側の見え方は「受信者のメール プログラムによって異なります」とし、受信側がメッセージを変換する設定なら、HTML 形式で送ったメッセージがテキスト形式に変換されることがある、と書いています。新しい Outlook での切り替えは、メッセージウィンドウで［オプション］を選び、［プレーンテキストに切り替える］を選びます。

Gmail のヘルプ「メッセージの書式を設定する」は、「Gmail のメールのデザインを変更するには、書式設定オプションを使用します。」と書き、「プレーン テキスト モード」をオンまたはオフにする手順を載せています。筆者が2時49分に取得したこのページの文字には「HTML」という語が出てこないため、Gmail の書式設定が Microsoft の言う「HTML 形式」にあたるのかは、このページからは確かめられませんでした。

一番小さな例。16行の HTML に CSS を3行足すと、同じ文字のまま見た目が変わる

筆者が作った sample.html は次のとおりです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>これは、見出しと段落とリストだけの小さなページです。</p>
  <ul>
    <li>見出し（h1）</li>
    <li>段落（p）</li>
    <li>リスト（ul と li）</li>
  </ul>
</body>
</html>

MDN の「初めてのウェブサイト」によると、<!doctype html> は「必須の前置き」、<head> は「ページの閲覧者に向けて表示するためのコンテンツではない」ものの入れ物、<title> はタブに出るタイトル、<body> は表示したいすべてのコンテンツの入れ物です。見出しは h1〜h6 の6段階、リストは ul（順序なし）や ol（順序つき）の中に li を並べます。

CSS は、別のファイル style.css に次の3行を書きました。

body { font-family: sans-serif; max-width: 30em; margin: 2em auto; }
h1 { color: white; background-color: navy; padding: 0.5em; }
li { background-color: lightyellow; margin-bottom: 4px; }

MDN の日本語版は p { color: red; } の例で、p を「セレクター」（スタイルを設定する要素を選ぶもの）、中括弧の中の行を「宣言」、全体を「ルールセット」と呼んでいます。上の3行は、body・h1・li の3つのルールセットです。HTML と CSS をつなぐのは head の中の1行で、MDN は <link href="styles/style.css" rel="stylesheet" /> の形を示しています。

自分で試す手順は、次のとおりです。

1. テキストエディターで sample.html を作って保存する。
2. 保存したファイルをブラウザーで開く（上の Chrome の操作）。見出しと段落とリストが出る。
3. 同じフォルダーに style.css を作って上の3行を書き、sample.html の </head> の直前に <link rel="stylesheet" href="style.css"> の1行を足して保存し、再読み込みする。

筆者は手順3を、sample.html を複製した sample-styled.html で行いました。diff で比べると、違いはこの1行だけでした。

CSS を足す前と後を、この Mac で撮影した結果

筆者は2026年10月13日2時52分、Playwright に同梱の Chromium（バージョン 148.0.7778.96）を画面を出さない設定（headless）で起動し、1280×800 の大きさで2つのファイルを開いて撮影しました。画像は上から300ピクセルを切り出したものです。

同じ時に、ブラウザーが計算した値も読み取りました。

画面に出た文字（見出し、段落、3項目のリスト）は、前後で同じでした（保存した画面テキストを diff で比べました）。変わったのは色・背景・幅です。

CSS を1行も書いていない状態でも、見出しの文字は 32px（CSS ありでも同じ）で、リストには黒丸が付いていました。HTML の仕様書（WHATWG）は、ブラウザー向けの既定の描画ルール（default rendering rules for web browsers）を仕様の末尾に含むと書いています。筆者はこの見た目をその既定のルールによるものと読みますが、32px が仕様のどの規則から来たかまでは確かめていません。

実在するページでも、HTML の中に CSS がある

同じ2時52分に、筆者は https://example.com/ を curl で取得しました。IANA の説明によると、example.com は文書の例示用に管理されているドメインです。応答ヘッダーの content-type は text/html; charset=utf-8 で、1行にまとまった HTML の head の中に <style>…</style> があり、CSS が入っていました（body{font:16px/1.6 system-ui,sans-serif;max-width:26em;margin:auto;…} など）。body の中は段落が1つと、外部のスクリプトを読み込む <script src=/s.js> が1つでした（s.js の中身は、筆者は読んでいません）。

「HTML5」「CSS3」という呼び方は今も使えるのか

MDN の用語集（日本語版）は「"HTML5" という用語は、 HTML Living Standard の一部である現代のウェブ技術を表す単なるバズワードです。」と書いています。CSS については、MDN の日本語版が「CSS3 や CSS4 にはなりません。すべて単なる "CSS" と、バージョン番号を持つ個々の CSS モジュールとなりました。」と書いています。

HTML の仕様書は、2019年に WHATWG と W3C が、今後はこの文書を HTML の単一の版として協力する合意に署名した、と書いています。古い入門書で「HTML5」「CSS3」に出会っても、指しているのは、いま HTML と CSS と呼ばれているものの一部、と読めます。

JavaScript との関係は、ページに動きを付けるプログラミング言語

MDN の「初めてのウェブサイト」は、JavaScript を「ウェブサイトに対話性を追加するプログラミング言語」と書き、CSS については「HTML と同様、CSS はプログラミング言語ではありません。またマークアップ言語でもありません。」と書いています。用語集の CSS の項は、CSS を「HTML と JavaScript と合わせて、核となる 3 つのウェブ技術のうちの 1 つ」と書いています。JavaScript とほかのプログラミング言語の違いは、当サイトの「コーディング（coding）とは」に、筆者が同じ3行のコードを動かした記録と一緒に書いています。

HTML と CSS はどこで学べるか。MDN と web.dev の公式の教材

MDN Web Docs の日本語版「ウェブ開発の学習」は、「まったくの初心者の方（つまり、…コードを書いたこともない方）は、こちらから始めてください。」として「入門モジュール」を置いています。その中の「初めてのウェブサイト」が、HTML・CSS・JavaScript を1本ずつ扱います。同じページは、確認テストのコードを「Play」ボタンから MDN Playground で開いて編集できるとも書いています。

web.dev（About ページの見出しは「Guidance from Chrome Developer Relations」）にも、英語の講座 Learn HTML と Learn CSS があります。Learn HTML は冒頭で、初心者から上級者までの開発者向け（from novice to expert level HTML）の講座と書いています。

文部科学省の高等学校情報科「情報Ⅰ」教員研修用教材（本編）の第2〜4章の PDF も文字にして検索しました。「HTML」は第2章の2か所（タグを喩えに使った説明と、Web サイトは「HTML や CSS など，事前の学習が必要となるものがある。」とする表）だけで、書き方を教える記述は、この範囲では見つかりませんでした。

筆者の提案は、日本語で読める MDN の「初めてのウェブサイト」を読み、本記事のような小さなファイルを自分で一度動かす順です。3本を通して試したわけではないので、提案にとどめます。

AI に資料や画面を作らせるとき、この記事の言葉はどこに出てくるか

ChatGPT や Claude に「単一HTMLファイルで作って」と頼む使い方は、「AIに資料を頼むなら「HTMLで」と言う」にあります（当サイトの運用経験で、外部の統計調査ではないと同記事は断っています）。そこで言う「HTML ファイル」は、この記事の「HTML で書かれた文字のファイル」のことです。配色や角丸などを CSS の変数として渡す書き方は「「AIっぽい見た目」を卒業する」、AI にコードを書かせる道具の全体像は「AIプログラミング 初心者の始め方」にあります。

取得できなかった W3C のページと、確かめていない点

• www.w3.org は読めなかった。2026年10月13日2時46分ごろ、3つの URL（/standards/webdesign/htmlcss、/Style/CSS/、/TR/html/）を画面を出さない Playwright（Chromium と Chrome）で開こうとし（2つは curl でも）、どれも「しばらくお待ちください...」という bot 確認の画面が返り、押さずに諦めました。CSS の定義は drafts.csswg.org の Editor’s Draft から引いています。この文書が「Latest published version」（最新の公開版）とする www.w3.org/TR/css-2026/ は読めていません。
• メールは Outlook と Gmail のヘルプだけを確かめた。Apple の「メール」のユーザガイドは該当ページを見つけられず、Thunderbird なども読んでいません。
• メールの HTML とウェブページの HTML が同じ規格か、メールソフトが CSS をどこまで読むかは、確かめていない。
• 撮影は Chromium 1種類です。Chrome の製品版・Safari・Firefox・Edge で同じ表示になるかは見ていません。
• file コマンドと mdls の結果は、4つのファイルでの観測です。ほかの種類のファイルや、ほかの macOS の版では違うことがあります。
• 文部科学省の教材は、第2〜4章を文字にして検索した範囲です。序章・第1章・ほかの教材・図の中の文字は見ていません。

HTML と CSS の説明を取った場所と時刻（2026年10月13日）

取得は2026年10月13日の2時46分から2時54分（IANA の Example Domains は3時9分）に、curl と、画面を出さない設定のブラウザーで行いました。各ページの取得時刻は出典の一覧に書いてあり、保存した原文と撮影・実行結果は筆者の作業フォルダーに残してあります。