あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。続きを読む。
Web サイトをゼロから作成すると、プロジェクトの複雑さによっては頭を悩ませることになるかもしれません。この時間のかかるスキルを習得するには、数か月または数年かかる場合があります。その結果、ほとんどのプロのプログラマーは、スキルを磨くためのプロセスとショートカットを開発しました。
これには、最も一般的で反復的なプログラミング コードの便利なリストを維持することが含まれます。この記事では、Chrome、Firefox、Edge などの一般的なブラウザを使用して Web サイトのコードを責任を持ってコピーできるようにする別のトリックを学びます。これは、完成したコードの例を提供する貴重な学習リソースとなります。
Chrome では次の方法を使用して、Web サイトからコードをコピーできます。
ページソース経由
これはおそらく、ブラウザーに関係なく、Web サイトまたは Web ページのコードベース全体にアクセスするための最も簡単な方法です。 Chrome でページのソースを表示するには、対象の Web サイトに移動し、ページのリンク、画像、広告以外の部分を右クリックします。
クリックページのソースを表示または単に押してくださいCtrl + U(Windows、Linux) またはコマンド + U(macOS)。必要なコードの一部またはすべてをコピーし、任意のコード エディターに貼り付けます。
F12 ショートカット経由
Web サイトにアクセスして を押すだけで、Chrome デベロッパー ツールに簡単にアクセスできます。F12。 Chrome デベロッパー ツールには Web サイトのコードが格納されており、開発者用のデバッグ ツールとしても機能します。
必要なコードをすべて選択し、コピーして、選択したコード エディターに貼り付けます。
検査ツール経由
Chrome Developer Tools パネルに入るもう 1 つの方法は、Inspect ツールを使用することです。これを行うには、コードをコピーする対象の Web サイトにアクセスします。さあ、押してくださいCtrl + Shift + I(Windows、Linux) またはコマンド + オプション + I(macOS)、これにより、Dev Tools に直接移動します。
または、ページの透明な部分を右クリックして、検査するページのソースを表示するオプションのすぐ下にあるメニュー オプションから。
Chrome の開発ツールを介して Web サイトのコードを探索するもう 1 つの方法は、対象の Web サイトの右上隅にある 3 つの点ボタンをクリックすることです。メニューオプションから、その他のツール、 それから開発者ツール。
必要なコードをすべてコピーし、任意のコード エディターに貼り付けます。また、デバッグ ツールとしてだけでなく、Chrome Dev Tools を使用してスクリーンショットを撮ることもできます。
Firefox を使用して Web サイトからコードをコピーする方法
ここでは、Firefox を使用して Web サイトのコードをコピーするさまざまな方法を紹介します。
ページのソースを表示
Firefox でページのソースを表示して Web サイトのコードにアクセスしてコピーするには、対象の Web サイトを右クリックし、ページのソースを表示。
または、 を押します。Ctrl + U(Windows、Linux) またはコマンド + U(macOS)。必要なコードをすべてコピーし、選択したコード エディターに貼り付けます。
Firefox で同じように簡単にページのソースを表示するには、3 行のハンバーガー メニューをクリックし、その他のツールをクリックして、ページソース。
F12 キーボード ショートカット経由
Chrome と同様に、キーボードの F12 キーを押すだけで、Firefox Dev Tools の Web サイトのコードにアクセスすることもできます。
スタイル エディターに特に注意して、探している特定のコードを探してください。次に、すべてのコードをコピーしてお気に入りのコード エディターに貼り付け、魔法をかけてみましょう。
検査ツール経由
繰り返しますが、Chrome と同様に、組み込みの検査ツールを使用して Firefox でも Web サイトのコードに同様にアクセスできます。これを行うには、ターゲット Web サイトの透明な部分を右クリックし、次のいずれかを押します。Qまたはクリックしてください検査する。を押すこともできますCtrl + Shift + I(Windows、Linux) またはコマンド + オプション + I(macOS)。
説明したように、探しているコードが見つかるまで、スタイル エディターを使用して方法を見つけることができます。次に、それをコピーして、最適なコード エディターのいずれかに貼り付けます。
[その他のアクション] メニューから Firefox で Web サイトのコードをコピーするには、コードをコピーする Web サイトから、右上隅にある 3 行のハンバーガー メニューをクリックします。
選択さらに多くのツール、次にクリックしますウェブ開発者ツール。ここから、インスペクターまたはスタイル エディターを使用して、目的のコードをコピーできます。
インスペクターの場合は、キーボードの矢印キーまたはスクロール バーを使用してエントリ間を移動します。スタイル エディターの場合、左側のナビゲーション パネルを使用して特定の行項目に焦点を当てることができます。必要なものが見つかったら、コピーしたコードをコード エディターに貼り付け、好みに合わせてカスタマイズします。
Edge を使用して Web サイトからコードをコピーする方法
次のように、Edge を使用してさまざまな方法で Web サイトのコードを簡単にコピーできます。
ページのソースを表示
Microsoft Edge でページ ソースを表示して Web サイトのコードをコピーするには、ターゲット サイトの透明な部分を右クリックし、ページのソースを表示。
または、単に を押すこともできます。Ctrl + U(Windows、Linux) またはコマンド + U(macOS)、必要な部分をコピーし、エディターに貼り付けて、コードのカスタマイズを開始します。
F12 キーボード ショートカット経由
Edge を使用している場合は、コードをコピーしたい Web サイトにアクセスしたときに F12 キーを押すだけで、Web サイトのコードを同様にコピーできます。
クリックして選択を確定します開発ツールを開く。 [開発ツール] パネルでは、必要なコードをすべて簡単にコピーして、作業を高速化できます。
検査ツール経由
Edge の検査ツールを使用して Web サイトのコードをコピーするには、コードをコピーする Web サイトに移動し、透明な部分を右クリックして、検査する。
を押すこともできますCtrl + Shift + I(Windows、Linux) またはコマンド + オプション + I(macOS)。次に、複製して編集するコードをコピーして貼り付けます。
Edge の [その他のアクション] ボタン経由
Edge では、[その他のアクション] メニューから DevTools パネルにアクセスすることもできます。これを行うには、コードをコピーする Web サイトにアクセスします。右上隅にある 3 つの点ボタンをクリックし、その他のツール、 それから開発者ツール。
ご使用のブラウザにこれらのオプションや機能が欠けている場合は、ブラウザが最新かどうかを確認してください。 Chrome、Firefox、Edge を確認および更新する方法は次のとおりです。
どのようなアプローチを採用しても、どの Chromium ベースのブラウザー (Chrome、Firefox、または Edge) を使用しても、[開発ツール] パネルの 3 点メニューをクリックし、検索。または、単に を押します。Ctrl + Shift + F(Windows、Linux) またはコマンド + オプション + F(macOS)。
のファイルを開くそしてコマンドの実行オプションは、Web サイト上のコードを見つけるのにも役立ちます。スタイルエディターFirefox と要素Chrome および Edge 開発ツール パネル。
既存の Web サイトコードを使用してスキルを磨く
Chrome、Firefox、Edge、またはその他の Chromium ベースの Web ブラウザー (さらに言えば) を使用しているかどうかに関係なく、既存の Web サイトからコードをコピーするだけで、時間とエネルギーを大幅に節約できます。
ただし、Web サイトのコードをコピーするのは、自分自身の学習とオフラインでの探索のためにのみ行う必要があります。既存の Web サイトのレプリカを作成し、それをそのまま公開しようとすると、著作権侵害につながる可能性があります。モバイル コード エディターを使用して、外出先でもコーディングを行うこともできます。
