初心者でもWeb制作が簡単に! GoogleChrome デベロッパーツールのススメ

初心者の方でも超簡単に「このサイトがどうやってHTMLを書いているか」を知ることが出来る、「GoogleChrome デベロッパーツール」

GoogleChrome デベロッパーツールとは?

(画像は、https://www.google.co.jpをスクリーンショット)閲覧中のWebサイトのHTML/CSSソースを見る/一時的に編集することが出来ます。

Google Chrome デベロッパーツールの入手方法

https://www.google.co.jp/chrome/browser/desktop/index.html

実際に使ってみる

STEP1 デベロッパーツールを開く

STEP2 「About」を「rarara」にしてみる

ブラウザ上でも変更が適用されるので、見ながら編集が出来ます。

STEP3 「rarara」の色をCSSで変更してみる

カラーピッカーも使用でき、さらに関連する色も表示されます。

番外 「rarara」の状態を固定する

番外:スマホ表示にも出来る

• iPhone5
• iPhone6
• iPhone6 Plus
• iPad
• Nexus6P
• Nexus5X
• GalaxyS5

HTML/CSSの勉強にもオススメ

ただし、参考までにしましょう。