通常、Webページを編集するときは、Adobe Dreamweaver、CoffeeCup、Bluefish、または他の開発ツールなどの特定の編集ツールを使用します。 しかし、ブレーンストーミングをしている場合や、ライブページで何か試してみたい場合はどうでしょうか。 選択したツールでページのコピーを作成し、それをいじることができます。 または、Webブラウザー内で実行できます。 このチュートリアルでは、ブラウザでWebページを編集する方法を示します。
開発者ツールと呼ばれるFirefoxは、Inspect Element機能を呼び出しますが、ChromeはInspect要素を呼び出します。 いずれにせよ、それはブラウザがあなたのデザインの輝きを覗き見、それを動かすコードを見る方法です。 この機能は非常によく知られており、多く使用されています。 それほどよく知られていないのは、そのコードをその場で変更する機能です。
行った変更は保存されず、ライブには影響しません。 開発者ツールでページをロードしたくない場合、これは実験のためのきちんとした方法です。
ブラウザでWebページを編集します
Dreamweaverとそのようなツールには、さまざまなブラウザーでデザインがどのように見えるかをシミュレートするブラウザーエミュレーターが組み込まれています。 優れているとはいえ、常に正確であるとは限らず、サイトを立ち上げるときに、開発者ツールで見た目がスタンドアロンのブラウザーでわずかに異なっていることがよくあります。
通常、内部Webサーバーでサイトを起動し、この理由でライブで起動する前にブラウザーでテストします。 ページが既に公開されている場合、または何かを試してみたい場合は、コピーして開発ツールにロードする必要はありません。ブラウザの開発者ツールを使用するだけです。
Firefoxを使用しているので、その使用方法を紹介します。 ただし、Chromeはほぼ同じです。
- ブラウザで実験するWebページを開きます。
- ページ上の任意の場所を右クリックして、「検査」を選択します。
ページが2つに分割され、新しいペインが下部に表示され、コードが表示されます。 このコードは、選択したページの原動力です。 下部のタブの上部にあるタブからさまざまなページ要素にアクセスできます。 たとえば、Firefoxにはインスペクター、コンソール、デバッガー、スタイルエディターなどがあります。
下のペインの行にカーソルを合わせると、Webページのさまざまな部分が強調表示されます。 ハイライト中に表示されるコード行は、ページのその部分に影響を与えるコードです。
- ページの外観を試してみたい場合は、スタイルエディターを試してください。
- ページのしくみを試してみたい場合は、コンソールまたはアクセシビリティを試してください。
- バグを破棄したり、問題を解決したい場合は、コンソールまたはデバッガーを使用してください
パフォーマンスはオンサイトSEOには役立ちますが、メモリ、ネットワーク、ストレージはそれほど使用されません。
開発者ツール内を好きなだけいじることができ、サイトに影響しないことを忘れないでください。 個々のブラウザでのページの表示方法に変更が加えられるだけで、Webサイト自体には影響しません。 ツールを閉じると、すべての変更が失われます。
ページを変更する
これで、実際のWebサイトに影響を与えずに好きなものを変更できることがわかったので、少し楽しんでみましょう。 編集するページ上の要素を見つけます。 フォント、フォントの色、背景画像など、好きなものを変更できます。 この例では、バナーの見出しのフォントの色を変更します。
- 変更する正確な要素を右クリックして、「検査」を選択します。
- 「タイトル」または「H1」のいずれかの行を強調表示して、テキストが上部ペインで強調表示されるようにします。
- 左側の2つのペインに移動して、フォントの色を見つけます。
- 値を別の値に変更するか、色のドットを選択してセレクターを使用します。
変更が完了すると、変更が動的に表示されます。 色、サイズ、フォント、背景、およびフォントに関するすべてを変更できます。 作業を保存することはできませんが、そのセッションの変更は残ります。
アイデアがあり、すべての開発アプリを起動する前にすばやくチェックアウトしたい場合に理想的な、ページに関するすべてを変更できます。 あなたがしなければならないことは、あなたが行った変更と、ここでそれらを保存できない場所を覚えていることです。 スクリーンショットを撮るか、変更を記録し、開発者ツール内でそれらを複製して、それを維持する必要があります。
ブラウザでWebページを編集することは、ページを実験したり、ページを操作したりするのに最適な方法です。 また、高価な開発者ツールを購入することなく、Web開発について少し学ぶこともできます。 これで、遊びに行く方法を知っています！
