ブラウザについて紹介しましたが、

その機能でわりと便利なものがあるので紹介します。

 

それは、Google Chrome のデベロッパーツールです。

コーダーから上がってきたデータチェックでよく使うのですが、

ズレてたり、崩れてたり、ちょっとタグが気になった部分の、

ソースからCSSから調整から瞬時に分かる優れもの。

 

まず、Google Chromeでサイトを開きます。

そして右クリックを押します。

要素を検証をクリックします。

するとこのように、画面が分割されます。

下の方に表示されるのがソースコードやCSSのプロパティです。

それそれのタグを選択すると、

どこのどの範囲にどのCSSのなんというプロパティが

記述されているのかわかり、

さらにタグの追記やCSSの追記ができ、

それがプレビューとして上に表示されている実際のサイトに反映されるので、

今までやっていた

ソースコードをみて、文言を検索して、

CSSファイルを開いてクラス名を検索してプロパティ見て、

直して保存してアップしてブラウザ表示させて…

それでも直らない場合はソフト立ち上げて…

 

という煩わしい作業が全く必要がなくなり、

また、修正の指示も明確に適切に出すことができます。

 

この機能はChromeに限らず、他のブラウザにもありますが、

色が見づらかったり、

表示のされ方が野暮ったかったりするので

私はChromeで落ち着いています。

この機能はデベロッパーツールと称される通り、

コードが書けることと原因を理解することができなければ

あまり役立てることができないので、

初心者ではちょっと難しいかもしれません。

ある程度分かる方であれば、

一度試してみてはいかがでしょうか。