個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

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

「このサイトのココどうやっているんだろう?」そう思ったとき、
ソースを見るか、ChromeのデベロッパーツールやFirebugを利用しているかと思います。
でも、いまいち使いにくくないですか。特にCSSの部分が。
必要としていない部分まで出てきて、頭がこんがらがるぅ……、といった事態になりませんでしょうか。
そんな方にオススメしたいのが、今回ご紹介するChrome用の機能拡張ツールです。
「効率よくサイトを検証したい」「もっとサイト制作の勉強をしたい」と思っている方のご参考になれば幸いです。

Google Chromeデベロッパーツールの機能拡張「SnappySnippet」でHTML/CSSをより見やすく

SnappySnippetは、HTML/CSSをより見やすくしてくれるGoogle Chromeデベロッパーツール用の機能拡張です。
指定した要素のHTMLとCSSだけを表示してくれるというシンプルなものですが、余計なものが表示されないため、サイトの勉強をするにはとっても適していると思います。
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「SnappySnippet」の使い方

まずはChromeウェブストアの「SnappySnippet」から機能拡張を追加します。
調べたいサイトに行き、メニュー>表示>管理/開発>デベロッパーツール(もしくはオプション+⌘+I)を選択。
今回はナイキジャパンのメニュー部分を調べることにしましょう。
虫眼鏡ツールをクリックして、メニュー部分を選択します。
すると該当するHTMLとCSSが表示されました。
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
ここで、デベロッパーツールのメニューに新しく加わっている「SnappySnippet」をクリックします。
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
次のような画面に切り替わるので、「Create a snippet from inspected elemet」をクリックします。
そうすると、下の「HTML」「CSS」の窓枠に、コードが表示されるという具合です。
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
IDやクラス名は、サイト固有のものではなく、「SnappySnippet」独自のものに置き換わっています。

CodePenにもコード部分だけをすぐに送れる

もう一つの便利な機能がこれ。
抽出した部分だけをCodePenに送ることが可能です。
CodePenというのはHTML、CSS、JSのコードコミュニティサイトで、ブラウザ上でコードの検証もすぐに出来てしまうサイトです。
ここにコード部分だけがすぐにコピペされるので、その後の検証・勉強でもとても役立ちます。
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

とってもシンプル!だから使いやすい。
いい機能拡張です、SnappySnippet。

SnappySnippet

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 4

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む