知っておくべきこと
- Web ページを右クリックして選択します ページのソースを表示 。
- ショートカット: を押します Ctrl + で (Windows PC) または 指示 + オプション + で （マック）。
- Chrome の開発者ツールを使用するには、 メニュー (3つの点) > その他のツール > 開発者ツール 。
この記事では、Google Chrome Web ブラウザで Web サイトの HTML ソース コードにアクセスする方法と、Chrome の開発者ツールにアクセスして使用する方法について説明します。サイトのソース コードを表示することは、初心者が HTML を学習する優れた方法です。
Chrome でソースコードを表示する
では、Web サイトのソースコードを表示するにはどうすればよいでしょうか?ここでは、Google Chrome ブラウザを使用してこれを行う手順を段階的に説明します。
-
を開きます Google Chrome ウェブブラウザ (持っていない場合 Google Chromeがインストールされている 、これは無料でダウンロードできます）。
-
に移動します。 調べたいWebページ 。
-
右クリック ページ そして表示されるメニューを見てください。そのメニューから、 ページのソースを表示 。
-
そのページのソース コードがブラウザの新しいタブとして表示されます。
-
または、次のキーボード ショートカットを使用することもできます。 Ctrl + で PC 上で をクリックすると、サイトのソース コードが表示されたウィンドウが開きます。 Mac では、このショートカットは次のとおりです。 指示 + オプション + で 。
ヒラリー・アリソン/ライフワイヤー
すべての Steam ゲームを別のドライブに移動する方法
Chromeの開発者ツールを使用する
シンプルなものに加えて、ページのソースを表示Google Chrome が提供する優れた機能を利用することもできます。 開発者ツール サイトをさらに深く掘り下げることができます。これらのツールを使用すると、HTML だけでなく、その HTML ドキュメント内のビュー要素に適用される CSS も表示できます。
Chrome の開発者ツールを使用するには:
-
開ける グーグルクローム 。
-
案内する 調べたいWebページ 。
-
を選択 三点メニュー ブラウザウィンドウの右上隅にある
-
メニューからカーソルを合わせます その他のツール そして選択してください 開発者ツール 表示されるメニューで。
-
ウィンドウが開き、ペインの左側に HTML ソース コードが表示され、右側に関連する CSS が表示されます。
-
または、右クリックすると、 Web ページ内の要素 そして選択します 検査する 表示されるメニューから、Chrome の開発者ツールがポップアップし、HTML 内で選択した特定の部分が、右側に示されている対応する CSS とともに強調表示されます。サイトの特定の部分について詳しく知りたい場合に非常に役立ちます。
iPhoneを知らずにスナップチャットでスクリーンショットを撮る方法
ソースコードの閲覧は合法ですか?
長年にわたり、多くの新人 Web デザイナーが、サイトのソース コードを表示して教育、そして最終的には仕事に使用することが許容されるかどうか疑問に思ってきました。サイトのコードを大規模にコピーし、それを Web サイト上で自分のものとして偽装することは確かに容認できませんが、そのコードを学習の出発点として使用することで、実際にこの業界で多くの進歩が見られます。
この記事の冒頭で述べたように、今日、サイトのソースを見て何かを学ばなかった現役の Web プロフェッショナルを見つけるのは難しいでしょう。はい、サイトのソース コードを見ることは合法です。そのコードをリソースとして使用して、同様のものを構築することも安全です。コードをそのまま使用して仕事として渡すと、問題が発生し始めます。
結局のところ、Web プロフェッショナルは互いに学び合い、自分たちが見てインスピレーションを受けた作品を改善することが多いため、ためらわずにサイトのソース コードを表示し、学習ツールとして使用してください。
HTML だけではない
覚えておくべきことの 1 つは、ソース ファイルは非常に複雑になる可能性があるということです (閲覧している Web サイトが複雑になればなるほど、そのサイトのコードも複雑になる可能性が高くなります)。ページを構成する HTML 構造に加えて、サイトの外観を決定する CSS (カスケード スタイル シート) も存在します。さらに、今日の多くの Web サイトには、HTML とともにスクリプト ファイルが組み込まれています。
複数のスクリプト ファイルが含まれる可能性があります。実際、それぞれがサイトのさまざまな側面に力を与えています。率直に言って、特にこれを初めて行う場合、サイトのソース コードは圧倒されるように思えるかもしれません。そのサイトで何が起こっているのかをすぐに理解できなくても、イライラしないでください。 HTML ソースの表示は、このプロセスの最初のステップにすぎません。少し経験を積めば、これらすべての要素がどのように組み合わされてブラウザーに表示される Web サイトを作成するのかがよりよく理解できるようになります。コードに慣れるにつれて、そこからさらに多くのことを学ぶことができるようになり、それほど難しく感じなくなるでしょう。
よくある質問- Chrome で HTML コードを編集するにはどうすればよいですか?
を押して Chrome で開発者ツールを開きます Ctrl （または 指示 Mac の場合) + シフト + I 。そこから、 を押します Ctrl ( 指示 Mac の場合) +O をクリックして、編集する保存済みソース ファイルを選択して開きます。
- ソースの表示が無効になっている場合、Chrome でページのソース コードを表示するにはどうすればよいですか?
Web サイトで [ソースの表示] オプションが無効になっている場合でも、内部を確認できる場合があります。ブラウザウィンドウの上部から選択します ビュー > 開発者 > ソースを表示 , これにより、Web ページのソース コードがプルアップされます。
- Android デバイスを使用して Chrome でサイトのソース コードを表示するにはどうすればよいですか?
デバイスの Chrome アプリを使用して表示したい Web サイトに移動し、ブラウザのアドレス バーを選択します。テキスト カーソルを左端 (URL の前) に移動し、次のように入力します。 ソースの表示 を押してから、 入力 または選択します 行く 。
Spotifyをdiscordに接続できませんでした
