【CSS】長期的な開発を意識したCSSファイルの扱い方を学ぼう

初心者がやりがちなファイルの管理方法としてよくあるのが、要素ごとに分けないという管理の仕方です。 以下の画像がその例です。

このようなファイル管理方法だとどんなことが起きるかを考えてみます。

ファイル全体が見にくい

ファイル全体が見にくいと時間という面でデメリットがあります。

コードを修正したい時にそのコードがどこにあったかを探すのに手間がかかります。

このような小さな手間が非効率化へと繋がります

また全体の構成としても綺麗ではないです。

Yama

私がプログラミングを学び始めた頃はよくこんなことになっていました。
しかしプログラミングを学び続けることで今後のためになるファイル管理方法を見つけました。

今後を想定したファイル管理方法として1番なのは、

フォルダを作成し管理することです。

それぞれを意味あるファイルの仕分けをすることで

効率的に開発を進めることができます。

では実際に改善していきましょう。


articles, components, inq, privacyフォルダを作成します。

以下の画像が改善した後のファイル管理方法です。

フォルダで管理することでこんなにも見やすくなりました。

ここで注目していただきたいのが、「components」フォルダです。

全体のサイトを通して、共通するデザインがある場合はcomponentsフォルダに入れて管理することをお勧めします。

そうすることで純粋なHTMLとCSSでWebサイトを開発する際はとても管理が簡単になります。

以上が今後を想定したファイル管理方法でした。

CSSファイルをcomponentsフォルダで管理することで「ここを変更したいな」という時に共通しているCSSファイルを変更するだけで全体に反映されるので便利です。

関連記事

【VS Code】プログラマーに人気なコーディングツールの使い方を初心者向けに解説

2026/03/20

VS Codeはプログラミングやアプリ開発をする上で多くのエンジニアが使用している人気のコードエディタです。 今回はVS Codeを初めて使うという場合にどの部分でコードを書けばいいのかや、どんな設定をすればいいのかなど基本となる部分を解説していき...