Google ChromeブラウザでサイトのHTMLとCSSをチェックする

Google Chromeには、サイトの要素に適用されているスタイルを確認するのに便利な機能があります。

Google Chromeでサイトを開いて、気になる箇所で右クリックをするとポップアップウインドウが表示されるので、「要素の検証」をクリックします。

「要素の検証」をクリックすると、ブラウザの下の方にサイトのHTMLなどのコードが左に表示され、右にフォーカスしている部分のスタイルシートが表示されます。

試しに、右側にある「Styles」のスタイルシートの「.entry-header .entry-title a」にある「text decoration:none」のチェックを外してみます。

すると、記事タイトルに下線が表示されます。

また、Stylesにある「＋」をクリックすると、スタイルを追加してテストすることができます。