2014/07/10
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、
ソースを見るか、ChromeのデベロッパーツールやFirebugを利用しているかと思います。
でも、いまいち使いにくくないですか。特にCSSの部分が。
必要としていない部分まで出てきて、頭がこんがらがるぅ……、といった事態になりませんでしょうか。
そんな方にオススメしたいのが、今回ご紹介するChrome用の機能拡張ツールです。
「効率よくサイトを検証したい」「もっとサイト制作の勉強をしたい」と思っている方のご参考になれば幸いです。
Google Chromeデベロッパーツールの機能拡張「SnappySnippet」でHTML/CSSをより見やすく
SnappySnippetは、HTML/CSSをより見やすくしてくれるGoogle Chromeデベロッパーツール用の機能拡張です。
指定した要素のHTMLとCSSだけを表示してくれるというシンプルなものですが、余計なものが表示されないため、サイトの勉強をするにはとっても適していると思います。
「SnappySnippet」の使い方
まずはChromeウェブストアの「SnappySnippet」から機能拡張を追加します。
調べたいサイトに行き、メニュー>表示>管理/開発>デベロッパーツール(もしくはオプション+⌘+I)を選択。
今回はナイキジャパンのメニュー部分を調べることにしましょう。
虫眼鏡ツールをクリックして、メニュー部分を選択します。
すると該当するHTMLとCSSが表示されました。
ここで、デベロッパーツールのメニューに新しく加わっている「SnappySnippet」をクリックします。
次のような画面に切り替わるので、「Create a snippet from inspected elemet」をクリックします。
そうすると、下の「HTML」「CSS」の窓枠に、コードが表示されるという具合です。
IDやクラス名は、サイト固有のものではなく、「SnappySnippet」独自のものに置き換わっています。
CodePenにもコード部分だけをすぐに送れる
もう一つの便利な機能がこれ。
抽出した部分だけをCodePenに送ることが可能です。
CodePenというのはHTML、CSS、JSのコードコミュニティサイトで、ブラウザ上でコードの検証もすぐに出来てしまうサイトです。
ここにコード部分だけがすぐにコピペされるので、その後の検証・勉強でもとても役立ちます。
とってもシンプル!だから使いやすい。
いい機能拡張です、SnappySnippet。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」
こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利
-
-
これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22
CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
-
2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50
2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ
-
-
無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方
Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで
-
-
ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る
ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr
-
-
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」
CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV
-
-
これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+
海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと
-
-
iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device