CSS(スタイルシート)を別ファイルにするメリット - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

法人・ビジネス ホームページ・Web制作 2007/09/04 22:24

初めて質問をします。とてもレベルの低い質問なのでこんな場所で聞いていいものかどうか心配ですが・・・

小さい会社でホームページの担当をしています。予算が無いので私が会社のホームページを作っているのですが、似たレイアウトのコンテンツが大量にあるタイプのページなので、レイアウトをスタイルシートで管理しています。

テーブルタグをなくすとか、そういうレベルには至っておらず、フォントサイズや色、行間の管理とか、テーブル内の隙間を調節したり、ということが主な目的です。

そのとき、まとめてレイアウトを変更したいのでスタイルシートを外部ファイルにして置いているのですが、「フォントサイズ用」「色用」「ヘッダー用」「本文用」と、5個くらいの別ファイルへのリンクを、冒頭に設定しています。

なんだか逆に、重くなってしまっているような気がするのですが、この管理方法に問題は無いのでしょうか。またそもそも、このような使い方はCSSの正しい使い方といえるのでしょうか。

素人な質問で申し訳ないのですが、専門家の皆様のお知恵をいただければうれしいです。

鎮守さん ( 東京都 / 男性 / 26歳 )

回答:12件

小坂 淳 専門家

小坂 淳
ウェブ解析士マスター

- good

一つの別ファイルにすればどうでしょうか?

2007/09/05 08:46 詳細リンク
(5.0)

環の小坂です。

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

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

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

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

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

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

評価・お礼

鎮守さん

ご意見ありがとうございます。
アクセス数はあまり多くないはずなので、やはりサーバーがあまりいいものではないというのは問題でしょうか。手間とお金と速さのバランスを考えたいと思います。
ブラウザの古さは考えたことがありませんでしたが、、、これは忘れてしまおうと思います。。
ありがとうございました!

回答専門家

小坂 淳
小坂 淳
(東京都 / ウェブ解析士マスター)
株式会社環 
03-6892-3080
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

お客様と一緒にウェブサイトの効果を高めていきます。

創業以来、「使いやすいウェブサイト」「PDCAサイクルを回し、常に向上するウェブサイト」を提案しています。アクセス解析、効果測定で問題点や改善点を発見し、ウェブサイトの集客・売上アップを支援するウェブ解析士(webアナリスト)として活動します!

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
ウジ トモコ

ウジ トモコ
アートディレクター

1 good

1ファイルにいろいろ設定できます

2007/09/05 00:50 詳細リンク
(5.0)

こんにちわ 鎮守さん

ウジトモコです。

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

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

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

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

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

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

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

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

評価・お礼

鎮守さん

headと/headの部分、まさにその通りの使い方です。デザイナーの方にデザイン的には間違っていないと言っていただけて自信が持てます、ありがとうございます!
サイトのイメージをいっぺんに変える、というのはうまく出来ないかなぁと考えていまして、季節ごとに季節っぽい色を部分的に使えたら綺麗だろうか、とか思っていました。
ありがとうございます!

北窓 喜一郎

北窓 喜一郎
Webプロデューサー

- good

CSSの分け方は・・・

2007/09/05 03:55 詳細リンク
(5.0)

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

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

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

評価・お礼

鎮守さん

真夜中にありがとうございます!
私の管理方法が、ほぼ北窓様の方法に近く、プロの方にも大丈夫だといっていただけると心強い限りです。
ありがとうございました!

藤田 匡史

藤田 匡史
Webプロデューサー

- good

私のCSS管理方法

2007/12/07 01:46 詳細リンク

遅ればせながらご回答させていただきます。 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


簡単にメリットを紹介

2007/09/05 00:01 詳細リンク
(5.0)

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

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

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

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

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

評価・お礼

鎮守さん

こんなに早く回答をいただけてうれしく思います。
現状私が考えていたのは(2)ですね。なるほど、(1)のような効果もあるのですね、これは考えていませんでした。
どうもありがとうございます。


重くなるのは仕方が無いそうです。

2007/09/05 00:21 詳細リンク
(5.0)

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

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

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

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

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

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

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

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

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

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

評価・お礼

鎮守さん

スタッフの方からのご意見まで頂きありがとうございます!
現状使用頻度が低いものも全てCSSファイルに突っ込んでいましたので、確かに底でしか使わない記述まで外に置くことはないですね。
・・・結果このサイトにたどり着いたのはまさにご指摘の通りです。素人の方ではなくてプロの方が集まっている場だったので、どきどきしていたのですが、ありがとうございました!


メリットと現状への対策

2007/09/05 00:33 詳細リンク
(5.0)

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

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

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

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

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

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

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

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

評価・お礼

鎮守さん

いろいろな使い方、ありがとうございます。
デザインの自由度に関しては今まさに勉強中というところですので、がんばって覚えていきたいと思います。
多くの環境に対応するというのは、なるほど、という感じです。携帯電話に対応させる必要が出てきたらじっくり考えたいと思います。
ありがとうございました!


いい質問だなぁ〜!

2007/09/05 00:41 詳細リンク
(5.0)

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

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

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

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

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

評価・お礼

鎮守さん

どきどきしながら質問をさせてもらっていましたので、安心しました、すごくうれしいです、ありがとうございます!
今の使い方が、使いまわせる用と、個別用をごちゃ混ぜに突っ込む用、のような形で使っているので、大体間違った使い方ではなかったようなので安心しました。
本当にありがとうございます!


現状からの判断なら、自分がやり易い方法でOK

2007/09/05 04:55 詳細リンク
(5.0)

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

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


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

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


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

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

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

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



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

評価・お礼

鎮守さん

まだまだ勉強することが多いのですが、うれしいです、ありがとうございます!
私の会社のホームページが置いてあるサーバーは、個人が使うような安価なレンタルサーバーで、あまり機能も高くないので速度は遅いかなぁとおもいました。
いろいろと、考えて行きたいと思います。
どうもありがとうございました!


import.cssを作りましょう

2007/09/05 11:43 詳細リンク

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

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

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

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


会社内でのご担当ということですので

2007/09/05 18:17 詳細リンク
(4.0)

ラスマイルの松本です。

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

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

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

評価・お礼

鎮守さん

ご意見ありがとうございます!社内で共有をすることを考えますと、見た目が分かりやすいのはもちろんですが、ルール化することも大切ですね。なるほど、ありがとうございました。


CSSを外部に置くメリット

2007/09/09 16:08 詳細リンク
(5.0)

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

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

これ、便利ですよね。

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

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

評価・お礼

鎮守さん

画像ファイルへのリンクは気づきませんでした。現状、背景画像などはCSSから場所を指定しているのですが、確かにこれはすごく便利ですね。何気なく使っていましたが、改めて専門家の方に指摘していただくと、安心して使って行くことができます。ご意見ありがとうございました!

質問者

鎮守さん

import.cssとはどのようなものでしょうか?

2007/09/10 20:23 固定リンク

ご意見ありがとうございます!
管理を引き継ぐことを考えると、確かに自分以外が見ても分かる内容にしないといけないですね。

ところで、「import.css」とはどのようなものなのでしょうか。単純に他の外部CSSファイルへの中継用CSSと考えてよいのでしょうか。調べてみたのですがちょっと分かりにくく、質問をさせていただきました。。

鎮守さん (東京都/26歳/男性)

(現在のポイント:3pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

SEOに適したコンテンツのまとめ方 こつこつがんばさん  2014-01-25 03:37 回答1件
ウェブ制作契約を打ち切られました。 tg201さん  2012-06-01 23:05 回答2件
グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)