CSS（スタイルシート）を別ファイルにするメリット

こんにちは
クロスウェーブの鈴木です

さて、外部ファイルにするメリットですが
そこだけを簡単に書きますね

1.CSSが別ファイルになることでHTMLが簡素になりSEO効果がある

2.ページ数が複数になった場合、デザイン要素が別になるので一括で修正〜変更ができる

などのメリットがあります。

こんばんは
アド・プロモートの吉田です。

私は実際に作業者ではありませんので
専門的なお答えが出来なくてごめんなさい。
（最初に謝っておきます）

ですので当社制作スタッフに聞きました！！

結果・・・・
CSSは便利で効率が良くなる分、多少重くなるのは仕方の無い事だ！といわれました。

もし少しでも軽くしたいのであれば
いつも使うものは外部ファイルにして使用頻度が低いものや細かいものは各ページにそれぞれ設置すれば解消できるとの事です。

面倒な作業になるけれど、その分その後のメリットは大きいそうです。

これ以上は聞き出せませんでした。
でもこの後、専門家の方がしっかりとお返事してくださると思いますのでこの辺でゴメンナサイ・・・

あ！それと・・・
ご予算の都合上、専門家にお願いできずに、そして社内で相談する事も出来ずにご自分で勉強し、その結果このサイトにたどり着いたと思いました・・・（違ったらゴメンナサイ）

その頑張りがあればきっと何事も解決できると思いますよ。

良いサイトが完成する事を祈っております。
頑張ってください。

こんにちは。FLOWER GARDENの小澤と申します。
CSSは使いこなせると、便利だし、表現の幅がひろがります!

■CSSのメリット
・多くのHTMLのデザインなどの変更が簡単
CSSを更新するだけで、大量のHTMLも触らずに、デザイン変更できます。

・SEO対策になる
タグが少なくなるなど、HTMLがシンプルになり、その結果SEO対策に一役買います。
上手に利用すると、かなりの効果を上げることができます。

・デザインやレイアウトの自由度が高くなる
HTMLでは表現できないデザインやレイアウトが可能になります。
例えば、FLASHとテキストや画像を重ねて表示させるようなことも可能です。
アイデア次第で、CSSはどんどん活きてきます。

・様々なユーザー環境に対応する
1枚のHTMLで、PCでのアクセス、携帯でのアクセスを分岐させて最適に表示させることもできます。

■現状への対策
・CSSを1つのファイルにする
用途ごとにファイルをわけているようですが、まとめて1つのファィルにできます。
この方がすっきりして管理も楽になりますね。

CSSは初歩的なものから複雑なものまでありますが、基本がご理解できていれば、市販の本を参考に、どんどん理解できると思います。

いろいろ試してみてください!

はじめまして。グラスルーツのオノと申します。「レベルの低い質問」だなんて、気にすることはまったくありませんよ。こちらも（多分、他の方たちも）、質問をいただくことで勉強になっているのですから。

『「フォントサイズ用」「色用」「ヘッダー用」「本文用」と、５個くらいの別ファイルへのリンクを、冒頭に設定しています』と書いていらっしゃるのを読んで、「なるほど、そんな方法もあったか」と思いました。

正しい／間違っている、というのはないと思います。ポイントは、運用しやすいかどうか、書いた人以外の人が見てもわかりやすいかどうか、だと思います。
鎮守さんが書かれた方法以外に、たとえば汎用的な共通部分と、あるディレクトリー配下のみで適用される部分とに分けて、記述を分けるなり、ファイルを分けるという方法もあるかと思います。たとえば本文フォントの指定は汎用的なものであり、あるページに限定したような、ブロック要素Aとブロック要素Bの空きの指定は固有のものということになります（まあ、空きというのも、ある意味統一的であるべきですから、前者扱いとするケースも多いかもしれませんが）。

いずれにしても、CSSファイルを外部ファイルに置くというのは、一般的であり、クロスウェーブの鈴木さんも書いていらしたようにSEO対策として有効だと思います。リンクの記述を書くだけにすれば、検索エンジンに読み取ってほしい重要な情報が、ページの中で下の方にいかなくてすむためです。

以前からこうだったから、そのまま続けるというのではなく、鎮守さんのような疑問を持つことって、どんな仕事でも大切ですよね。そんなことを考えさせられました。

お世話になっております。

業務と並行して作成しておられるのでしょうか？「テーブルタグを無くす」など、相当に玄人好みの勉強までなさっているあたり、とても実直な方なのだろうと思います。


