このページの本文へ

PROGRAMMING Web制作が3倍速くなるChromeデベロッパーツールの使い方 ― 第3回

競合サイトのCSSとJavaScriptを丸裸にする方法

2015年05月25日 11時00分更新

手塚 亮/nanapi

  • この記事をはてなブックマークに追加
本文印刷

Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第3回は、「Elements」パネル、「Sources」パネルでサイトを検証する方法を解説します。

※本記事は執筆時点で最新のChrome 40を使用しています。

他人のコードを効率よく調べたい!

ディレクターやデザイナーから、「このサイトみたいなデザインにしたいんだよね」と言われることってよくありますよね。また、海外のかっこいいサイトを見ていると、使われているインタラクションを真似したいと思うこともあります。

そこで、Chromeデベロッパーツールを使って、他のサイトのCSSやJavaScriptを効率的に調査する方法を解説します。

1.背景画像を100%表示しているCSSの実装方法を調べる

背景画像の比率を変えずに高さと幅をフィットさせるデザインのページを例に、Chromeデベロッパーツールの「Elements」パネルで実装を調べていきます。Elementsパネルは、開いているページのHTML/CSSの検証ができます。

サンプルページ

背景を表示している要素のスタイルを確認します。

Elementsパネルの起動方法

Google Chromeを起動してChromeデベロッパーツールを開きます。Chromeデベロッパーツールは、MacではCmd + Option + Iキー、WindowsではCtrl + Shift + Iキーを押すか、ページ上で右クリックし「要素の検証」で起動できます。

サイトの要素を確認する

「Elements」パネルでページのDOM構造を確認します。デベロッパーツールの虫眼鏡のアイコンをクリックした状態で背景画像にマウスを重ねると、class名「vol3-1」の要素だと分かります。右側の「Styles」グループから「vol3-1」のCSSを確認しましょう。

CSSプロパティを見ると、「background-image」プロパティで背景画像を指定しています。

背景サイズを扱う「background-size」プロパティに「cover」という値がセットされているのが気になりますね。プロパティの横にあるチェックボックスをクリックして、プロパティを無効にしてみましょう。

すると、背景画像が横幅にフィットせずに表示されます。背景画像の拡大表示は、この「background-size: cover」で実装されていることが分かりました。

気になるページのCSSは、対象の要素のプロパティを確認し、プロパティのオン/オフをしていくと、どのプロパティが作用しているかが分かります

2.スライドショーに利用しているjQueryプラグインを調べる

サイト内で使用しているjQueryプラグインを調査する方法を、サンプルページで説明します。次のサンプルページを開いて、Chromeデベロッパーツールを起動してください。

サンプルページ

まずは、要素の検証で「スライダー」のDOM構造を確認してみましょう。以下のように表示されます。

続いて、ページ上で右クリックして「ページのソースを表示」を選び、ソースコードを表示してください。デベロッパーツールの「Elements」パネルに表示されたコードと、HTMLに違いがあることが分かります。

Chromeの「ページのソースを表示」では、静的なHTMLのソースコードを確認できますが、JavaScriptで書き換えられたDOM構造は確認できません。一方、Chrome デベロッパーツールの「Element」パネルでは、JavaScriptが書き換えた後のDOMを確認できます。

「Element」パネルでDOM構造を見てみると、「slick-slider」「slick-initialized」などのclass名が追加されていることが分かります。

このclass名「slick-slider」をヒントにプラグインを探し出すため、Googleで「slick-slider」と検索してみると、「slick」というjQueryプラグインがヒットしました。

3.圧縮されているJavaScriptのソースコードをのぞき見る

今度は「Sources」パネルを使って検証してみましょう。Sourcesパネルはページで読み込んでいるCSSやJavaScriptファイルの編集や保存ができます。

slickのページにある説明を読むと、このプラグインはスライダーを実装するだけで、サンプルページにあるフィルタリング機能はないようです。

そこで、画像をフィルタリングボタンの実装を調査します。

「Element」パネルで確認しても、「button」タグにはclass名「.js- filter-dog」がついているだけなので、jQueryプラグインではなさそうです。ページ内で読み込まれている唯一のJavaScriptファイル「vol3-2.js」を「Sources」パネルで開きます。

開いてみると上記画像のようにminify(圧縮)化されていますが、Chrome デベロッパーツールを使えば、minify化されたファイルも展開できます。「Sources」パネルの「{}」アイコンをクリックして、展開した状態のスクリプトファイルを確認しましょう。

以下のように展開されます。

「button」タグに実装されていたclass名「.js- filter-dog」を検索すると、クリック時の処理を見つけることができました。

このように、Chromeデベロッパーツールを使えば、他のサイトで使われているJavaScriptの実装方法を効率的に調べることができます。

TIPS:使っている技術を見極める方法

アニメーションやインタラクションの場合は、JavaScriptでもCSSでも実装できるので、どちらで実装されているか分からないときがあります。その場合は、対象の要素を選んで「Styles」グループを開き、CSSが設定されているか確認してみましょう。

次の画像のように、style属性でインラインスタイルが設定されている場合は、JavaScriptで動的に要素がスタイリングされていると考えてよいでしょう。

JavaScriptによって動的にスタイリングされている例

紹介した機能まとめ

今回紹介した機能をまとめます。

Elementsパネル

開いているページのHTML/CSSの検証ができます。リアルタイムで更新され、JavaScriptで操作した状態のDOMを確認できます。Web制作に携わる人が一番お世話になる機能です。

Sourcesパネル

ページで読み込んでいるCSSやJavaScriptファイルを編集・反映できます。minify化されたファイルも展開して確認できます。

次回は、スマートフォンとChromeデベロッパーツールを連携させて、スマートフォンサイトのデバッグを効率化する方法を紹介します。

著者:手塚 亮

著者写真

2009年4月 ITベンチャーに入社。Webデザインをメインにフロントエンド・バックエンドの開発を経験。後にベトナムに駐在し、海外エンジニアの技術力とコストの安さを知り、自身のキャリアに危機感を覚え、2013年10月よりnanapiに転職。nanapiの開発やIGNITIONの立ち上げに携わる。現在は、Android開発に従事。 プライベートでは「InTHEnet」というチームを組み、Webサービスなどの制作を行う。直近では、「ハミガコ!」というアプリのプロトタイプで、Yahoo!プロトタイプコンテストで準グランプリ・UI賞を受賞をしている。

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング