ウェブページ機能の背後にあるソースコードを見つける

Question

私はウェブ開発にはまったく新しく、異なるウェブサイトを見るのを馬鹿にし始めています。私は最近、StarCraft remastered pageに出くわしました。そして、ページの途中には、あなたが人のスライダーを前後にスライドさせて、古いグラフィックとシーンの新しいグラフィックを見せる「ウィンドウ」があります。私はこれが本当にきれいだと思って、この効果をどのように達成するのかのソースコードを見つけることができるのだろうかと思っています。 Here is the image of the described "window".

また、別のサイトで見つけた機能を再作成しようとするのは非倫理的ですか？私はこれに本当に新しく、何が大丈夫か分かりませんし、私は自分がどのようにそれを達成したかを見ずに自分自身でその特徴を作り出すことはできないだろうとは思いません。

Answer 1

これはまったく非倫理的ではなく、ウェブ開発者が新しいものを学ぶ方法です。一般的に、ブラウザの開発ツールはあなたの親友になるはずです。

あなたが提供した例に関しては、本質的にこれは「分周器」または「分割パネル」と呼ばれるUIコントロールで実現できます。また、そのような機能を提供する多くのプラグイン（ex split.js）を見つけることができます。これとスタイリングのためのCSSのビットで、あなたはスタークラフトページで好きなものと同じ効果を達成することができます。

Answer 2

最新のブラウザーでは、画像上でマウスの右ボタンをクリックし、「Inspect」、「Inspect Element」、またはその変形をブラウザーとバージョンに応じてクリックします。私はChromeの最新バージョンを使用していますが、これはちょうど「Inspect」です。

これにより、ウェブサイトまたはウェブアプリケーションのフロントエンドをより深く見るためのデベロッパーツールが開きます。