WebページにあるカッコいいボタンのデザインをHTML/CSSとして抽出「SnappySnippet」

「SnappySnippet」v0.5

　「SnappySnippet」は、Webページ上で選択した部分のデザインをHTML/CSSのコードとして抽出できるようにする「Google Chrome」用の拡張機能。編集部にてWindows 10上の「Google Chrome」v48.0.2564.116で動作を確認した。“Chrome ウェブストア”から無償でダウンロードできる。

　クールなデザインのWebページを見ると、どのようなコードで実現しているのか気にはならないだろうか。「Google Chrome」では［F12］キーなどで“デベロッパー ツール”を起動すれば、気になる部分のHTMLタグやCSSスタイルを調査することができる。しかし、最近のWebページは非常に複雑で、ある程度慣れないとタグやスタイルの関係を把握するのは難しいかもしれない。

　そんな時に試してみてほしいのが、「SnappySnippet」だ。本拡張機能を利用すると、たとえばボタンやメニューなどのデザインに関するタグやコードだけを簡単に抜き出すことが可能。抽出したHTML/CSSは“CodePen”や“jsFiddle”、“JS Bin”といったサービスへ送信して閲覧することもできる。Webデザインを学習する際にぜひ役立ててほしい。

　本拡張機能は「Google Chrome」の“デベロッパー ツール”を拡張したものとなっているので、まず［F12］キーなどで“デベロッパー ツール”を開き、Webページ上で好みの要素を選択しよう。次に［SnappySnippet］タブを開き、［Create snippet from inspected element］ボタンを押す。すると、ボタンの下にあるテキストボックスにHTMLとCSSが出力される。“CodePen”や“jsFiddle”、“JS Bin”へコードを送信したい場合は、［SnappySnippet］タブの下部にあるボタンを利用すればよい。

　そのほかにも、抽出したHTMLコードをクリーンアップする機能や、CSSを読みやすく最適化する機能などを搭載。不要な場合は“Settings”欄から無効化することもできる。

“デベロッパー ツール”を開き、Webページで好みの要素を選択

“デベロッパー ツール”の［SnappySnippet］タブを開き、［Create snippet from inspected element］ボタンを押すと、HTML/CSSが抽出される

“CodePen”や“jsFiddle”、“JS Bin”へコードを送信する機能も

“Settings”欄