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

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

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

GoogleChrome_dev_1

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

GoogleChrome_dev1

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

GoogleChrome_dev2_1

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

GoogleChrome_dev3_1

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です