Chromeでソースコード表示

GoogleのChromeでソースコードを見るには、画面で右クリックして「検証」を選択するとWebサイトのソースコードを見ることができます。ショートキーは「Ctrl + Shift + C」です。それよりも「F12」で簡単に開きます。(閉じる時も「F12」でOK)

通常、画面下にソースコードが表示されます。

これでは見にくいので、横並び表示させたほうが良いでしょう。表示方法の変更は、ソースコードの右上のメニューから変更します。

そこで、下のように Dock Sideを右にする赤マークを選んで下さい。

これで、下のような表示になります。特に幅広のPCディスプレーでは、ずーっと見やすくなります。

一旦、このように設定すれば、次回からこの設定が継続されます。

それでは、Elementの表から、Styleを読み取ったり、CSSを探り出したりして下さい。
属性を消してみたり、変更してみたりしてどんな値が何処に書かれているか探り出して見て下さい。

%d人のブロガーが「いいね」をつけました。
%d人のブロガーが「いいね」をつけました。