**『.cssを外部のファイルにしたら重くなっているような気がする事の推測』
.htmlに書き込んでおくよりも、+5ファイルを余分に読み込むので、ネットワークが遅い・サーバの設定などによって、重く感じられる場合があります。また、.css/.jsは、全て読み込まないとブラウザが画面を作リ始められないので、ファイルが増えれば描画の開始が遅くなります。

※普通、一度読み込まれた後に変更が無ければ、.cssはブラウザに一時保管されネットを経由せずに再利用されます。ですので、サイト内で使い回される外部ファイルは意味があります。


**『正しい使い方』
文法以外に正しい使い方というガイドラインも無いので、今のように一人で全部こなす開発規模なら、自分が管理・作成し易ければ、それで現実的にベストです。もしアドバイスがあるとすれば、質問内の

> 似たレイアウトのコンテンツが大量にあるタイプのページ
> まとめてレイアウトを変更したいので

に、契機がありそうです。「このスタイルは、ページで必ず使われる統一デザインだから、フォントも色も一つに共通化する方がいいなぁ」とか、「このテーブルは、決まったページでは必ず使うし、専用.cssにできるかな？」など、今でも微妙に感じておられるのでは？

そこで、「ページの部分に対してスタイルを置いていく」のではなく、「トップ以下の階層から、構造化されたカテゴライズ・ページレイアウト」を考えていくと、自然に論理的構造が見えてきて、質問引用部での.cssの使い方・分け方が、自分なりに確立できます。



※質問から予測すると、内製の担当レベルでは、かなり腕達者ですね！上記が少しでもお役に立つと幸いです。

環の小坂です。

複数のＣＳＳファイルに分けている理由もなさそうですから、
まずＣＳＳファイルを一つに統合するんもが一番いいと思います。

（ブラウザ別に分けたいとかの場合はＣＳＳファイルをわける場合もありますが）

基本的には外部の方がよいです。

・ソースがきれいなので、ＳＥＯ的によい。
・一度読み込まれたＣＳＳファイルなので二度目以降は軽くなる。
・メンテナンスが容易。（一つのＣＳＳを変更すれば全頁変わる。）
などがメリットです。

デメリットとして時々あるのが、アクセス数が多かったり、サーバーのスペックが低いと、サーバーが重くなり、ＨＴＭＬだけ読まれてＣＳＳがうまく読まれないという現象もありますが、
それは読み込まれるのに時間がかかるだけの話ですので、あまり問題はないです。

また古いブラウザと外部ＣＳＳに対応していない場合もあるのですが、最近では非対応のブラウザはほとんど使われていません。

はじめまして、マーカーネットです。

皆様の回答にあるようにcssを一つにまとめたほうが、htmlソースが綺麗になるというメリットはあります。
ただ、鎮守さんが用途別にcssを分けたいということであれば、無理にcssを統合することは無いと思います。

htmlからはimport.cssへリンクする。
import.cssから、さらに複数のcssにリンクさせる。
このようなテクニックがありますので、試してみてはいかがでしょうか？

綺麗にコメントアウトなどして、1枚のcssを整理しても、製作者の意図が十分に伝わらないことはよくあることです。
鎮守さんが将来的に、サイト管理を引き継ぐ・・・時などを考えると、font.cssなど一目みて分かるファイルを用意しておくのもメリットはあると思いますよ。

ラスマイルの松本です。

遅ればせながらご回答差し上げます。

メリットについては既に出尽くした感がありますが、会社内でのご担当ということですので、今後のご担当者、さらには社内のWeb運用の効率化を考える面からCSSなどの利用をルール化しておくことをおすすめします。

社内サイトもそうですが、他社へ納品する際などは一定のレベルにてご納品できたほうが良いかと思います。

遅めの回答でスミマセン。

CSSを外部に置くメリットとして、CSS内の画像パスはあくまでそのCSSからの相対位置になるので、そのCSSを呼び出すHTMLやCGIなどがどの階層にあろうがちゃんと表示してくれます。

これ、便利ですよね。

また、CSSを分けるということについてですが、分け方は鎮守さんのように、「フォントサイズ用」「色用」「ヘッダー用」「本文用」というのもアリだと思いますよ。ただし、現在は「テーブルレイアウト」で制作されていることから、この分け方が使いやすいかもしれませんが、今後HTMLを構造化して制作されるようになると（WEB標準）、CSSの分け方は自然と変わって来るでしょう。
例）「モニター用」「印刷用」「共通」など

