なんでホームページが本のサンプルサイトと同じように表示されないの?なんで違うの?どこが違うの?と困った経験はありませんか?
htmlやcssの入門書をみながら、一生懸命あなたがテキストエディタでhtmlタグやcssセレクタを入力したのに、サンプルサイトと同じように表示されない…わたしもしょっちゅうあります。よくやる失敗は「cssのプロパティ名をスペルミス」「htmlのclass属性とcssのclassセレクタ名のスペルミス」といったところですが。まぁ、中には本のサンプルが間違っているなんてこともありますが…
こんな時に、「2つのhtmlファイル同士、またはcssファイル同士を比較して間違い探しができる便利なツール」があります。それがWinMergeです。
![](https://creating-homepage.com/wp-content/uploads/2015/12/13-1024x534.jpg)
このWinMergeは、ソフトウェアの開発現場でも使われているスグレモノです。もちろん、ホームページを作成しているあなたも立派な開発者ですので、ぜひ使いましょう!ダウンロードは、窓の杜をはじめ色々なサイトからできます。→窓の杜ライブラリ窓の杜
インストールできました?それでは使い方にいってみましょう!
2つのhtmlファイル同士、またはcssファイル同士を比較するWinMergeの使い方
それでは使い方を説明しますね。たとえば、サンプルサイト本来の表示が以下だったとしますよね。
![](https://creating-homepage.com/wp-content/uploads/2015/12/01-1024x691.jpg)
だけど、以下のようにあなたの作ったhtmlファイルはブラウザーで表示するとなぜだか知らないけれど横に広がりすぎてしまい、おかしかったとします。
![](https://creating-homepage.com/wp-content/uploads/2015/12/02-2-1024x691.jpg)
こんな時に、WinMergeを起動しましょう。
![03](https://creating-homepage.com/wp-content/uploads/2015/12/03-2-1024x533.jpg)
[ファイルメニュー]の[開く]を選択します。
![](https://creating-homepage.com/wp-content/uploads/2015/12/04-2.jpg)
するとダイアログボックスが表示されますので、ここで比較する2つのファイルを選択していきます。
![](https://creating-homepage.com/wp-content/uploads/2015/12/05-5-1024x534.jpg)
まずは1の欄に自分が記述したhtmlファイルを選択します。[参照]ボタンをクリックしてください。
![](https://creating-homepage.com/wp-content/uploads/2015/12/06-1-1024x534.jpg)
ダイアログボックスが開きますので、自分が記述したcssファイルを選択して、[開く]ボタンをクリックしてください。
![](https://creating-homepage.com/wp-content/uploads/2015/12/07.jpg)
すると1の欄に自分が記述したhtmlファイルのパス(=場所)が表示されます。
![](https://creating-homepage.com/wp-content/uploads/2015/12/08-1024x534.jpg)
次に2の欄に見本にしているサンプルサイトのhtmlファイルを選択します。[参照]ボタンをクリックしてください。
![](https://creating-homepage.com/wp-content/uploads/2015/12/09-1024x534.jpg)
ダイアログボックスが開きますので、サンプルサイトのhtmlファイルを選択して、[開く]ボタンをクリックしてください。
![](https://creating-homepage.com/wp-content/uploads/2015/12/10.jpg)
すると2の欄にサンプルサイトのhtmlファイルのパス(=場所)が表示されます。
![](https://creating-homepage.com/wp-content/uploads/2015/12/11-1024x534.jpg)
[OK]ボタンをクリックします。
![](https://creating-homepage.com/wp-content/uploads/2015/12/12-1024x534.jpg)
すると、異なっている行部分が黄色表示されます。これをみると<div>タグのclass名の値を間違えていることがわかります。
![](https://creating-homepage.com/wp-content/uploads/2015/12/13-1024x534.jpg)
あー、わたしがよくやるスペルミスです…なので、この部分を修正すれば、正しく表示されます。
それでは、WinMergeの左側の部分を修正します。あっ!色が消えましたね。
![](https://creating-homepage.com/wp-content/uploads/2015/12/14-1024x534.jpg)
[ファイル]メニュー→[保存]→[左側のファイルを保存]を選択します。
![](https://creating-homepage.com/wp-content/uploads/2015/12/15-1024x534.jpg)
ブラウザーで表示して、更新すると、ほらっ!修正されています。
![](https://creating-homepage.com/wp-content/uploads/2015/12/16-1024x691.jpg)
どうです?すごく便利でしょ。
2つのhtmlファイル同士、またはcssファイル同士を比較して間違い探しができる便利なツールWinMergeのまとめ
『なんでホームページが本のサンプルサイトと同じように表示されないの?なんで違うの?どこが違うの?』ということは、超初心者のあなたはもちろん、ベテランでも、プロでもよくあります。
超初心者とプロの差は「いかに早く間違いを探すことができるか」だけです。WinMergeを使えば、間違い探しが簡単にできるようになるので、すぐにプロの仲間入りです。WinMergeは2つのhtmlファイル同士、またはcssファイル同士を比較して、間違い探しができる便利なツールですので、ぜひ使って素敵なホームページを作成してくださいネ。
コメント