簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

HTMLやCSSの検証に便利なディベロッパーツール(開発者ツール)とは?

2021/6/5

HTMLやCSSの検証に便利なディベロッパーツール(開発者ツール)とは?

ChromeやEdge(最新版)をお使いの方にとても便利な機能がありますのでご紹介させていただきます。

たとえばワードプレスなどのCMSをお使いで、CSSを変更したらどのように変更されるか知りたい場合、一旦CSSを保存したあと、問題なく表示されるかを閲覧してみて、微調整を行うといった使い方をされているのであればお役に立てる情報です。HTMLについても同様ですね。

サイト上の画像以外のところで右クリックしていただき、Chromeなら「検証」、Edgeなら「開発者ツールで調査する」を選んでいただきます。

どちらもChrl+Shift+Iというショートカットキーで開くことも可能です。

右にツールバーが出てくるので、ここでHTMLやCSSを一時的に変更することが可能です。
ここで問題なく見えるようであれば、そのHTMLやCSSをアップすればいいので効率アップが可能です。

また、右上のスマホアイコンを押していただくと、PC上でスマホ表示を見ることができますので、どのように見えるのかを知ることができ便利です。

他にも様々な使い方や応用方法がありますので今後ご紹介させていただきますね。

 

最後までお読みいただきありがとうございました。

この記事を書いたのは

株式会社AMS 取締役副社長 古倉 功一

2005年からSEOに本格的に取り組み、SEO歴は15年以上。現在はリスティング広告、SEOをメインにしたWebコンサルを提供中。好きな番組:ポケットモンスター。

  • 石川県産業創出支援機構(ISICO)「お店ばたけ」ホームページドクター
  • セミナー講師(Webマーケティング、SEO、PPC広告等)
  • ミラサポ専門家登録(派遣先からの総合評価平均 5点中4.9)
常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