CSSを楽に変更する方法を紹介します！【CSS更新の効率化】

タイトルの通り、この記事ではCSSを楽に更新する方法をご紹介します。

少しでも、「CSSの修正が面倒。。」と思っている方々の助けになれば幸いです。

※この記事はGoogle Chromeでの作業を想定しています

Contents

仕事でCSSを修正する場面を想定します。

この場合、より効率よく仕事を進める（CSSを修正する）には、以下の３つの要素が必要です。

この3つの要素を満たすために私が考えたのが以下の手順です。

この手順で作業を行えば、より効率よくCSSを更新することができます。

実際に作業しつつ手順を確認していきましょう。

まずはデザインを変える対象のページをブラウザ（※Google Chromeを想定）で開きます。

ブラウザでページを開いたら、開発者ツールを表示してください。（Macの場合はoption+command+jで開けます）

開発者ツールを表示したらその中からElementsのタブを選択してください。

左上にある「矢印マーク」を押して、デザインを変える対象のHTMLを選択します。（今回はヘッダーを選択）

すると、「Styles」のタブにこのHTML要素に適用されているCSSスタイルが表示されます。

この部分を修正することでデザインの変更が可能です。

さらに、変更自体も即座に反映されるため、いちいちリロードし直す必要もありません。

今回はヘッダーの背景色を変えてみます。

CSSの修正が終わったら、Sourcesのタブに移動して今回変更したファイルを選択します。

このファイル（app.css）には、先ほどStylesで修正した内容が全て反映されています。

全体をコピーします。（command+a）

ローカルのCSSファイル（今回はapp.css）に全体をペーストします。

差分を見てみると、しっかりと変更が反映されていることが分かります。

今回は修正が容易な箇所だったためメリットが際立ちませんでしたが、変更箇所が複数ある場合や複雑な構成になっている場合はとても便利です。

ぜひ参考にして頂けると幸いです。

CSSを楽に変更する方法まとめ

今回はCSSを楽に変更する方法を紹介しました。

以下の手順を踏めば、CSSファイルを効率よく更新することができます。

最後まで読んでいただきありがとうございました。

この記事があなたの作業効率upに繋がれば幸いです。