SnappySnippetを使用して、Webサイトからコードを簡単にコピーします

Use Snappysnippet Easily Copy Code From Website

Chrome Devtools また、FirefoxのFirebugには実際にはすでにこの機能が付属しており、WebサイトからHTMLとCSSを簡単にコピーできます。

次に、コードのコピーを取得することを検討します。

Web開発者として、Webサイトにいくつかの啓発的な要素が見つかることがあります。そのため、彼らがこの種のものをどのように構築したのか不思議に思うでしょう。

たとえば、次に示すように、複数の子要素を含むHTML要素を選択するとします。

これらのツールを使用して、選択したHTML要素に関連付けられているCSSをコピーすることはできません。

しかしながら、 これらのツール コピーできるのはHTMLまたはCSSのみです。

Submit

By submitting you are agree to our term and condition

ここでは、SnappySnippetsのようなツールが好きになるでしょう。

一部のHTML要素は、いくつかのスタイルルールを継承する場合があります。 HTMLとCSSを一緒にコピーするのは難しい 。

これらの各要素には、スタイルシートに固有のスタイルルールがあります。

入門

ここでSnappySnippetを操作します。

SnappySnippet Chrome拡張機能です（ ここに 入手）、インストール後、SnappySnippetという名前の新しいタブがGoogle ChromeDevToolsに提供されます。

ブラウザの通常の関数を使用して従来の方法でこのすべてのコードをコピーするには、DevToolsにいくつかの作業が必要になります。

これらのHTML要素はすべてCSSコードを継承します。

それをテストするために、非常に単純なものを形成するためにいくつかのHTML要素を含むWebページを準備しました Webログインフォーム 。

ただし、SnappySnippetを使用すると、すべてが簡単になります。

まず、コピーする要素を選択し、[SnappySnippet]タブを開いて、[]をクリックします。 検査された要素からコードスニペットを作成する ボタン。

これらのHTML要素を形成するすべてのスタイルルールもコピーされ、CSSペインに配置されます。

下のスクリーンショットでわかるように、選択した要素（サブ要素を含む）をコピーして左側に配置しました HTML パン。

セットアップ

出力からの削除-webkit-プレフィックスCSSプロパティ、HTML要素に提供されるIDのプレフィックスの挿入など、いくつかの設定を行うことができます。

HTMLとCSSの2つのペインの下に、 'があります。 設定' パネル。

SnappySnippetを使用すると、コード出力を設定できます。

コードシェア

SnappySnippetを使用すると、コピーしたコードをに送信できます。 Codepen 、 JSFiddle そしてJSBin。

ソーシャルネットワーキングサイトのようなものですが、ステータスやセルフィーを共有する代わりに、コードを共有します。

このWebサイトでは、Web開発者は次のことができます。 作業コードスニペットを共有する 。

Web開発者は次のようなことに精通している可能性があります Codepen コード共有プラットフォームの種類。

次に、これら3つの共有ボタンのいずれかをクリックするだけです。

これは、コードがすぐにアカウントに保存されるようにするためでもあります。

コードを送信するには、コードを送信する適切なWebサイトにログインしていることを確認してください。

コピーしたコードは、Webサイトに表示されているコードを完全に返します。

最終的な考え

このツールを正しく使用してください。

著作権で保護されているかどうかに関係なく、パブリックコピーは許可されていません。

何をコピーしても、学習を目指し、使用するテクノロジーから新しいことを学びたいと考えています。

SnappySnippetはコードをコピーするための非常に便利なツールですが、覚えておいてください として使用しないでください スチール 他の開発者コードメソッド 。

翻訳元： https://www.hongkiat.com/blog/snappysnippet-copy-codes/