jsfiddle や cssdesk のようなサイトを使用する場合、要素に適用されるすべての css ルールを 1 か所にまとめるにはどうすればよいでしょうか? 私の CMS には、同じ要素に作用する多数の CSS ファイルがあります。
3 に答える
質問を正しく理解しているかどうかはわかりませんが、自分のサイトに適用されているすべての同じスタイルをフィドルに適用する方法を尋ねていると思います. その場合、jsFiddle の左側のナビゲーションに [リソースの追加] オプションがあります。サイトが公開されている場合は、そこにある css ファイルへの直接 URL を入力できます。
次に、フィドルに入力したhtmlは、実行時に結果に適用されたcssファイルからスタイルを取得する必要があります。
Firefox の組み込みインスペクター (firebug ではありません) を使用して要素を検査します。インスペクターに表示される列で、[計算済み] タブを選択します。
必要なすべてのスタイルを強調表示し、右クリックして [選択範囲をコピー] を選択します。
jsFiddle または CSSDeck に移動し、プロパティを貼り付けて、ルールで囲みます。
h1 { ... ここにコピーしたもの ... }
注: すべてのプロパティの末尾にセミコロンを追加する必要があります。
次の 2 つの答えが思い浮かびます。
1 つ目は、CSS ファイルをラップトップからサーバーのどこかにアップロードするだけです。ルーターからローカル コンピューターへのポート 80 を開くことができる場合は、ラップトップから Web サーバーを実行することもできます。No-IP Freeなどのサービスから IP アドレスへの静的 URL を取得できます。
コンピューターで CSS を構成するときは、SASSやLESSなどの CSS プリプロセッサを使用します。これにはワークフローを少し変更する必要がありますが、長期的に見れば、変更によって Web 開発者としての生活がはるかに楽になることがわかります。SASS と LESS はどちらもバニラ CSS を理解するので、既存のファイルを変更する必要はなく、拡張子だけを変更するだけです。どちらも、他の SASS または LESS ファイルをコンピューターにインポートし、生成された CSS の出力に含めることができます。例として SASS を使用すると、メインの CSS ファイルが という名前
screen.css
の場合、それを に移動しscreen.scss
ます。SASS プリプロセッサは、変更を加えた後、ファイルを読み込んで CSS にレンダリングします。ここで、ファイルに別のファイルを含めるにはscreen.scss
、追加する@import 'newFile.scss';
と、SASS が生成する CSS ファイルに両方が含まれます。screen.scss
とnewFile.scss
。この設計パラダイムに従うと、すべての CSS を 1 つの出力ファイルに保持できるという追加の利点があります。サーバー要求を最小限に抑えるために、すべての CSS を 1 つのファイルに保持することをお勧めします (詳細については、すべての CSS を 1 つのファイルに保持する必要がありますか?を参照してください)。