CSSをページごとに分けるために複数のHTMLページでやったこと

Webサイトを作成するデザインに必要なCSSは外部のCSSファイルとしてフォルダに配置することができますが、フォルダやファイルの構造にルールがないため、Webサイト作成の仕様や作成者によってCSSを1つにまとめている場合やページごとに分けている場合などの違いがでます。

その違いがあるなかの一例になりますが、CSSファイルを1つにまとめたCSSフォルダの中で、ページごとに分けてスタイルの編集や管理ができるようにフォルダ構造を作り直したい場合があったので、作成でやったことをまとめておきます。

全て独学なので間違えがあればご指摘ください。

1. CSSをページごとに分ける目的
2. CSSとHTMLをページごとに分ける構造作成
- 2.1. 複数のHTMLページをルートフォルダにまとめる
- 2.2. 分割してたCSSファイル用のディレクトリを作成
3. ページごとに分かれたCSSを1つにまとめる
4. ページごとにファイルパスを指定し直す
- 4.1. CSSのファイルパスを指定し直す
- 4.2. 複数のHTMLページのリンクを変更
5. ページごとに指定したCSSとHTMLの表示確認
6. まとめ

CSSをページごとに分ける目的

「CSSをページごとのスタイルに全て分けたい」「編集や管理がしやすいようにしたい」ということが大きな目的です。

CSSをページごとに分ける目的の背景には理由があり、限られた理由かもしれませんが、記事の下書きやwebページのデザインを練習して溜め込んだhtmlファイルとcssファイルが全て独立したフォルダになって作りっぱなしなので、一回一回該当のファイルを開くのに迷子になる事が増えてきました。

そのため一つのCSSフォルダの中に複数のcssをまとめて、ページごとに分けるスタイルの編集や管理がしやすい、ひとまとまりにしたHTMLページにしようと思います。

CSSとHTMLをページごとに分ける構造作成

はじめに、CSSとHTMLをページごとに分けるためにファイルとフォルダの構造を作成し直して土台を作っておきます。

CSSでスタイルを適用してる複数のHTMLファイルのフォルダを1つにまとめるルートフォルダを作成して分かりやすい構造を作成するとともに、分割してスタイルしている複数のCSSファイルは、CSS専用のフォルダを作成してCSSをまとめておきます。

複数のHTMLページをルートフォルダにまとめる

ルートフォルダがない複数のHTMLページの場合は、各フォルダにHTMLファイルとCSSファイルが1セットで複数ある状態になってしまうのでフォルダが増えるごとに管理や編集がやりずらくなります。

私の場合はまだ4つのフォルダですが、これから増え続けるのは確実なので今のうちから管理しやすくしておこうと思い立ちました。

まずは HTMLファイルとCSSファイルの1セットの中のどれか1セットからトップページ用のHTMLファイルとして使用できそうなファイルを選んでルートフォルダにします。

私の場合を例にするとpracticeフォルダをルートにしています。

このときルートフォルダに選んだフォルダの中には、トップページ用に選んだ以外のフォルダを入れておきます。

こうした構造で作成するだけでルートフォルダからのフォルダ構造は、まとまりを持った構造に近ずきます。

ルートフォルダにまとめておくのは当然の作業なのですが、先述しているようにひとつのHTMLファイルに対して、CSSファイルも1つのようになって勉強に使用していたファイル達なので、Webサイト制作なら当然の作業からやる必要がありました。

分割してたCSSファイル用のディレクトリを作成

複数のHTMLフォルダの上階層にルートフォルダを作成すると、ルート下の階層にあるHTMLフォルダの中には各ページを表示するHTMLファイルと、そのスタイルを適用するためCSSファイルが分割した構造で作成できます。

今回の目的は「CSSをページごとに分けるため」なので、このままCSSファイルをルート下のフォルダの各HTMLファイルと一緒に配置した構造にしておくのも有りかと思います。

ですがCSSファイルが分割してるのを新しくCSSフォルダを作成して、分割してたCSSファイル用のディレクトリを作成します。そうすると分割してるCSSを1つにまとめて管理しやすくするためのCSS専用のディレクトリにできます。

ページごとに分かれたCSSを1つにまとめる

CSS専用のディレクトリを作成した中に分割してるCSSファイルを 1つにまとめて管理や編集をしやすいようにしておきます。

ルート下の階層の各ページのフォルダに入っているCSSファイルだけを作成したCSSフォルダにコピペして、ページごとに分かれたCSSを1つにまとめます。CSSファイルをまとめたらコピーした元になった各CSSファイル達は削除します。

そしてルートフォルダにしてトップページにしたHTMLファイルとセットになってるCSSファイルもCSSフォルダに入れます。これですべてのHTMLファイルのCSSファイルを1つのフォルダで管理できるようになりました。

複数のCSSファイルを管理しやすいように専用フォルダにまとめているだけなので、各HTMLページのCSSは相対パスでリンクを変更することでCSSの編集は今までと同じくページごとに分けたスタイルを適用できます。

ページごとにファイルパスを指定し直す

フォルダ作成やファイル移動することでCSSもHTMLもファイルの編集や管理がしやすい1つにまとまった階層フォルダが完成し、ページごとに分けたCSSにすることもできました。

ですがフォルダの階層を移動したことでHTMLのheadでCSSの外部ファイルのリンクが切れています。他にも複数のHTMLページにメニューがあり、遷移しているHTMLページがある場合は、そのファイルパスも切れています。

そのため、CSSフォルダにまとめた複数のCSSファイルを、指定してるHTMLページごとにスタイルが通るようにCSSファイルのファイルパスを指定し直し、複数のHTMLページのリンクも変更します。

CSSのファイルパスを指定し直す

CSSをページごとに分けているので、HTMLファイルごとにheadに記述しているlink要素のhref属性で適用したいCSSファイルの位置の相対パスを指定し直します。

以下の画像とコードは今回、私がCSSをページごとに分けたときの相対パスなので参考程度にしてください。

トップページのstylesheetを指定し直した例

<link rel="stylesheet" href="./css/style.css">

trainingというページのstylesheetを指定し直した例

<link rel="stylesheet" href="../css/style-training.css">

CSSファイル自体は、それぞれのHTMLページごとに分かれてはいますが、1つのフォルダでまとめて管理しているのでHTMLファイルを入れてるフォルダの階層がどれも同じ階層なら、CSSファイルの相対パス指定もトップページ以外は同じなので相対パスの指定し直すのが簡単かと思います。(でも苦手なので少しハマりました..)

複数のHTMLページのリンクを変更

複数のHTMLページごとにメニューがあって、他のHTMLページとリンクを繋いで遷移している場合は、繋いだHTMLファイルにてフォルダ階層にあわせてファイルの相対パスを指定し直してリンクも変更します。

<ul class="menu-list">
    <li><a href="training/training.html">下書き</a></li>
    <li> <a href="table/table.html">デザイン</a></li>
    <li><a href="counter/counter.html">ヒント</a></li>
    <li><a href="">サンプル</a></li>
    <span class="clear"></span>
</ul>

上記の画像とコードは今回CSSをページごとに分けるために使用したものを例にしました。作成するディレクトリ構造はそれぞれのWebサイトにより違うので、階層の確認をしてリンクが通るように変更してください。