CSSを１つにまとめるのはコンテンツが増えてくとどうしてもズラズラ長くなって後から編集しにくくなりますし、例えばトップページと下位ページで同じソースの部分（ナビゲーションなど）でもデザインを変えたい場合などに逆に不便になってしまうので、必要に応じて分けることをオススメします。
全体のサイト構成を考えて２〜４つ程度に分けておくと便利です。

こんにちわ 鎮守さん

ウジトモコです。

私もエンジニアではないので、あくまでもデザイナーとしてお答えしたいと思いますが、まずご質問を伺っていると.ｃｓｓのファイルをたくさん作って、
headと/headの中に
link href=font.css" rel="stylesheet" type="text/css"
link href="color.css" rel="stylesheet" type="text/css"
...

と、こんな状態になっているのでしょうか?

たぶん１枚のｃｓｓにいろいろと書いてもそんなに重くはならないはずですので、そういったことになっているかもしれませんね。

最近の「標準」といわれるやり方については、私よりもっとご専門の方がいらっしゃると思いますのでお任せしますが、基本的には、色やデザインを変えるためにｃｓｓを使用する、というのがそもそもの使い方なので、間違ってはいませんよ。

私もいろいろなタイプのコーディング専門の方に、お願いしてみたりしていますが、自分で管理するのであれば、やはりご自身の使いやすいファイルを作れると良いですね。

私自身のお奨めは
タイトル部分やよく使うマージン設定、リンク、フォントカラーなどを一通り用意しておいて、サイトのイメージごとにいっぺんに変えるというやり方です。

こうすると、サイトデザインの印象をいっぺんにがらっと変えられるからなんですけど。

何かあれば、また、どうぞ質問してくださいね。

こんにちわ。ブレスの北窓と申します。

CSS・・・私もHP制作において、まだまだ未熟者ですが、私がしている方法を言いますね。

■基本CSS
HP全体のベース（背景設定や枠組みの設定、H、P、Aタグ等の共通設定など）となるスタイルシートの設定

■コンテンツ共通CSS
コンテンツ共通のスタイルシートの設定

■各々のCSS
コンテンツページで、そのページだけスタイルシートを設定したい時など


こんな感じで、だいたいですが、4〜6つのCSSを外部リンクで設定をしています。
1つのCSSファイルの内容が多くなると、設定している内容が分かりにくくなるので、私の場合は結構分ける方法をしています。

例えばトップページ・・・

link href=base.css" rel="stylesheet" type="text/css" 基本CSS
link href="top.css" rel="stylesheet" type="text/css" トップページだけのCSS

とか、

コンテンツページでは・・・

link href=base.css" rel="stylesheet" type="text/css" 基本CSS
link href="contents.css" rel="stylesheet" type="text/css" コンテンツ共通CSS
link href="pageA.css" rel="stylesheet" type="text/css" このページだけのCSS

など、しています。


CSSの管理は、色々な方法がありますが、たくさん制作をしていくと、自分で管理しやすい方法が見つかると思います。

これからも頑張って良いサイトが完成することを祈っております。

遅ればせながらご回答させていただきます。 FSFIELD 藤田です。

CSSの管理方法はルールを決めて書面に残しておくとあとで確認しやすい
です。

私の場合の管理方法を記載します。

1.HTMLに記載するCSS呼び出しは2行です。

A.link href=import.css" rel="stylesheet" type="text/css" 基本CSS
B.link href=content_●●●.css" rel="stylesheet" type="text/css" コンテンツ毎CSS
Aのimport.css内は下記のとおり記載し、合計5つのCSSを読み込みます。

@import "all.css"; 全体に適用するCSS
@import "header.css"; ヘッダー部分
@import "footer.css"; フッター部分
@import "content.css"; 全体コンテント部分
@import "side.css"; サイドバー部分

このCSSはサイト全体に適用させます。

Bのcontent_●●●.cssは、フォルダ事に名前をつけて適用させています。

メールフォーム用にform.cssを用意するなどしてなるべく細かく分類するルールを
社内で決めて運用しています。

また、正しい記述で問題ないかのチェックには下記のW3C検証サイトで確認したりしています。

カスケーディングスタイルシート(CSS)を検証

ご参考までに。


茨城県ホームページ制作会社 FSFIELD