HTML 整形・自動修正をマスターする5つのステップ

HTML

2024.04.102024.05.10

この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

はじめに

この記事を読めば、初心者でも簡単にHTMLの整形や自動修正ができるようになります。

実際に使ってみたい方は、ぜひ最後までお読みください。

HTML整形自動修正を行うためには、まず適切なツールを選択することが重要です。

無料で利用できるオンラインツールや、開発環境に組み込まれた機能を活用しましょう。

例: Prettier, Beautify HTML, Visual Studio Code

整形ツールには、デフォルトの設定がありますが、自分の好みに合わせてカスタマイズが可能です。

例えば、インデントの幅や、タグの自動閉じなどを調整できます。

Prettierの設定例

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "endOfLine": "lf"
}

選択したツールを使って、HTMLコードを整形します。

オンラインツールの場合は、コードをペーストして実行ボタンを押すだけで整形が完了します。

整形前

<!DOCTYPE html><html><head><title>テストページ</title></head><body><h1>こんにちは、世界!</h1></body></html>

整形後

<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  </head>
  <body>
    <h1>こんにちは、世界!</h1>
  </body>
</html>

整形ツールの中には、コードのエラーや不具合を自動的に修正する機能が備わっているものもあります。

これを利用することで、より正確で美しいコードが手に入ります。

自動修正前

<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  </head>
  <body>
    <h1>こんにちは、世界!<h1>
  </body>
</html>

自動修正後

<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  </head>
  <body>
    <h1>こんにちは、世界!</h1>
  </body>
</html>

整形ツールを使って、複数のファイルを一括で整形する方法や、独自のルールを適用する方法など、応用例を試してみましょう。

複数のHTMLファイルを一括で整形するには、コマンドラインツールを利用します。

Prettierを使って一括整形するコマンドを紹介します。

prettier --write "**/*.html"

独自のルールを適用するには、設定ファイルにルールを記述します。

Prettierで特定の属性を1行にまとめる設定例を紹介します。

{
  "htmlWhitespaceSensitivity": "strict",
  "wrapAttributes": "force-aligned"
}

これで、初心者でも簡単にHTMLの整形や自動修正ができるようになりました。

整形ツールを上手に活用して、美しいコードを書くスキルを磨いていきましょう。