「このサイトってどんな風にHTML書いてるんだろう……」とか「ココの部分をちょっと参考にしたいな」とか思ったことはありませんか?
知識がある方なら、頭の中である程度コードを組むことが出来ると思うのですが、初心者となるとそうはいきません。
といわけで、初心者の方でも超簡単に「このサイトがどうやってHTMLを書いているか」を知ることが出来る、「GoogleChrome デベロッパーツール」を紹介したいと思います。
目次
GoogleChrome デベロッパーツールとは?
(画像は、https://www.google.co.jpをスクリーンショット)
GoogleChromeデベロッパーツールとは、名前にもあるようにGoogle Crhomeの開発者向けツールです。Windowsの場合、「F12キー」または、「ctrl＋shift＋i」、「設定(右上)」→「その他のツール」→「デベロッパーツール」で開けます。
Macの場合「alt+command+i」で開けます。
閲覧中のWebサイトのHTML/CSSソースを見る/一時的に編集することが出来ます。
Google Chrome デベロッパーツールの入手方法
Google Chromeをダウンロードしてください。
https://www.google.co.jp/chrome/browser/desktop/index.html
実際に使ってみる
画像はGifになっています。クリックで拡大します。
STEP1 デベロッパーツールを開く
今回は、Aboutの部分を編集してみたいと思います。
「右クリック」で「検証」を開きます。すると、デベロッパーツールが起動し、AboutのHTML/CSSソースが表示されます。
STEP2 「About」を「rarara」にしてみる
Aboutの要素を右クリックし、「Edit HTML」 「About」の部分を「rarara」に編集し、他の要素部分をクリックすれば、適用されます。
ブラウザ上でも変更が適用されるので、見ながら編集が出来ます。
STEP3 「rarara」の色をCSSで変更してみる
「rarara」を選択した状態で、右側のCSSを変更します。
カラーピッカーも使用でき、さらに関連する色も表示されます。
番外 「rarara」の状態を固定する
「rarara」を右クリックし、「:active / :hover / :focus / :visited」から、「:hover」を選択してみます。すると、CSSがマウスオーバーした状態で固定されます。それぞれの状態のCSSを編集することが出来ます。
番外:スマホ表示にも出来る
左上のスマホ/タブレットマークをクリックすると、レスポンシブ/スマホ表示に切り替えることが出来ます。
- iPhone5
- iPhone6
- iPhone6 Plus
- iPad
- Nexus6P
- Nexus5X
- GalaxyS5
の画面比がプリセットで用意されています。
自分で任意の画面比に設定することも可能です。
HTML/CSSの勉強にもオススメ
右クリックして、「検証」するだけでHTML/CSSを見ることが出来るので初心者の方にかなりオススメです。
さらに、リアルタイムHTML/CSSエディター(シミュレーター)としてもある程度利用できるので、自分のサイトのカスタムを直接できるのも魅力ですね!
(実際に反映するには、変更した部分をWordPressテーマなどのPHP/HTML/CSSを変更する必要があります。)
ただし、参考までにしましょう。
1 件のコメント