2つのhtmlファイル同士、またはcssファイル同士を比較して間違い探しができる便利なツールWinMerge

Pocket

なんでホームページが本のサンプルサイトと同じように表示されないの?なんで違うの?どこが違うの?と困った経験はありませんか?
htmlやcssの入門書をみながら、一生懸命あなたがテキストエディタでhtmlタグやcssセレクタを入力したのに、サンプルサイトと同じように表示されない…わたしもしょっちゅうあります。よくやる失敗は「cssのプロパティ名をスペルミス」「htmlのclass属性とcssのclassセレクタ名のスペルミス」といったところですが。まぁ、中には本のサンプルが間違っているなんてこともありますが…

こんな時に、「2つのhtmlファイル同士、またはcssファイル同士を比較して間違い探しができる便利なツール」があります。それがWinMergeです。

このWinMergeは、ソフトウェアの開発現場でも使われているスグレモノです。もちろん、ホームページを作成しているあなたも立派な開発者ですので、ぜひ使いましょう!ダウンロードは、窓の杜をはじめ色々なサイトからできます。→窓の杜ライブラリ窓の杜

インストールできました?それでは使い方にいってみましょう!

2つのhtmlファイル同士、またはcssファイル同士を比較するWinMergeの使い方

それでは使い方を説明しますね。たとえば、サンプルサイト本来の表示が以下だったとしますよね。

だけど、以下のようにあなたの作ったhtmlファイルはブラウザーで表示するとなぜだか知らないけれど横に広がりすぎてしまい、おかしかったとします。

こんな時に、WinMergeを起動しましょう。

03

[ファイルメニュー]の[開く]を選択します。

するとダイアログボックスが表示されますので、ここで比較する2つのファイルを選択していきます。

まずは1の欄に自分が記述したhtmlファイルを選択します。[参照]ボタンをクリックしてください。

ダイアログボックスが開きますので、自分が記述したcssファイルを選択して、[開く]ボタンをクリックしてください。

すると1の欄に自分が記述したhtmlファイルのパス(=場所)が表示されます。

次に2の欄に見本にしているサンプルサイトのhtmlファイルを選択します。[参照]ボタンをクリックしてください。

ダイアログボックスが開きますので、サンプルサイトのhtmlファイルを選択して、[開く]ボタンをクリックしてください。

すると2の欄にサンプルサイトのhtmlファイルのパス(=場所)が表示されます。

[OK]ボタンをクリックします。

すると、異なっている行部分が黄色表示されます。これをみると<div>タグのclass名の値を間違えていることがわかります。

あー、わたしがよくやるスペルミスです…なので、この部分を修正すれば、正しく表示されます。 それでは、WinMergeの左側の部分を修正します。あっ!色が消えましたね。

[ファイル]メニュー→[保存]→[左側のファイルを保存]を選択します。

ブラウザーで表示して、更新すると、ほらっ!修正されています。

どうです?すごく便利でしょ。

2つのhtmlファイル同士、またはcssファイル同士を比較して間違い探しができる便利なツールWinMergeのまとめ

『なんでホームページが本のサンプルサイトと同じように表示されないの?なんで違うの?どこが違うの?』ということは、超初心者のあなたはもちろん、ベテランでも、プロでもよくあります。

超初心者とプロの差は「いかに早く間違いを探すことができるか」だけです。WinMergeを使えば、間違い探しが簡単にできるようになるので、すぐにプロの仲間入りです。WinMergeは2つのhtmlファイル同士、またはcssファイル同士を比較して、間違い探しができる便利なツールですので、ぜひ使って素敵なホームページを作成してくださいネ。

Pocket