計画的なCSSファイルの書き方（カスケ―ディングによるデザインコントロール）

計画的なCSSファイルの書き方

CSSのカスケ―ディングの仕組みを別ページで説明していますが、実際に新規でホームページを作る際はどのようにCSSを設定していくべきなのでしょう。

今回は基本的なCSSファイルの設置の仕方、カスケ―ディングの流れをご紹介します。

例えば、制作するホームページがbootstrapのシステムを採用している事を前提としましょう。bootstrapについては別ページをご参照下さいね。

CSSをコードを書く順番

CSSコードを書く位置（上からの順番）によって優先順位が変わる事は以前説明しました。

これはHTML内でも同じでCSSファイルをheadタグ内に記述して読込をする際、その読込する順番によっても優先順位が変わってきます。

CSSコードの書き方手順

<!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- RESPONSIVE STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">

レスポンシブデザインについては別ページに詳しくご紹介をしますのでご覧ください。

ベースファイルbootstrap.cssの読込

bootstrap.css（以下bootstrap）を使ったレスポンシブデザインサイトを設計する場合、まずは基本的な枠組みを構成するbootstrapを一番上に書きましょう。

以前お話した本流・中流・支流のカスケ―ディングでいきますと「本流」部分の設定になります。

次に書く中流や支流など優先順位が高いCSS設定に上書きされない限り、ここで最初に設置したbootstrapの設定がそのまま反映されることになります。

特にbootstrapの一番の特徴であるグリッドシステム部分はそのまま反映される事が多いと思います。

固有デザインstyle.cssの読込

次にサイト自体の固有デザインスタイルがstyle.cssに記述されますので、それが先ほどのbootstrapの次に読込されます。

これによりサイトのテイスト（色合いや雰囲気）がある程度決定されます。

ここに書かれている設定が上部で読み込んだbootstrapの設定とバッティングする場合、カスケ―ディングシステム（優先の判定）により、後から書いたstyle.cssの設定が優先される訳です。

同じ優先度であれば後から書いた方が優先されるルールです。

レスポンシブルデザイン向けresponsive.cssの読込

最後にresponsive.cssの読込です。

これはレスポンシブデザインを構築する際に必要なPC設定・iPad設定・スマホ版設定のそれぞれを切り分けするために必要です。

bootstrapもstyle.cssも本来はパソコン版の設定がメインに記述されています。

bootstrapはスマホ設定まで記述されていますが、あくまでデザイン的な面での事を意味し、ここでは無視しています。

responsive.cssは表示画面の幅の違いによってその映し方を変更するための設定です。

基本的には一番最後に書かれる「支流」扱いのファイルである事がほとんどです。

最終的に一番優先されなければならないからです。

メディアクエリによる制御

style.cssまでに作られたデザインルールを元に、表示モニターごとに条件分岐をさせて設定します。

など様々な設定を書く事が出来ます。いずれも条件分岐（画面幅ごとのメディアクエリ）による設定です。

「支流」としての優先事項として、今までの設定を条件別に上書きしていく事になります。

パソコンの場合はほとんど上書きをせずstyle.cssまでの設定が反映されます。

そしてiPadやスマホで閲覧した場合に、該当するメディアクエリの箇所が上書き設定・選択されるようになるのです。

カスケ―ディングシステムの一番のメリットは、設定を一から全て書かなくても部分的に違う部分（流れの違う滝部分）だけを反映させる事が出来る点です。

レスポンシブデザインはそれをうまく使った素晴らしいシステムだと思います。

あわせて読みたい関連記事

読み込むCSSのファイル数はサイトで違う

以上3つの構成例で説明をしましたが、実際にはもっと数多くのCSSファイルが読み込まれる事があります。

5種を読み込んでいる例

<!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- RESPONSIVE STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- COLOR STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/color.css">

このcssの読込数そのホームページ設計によって変わります。

他社が作ったサイトを更新する場合、まずはこの部分を確認する事でおおよそどのようなCSSの設計になっているのかがわかりますね。

上記で2番目に読み込まれているのはfont-awesomeで、ホームページの中でよく使われるアイコンのデータをまとめたものです。

これを読み込んでおくと、指定したコードタグを書く事でいろいろなアイコンを表示させる事ができるようになり、大変便利です。

色指定専用のCSSを分ける

それから5番目に読み込まれているのがcolor.cssで色設定専門のCSSファイルです。

ホームページにはよくメインのキーカラーとして一番多用されている「色」があると思いますが、そこを一括管理しているファイルです。

そのcolor.cssの色指定を変更するだけでキーカラーとなっている色部分が一発で変わります。

あえて5つの例も挙げましたが、基本的にホームページはCSSを読み込む数で見た目が変わったりはしません。

当サイトのCSS読込

CSSファイルの数を多くする分、むしろ大変になるようにも思われます。

でも制作業者としましては、CSSファイルはカスケ―ディングシステムを最大限に発揮できる様、その役割ごとに分けるべきだと思います。

CSS設計ファイルは整理整頓しておくのが業者の制作品質です。

本来WEBサイトはクライアント様のものです。クライアント様に所有権がある限り、制作した業者のものではございません。

ですので当然ホームページを管理を今までと違う業者が担当する事もあります。

そういったホームページ管理の移転は、盛況になると思われる「サイト売買」の観点から見ても今後頻繁に発生してくると思われます。

管理がしやすいサイトを心がける

その場合先ほどのCSSファイルの整頓ができているサイトは非常に管理がしやすく、業者にとっても大変助かるはずです。

先ほどの5つのファイルは極端な話、書く位置に注意をしてさえいれば1つのcssファイルにまとめていても問題は無いのです。

1つのファイルに書ける事をあえて3・5個に分けて書く訳ですから手間は掛かります。

それをあえて基本ファイル・スタイルファイル・レスポンシブファイル・色ファイルに分けているからこそ、他の担当者が取り扱いしやすく管理がしやすくなるのです。

カスケ―ディングシステムを最大限に活かす事は管理品質につながる

他人がもし全ての設定を思いつくままに書いてある一つのCSSファイルに遭遇したら、どこに何が書いてあるのかを把握するだけでも膨大な時間の消費になります。

ホームページの見た目には変わりはないのにあえてファイルが整頓されている、そこに制作担当者の品質が隠れていると思います。

他の人が見てもすぐにわかる構成に気を付ける

他の誰が触ってもわかりやすいように設計する事が本来カスケ―ディングシステムの醍醐味ですし。

ですのでCSSファイルはそのジャンルごとに分けて整頓をしておくべきだと考えます。

当然私も新規サイト制作時はその様にしています。他の誰に見られても大丈夫なようにです。

別の方が制作したものを私が更新する場合も、新しい読込ファイルを作ってそこに設定しています。

自分が変更をした箇所の履歴として残す事にも利用できますよね。

一押し人気コーナー紹介