ファイルを知る、使いこなす。
.html
HTML
Web・開発HTMLはWebページの文書構造を記述するテキストです。ブラウザーで見る方法と、エディタでソースを編集する方法は別です。ページの見た目にはCSSや画像、動作にはJavaScriptが必要な場合があります。
- 主な用途
- Webページの文書構造
- 中身の種類
- テキスト
目次・よくある質問・根拠資料を見る
内容の最終確認： · 編集：Kai
開き方・操作手順
使っている環境や目的の項目を開いて、手順を確認してください。
操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。
開けないとき：症状から確認
- 画像・装飾がない：相対パスの参照先とCSS・画像の付随フォルダーを確認します。HTMLだけのコピーでは不足することがあります。
- 文字化け：保存時の文字コードとcharset指定を合わせます。UTF-8として誤って上書きする前に元の文字コードを確認します。
- ローカルでは動かない：file URLでは機能や読み込みが制限される場合があります。制作手順で必要なWebサーバーを確認します。
- 画像だけ出ない：相対パス、ファイル名、配置、URLの大文字小文字を確認します。
- 文字が化ける：ファイルの保存文字コードとcharset指定・配信設定を照合します。
- file://では動かない：通信やモジュールの制約を確認し、開発用サーバーで試す必要があるか調べます。
HTML → PDF / 印刷用コピー
- 必要な画像やCSSが表示されることを確認し、ブラウザーの印刷からPDF保存を選びます。
- 改ページ、背景、リンク、長い表の切れをプレビューで確認します。
- PDF出力では全ページ、改ページ、背景、文字選択を確認します。HTMLと素材は別に残します。
PDFではフォームやJavaScriptの動作は通常再現されません。HTML原本と付随素材を残します。
HTML・CSS・JavaScriptの役割
HTMLは内容と構造、CSSは見た目、JavaScriptは動作を担当します。HTMLだけを移動すると他の参照が切れることがあります。
エディターで読めること、ブラウザーで表示できること、サーバー機能が使えることを分けて確認します。
保存ページと公開ページを比較
相対参照はファイルの置き場所を基準にします。素材フォルダも一緒に保存し、リンク先を確認します。
PDF配布では印刷用表示、改ページ、背景、リンクを確認します。動的操作は紙面と同じ形で残りません。
関連形式との違い
| 形式 | 主な役割 | 選ぶときの注意 |
|---|---|---|
| HTML | ページの構造・内容 | 依存素材とサーバーを確認 |
| CSS | 見た目の指定 | HTMLから参照して使う |
| 固定したページの配布 | 動的機能とは別 |
取り扱いと安全性
不明なHTMLは先にエディタで確認します。ブラウザーではスクリプトや外部通信が動く場合があるため、ログイン情報を求めるページを安易に信用しないでください。
よくある質問
HTMLだけでサイトを全部保存できる？
CSS・画像・JS等を参照している場合、それらも必要です。
HTMLをTXTへ改名するとコードが消える？
内容は変わりません。テキストとして読むだけです。
PDF化したら検索やフォームも動く？
通常、Webページの動作は引き継ぎません。
HTMLをPDFへ改名できる？
ブラウザーの印刷やPDF出力を使います。改名ではPDF構造になりません。
ページを保存すればWeb機能も全部使える？
サーバー処理、ログイン、API等は保存されない場合があります。元の動作環境を確認します。
形式の基本情報：正式名称・MIME type・管理団体
- 名称
- HyperText Markup Language
- 管理・仕様
- WHATWG
- MIME type
- text/html
公式・一次情報
- 標準仕様HTML Living Standard
HTML文書・要素・外部リソースの扱いを定義する仕様です。
WHATWG · リンク確認： - ソフトウェア公式HTML in Visual Studio Code
HTMLの編集・書式・検証・プレビューの資料です。
Microsoft · リンク確認：