開発者がクロムでその場でCSSを変更しているビデオがたくさんあるようです。同じことを試しましたが、クロムではコードを変更できませんでした。スタイルシートに書き込めません。
これを行うための特定の設定はありますか?親切に助けてください。
編集: CSS を編集するには、要素を右クリックし、要素の検査を選択します。コンソールが開きます。要素の ID を選択し、Resources の style.css に移動して、CSS を変更しようとしました。そこに書くことは許されません。
開発者がクロムでその場でCSSを変更しているビデオがたくさんあるようです。同じことを試しましたが、クロムではコードを変更できませんでした。スタイルシートに書き込めません。
これを行うための特定の設定はありますか?親切に助けてください。
編集: CSS を編集するには、要素を右クリックし、要素の検査を選択します。コンソールが開きます。要素の ID を選択し、Resources の style.css に移動して、CSS を変更しようとしました。そこに書くことは許されません。
あなたは間違っています...リソースパネルはライブ編集用にありません.HTML要素に関連付けられたcssを変更したい場合は、その要素を右クリックすると、右側のパネルに関連付けられたcssスタイルが表示されます.選択した要素。そのルールを編集すると、変更がリアルタイムで表示されます。
動画をチェックして Chrome デベロッパー ツールの基本を学ぶことができます。その後、さらに詳しく知りたい場合は、次の質問をチェックしてください。
Google Chrome
これは、 Stylebot と呼ばれる優れたツールです。
これで、スタイル シートを変更し、独自のスタイルを任意の Web サイトに保存して、独自のカスタム Web サイト テーマにすることができます。
Stylebotのリンクはこちら
それをチェックして、ケーキにアイシングをかけるのは無料です!
CSS ファイルはブラウザのローカルに保存されるため、独自の Web サイト プロジェクトでの作業には使用しないでください。
Chrome では、DevTools の [ Elements ] タブの [ Styles ]ペインで「all.css:1」などをクリックすると、 DevTools の [ Sources ] タブが表示されます。リモート サーバー上のコードを見ている場合、このソース ビューの CSS ルールは ( Firefox*のライブ編集スタイル エディタータブとは異なり) ライブ編集できません。
「inspector-stylesheet」の表示 -- Elements タブの Styles ペインの「+」ボタンで作成した新しいスタイル ルールを含む一時的なスタイルシート。新しいルールの「inpector-stylesheet:1」リンクをクリックすると、作成した一時ルールの編集可能なソースに移動します。
永続的なローカル ワークスペースを表示します。これを設定するには、「DevTools ワークスペースを使用して持続性を設定する」で説明されているいくつかの追加手順が必要です。基本的に、インターネット上のバージョンの代わりに使用するように Chrome に指示するローカル コピーを保存できるローカル フォルダーをマシン上に作成します。そのリンクの手順を参照してください。そこにあるように、「ローカルサーバーではなくリモートサーバーからファイルをマッピングしている場合、ページを更新すると、Chrome はリモートサーバーからページをリロードします。変更はディスクに保持され、次の場合に再適用されます。ワークスペースで編集を続けてください。」(そのため、同じスタイルシートを使用する別のページを更新またはナビゲートした場合は、ソース ローカル CSS ファイルにスペース文字を入力するだけで、変更が再度適用されていることを確認できます。)
* Firefox で、リモート Web ページの要素を右クリックして [要素の検査] を選択し、[インスペクター] タブの [ルール]ペインで、右側の「all.css:1」などのリンクをクリックすると、ローカル ファイルにマップする必要がある Chrome の要件とは対照的に、すぐにライブ編集できる [スタイル エディター] タブに移動します。これは、Chrome の DevTools に同じ動作を期待している場合、混乱を招く可能性があります。
Stylebot に似た別の Chrome 拡張機能はCode Colaです。要素を選択できるインスペクターと、CSS を手で入力する必要のないビジュアル エディターがあります。生成された CSS コードを表示するには、ツールバーの中括弧アイコンをクリックします。