シェアする

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

「このサイトってどんな風にHTML書いてるんだろう……」とか「ココの部分をちょっと参考にしたいな」とか思ったことはありませんか?

知識がある方なら、頭の中である程度コードを組むことが出来ると思うのですが、初心者となるとそうはいきません。

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

スポンサーリンク

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

1

(画像は、https://www.google.co.jpをスクリーンショット)

GoogleChromeデベロッパーツールとは、名前にもあるようにGoogle Crhomeの開発者向けツールです。Windowsの場合、「F12キー」または、「ctrl+shift+i」、「設定(右上)」→「その他のツール」→「デベロッパーツール」で開けます。

Macの場合「alt+command+i」で開けます。

閲覧中のWebサイトのHTML/CSSソースを見る/一時的に編集することが出来ます。

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

Google Chromeをダウンロードしてください。

Google の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をご活用ください。

実際に使ってみる

画像はGifになっています。クリックで拡大します。

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

seasea1

今回は、Aboutの部分を編集してみたいと思います。

「右クリック」で「検証」を開きます。すると、デベロッパーツールが起動し、AboutのHTML/CSSソースが表示されます。

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

seasea2

Aboutの要素を右クリックし、「Edit HTML」 「About」の部分を「rarara」に編集し、他の要素部分をクリックすれば、適用されます。

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

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

seasea4

「rarara」を選択した状態で、右側のCSSを変更します。

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

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

seasea3

「rarara」を右クリックし、「:active / :hover / :focus / :visited」から、「:hover」を選択してみます。すると、CSSがマウスオーバーした状態で固定されます。それぞれの状態のCSSを編集することが出来ます。

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

seasea5

左上のスマホ/タブレットマークをクリックすると、レスポンシブ/スマホ表示に切り替えることが出来ます。

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

の画面比がプリセットで用意されています。

自分で任意の画面比に設定することも可能です。

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

右クリックして、「検証」するだけでHTML/CSSを見ることが出来るので初心者の方にかなりオススメです。

さらに、リアルタイムHTML/CSSエディター(シミュレーター)としてもある程度利用できるので、自分のサイトのカスタムを直接できるのも魅力ですね!

(実際に反映するには、変更した部分をWordPressテーマなどのPHP/HTML/CSSを変更する必要があります。)

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

ペンギンさんの一言

僕も時々、有名サイトさんを参考にしてるよ!

スポンサーリンク

シェアする

フォローする

スポンサーリンク
Top