CSSの使い方の区分けについて教えてください。


HTMLでCSSを使用する際なのですが、
HTMLファイルにCSS直書きと、
CSSの内容を「.css」ファイルから読み込んで使用する場合とでは、
メリット・デメリットにはどのような区分がありますでしょうか?


【HTML直書き】
 ●メリット
  ・CSSの読み込みタグを使用して、CSSファイルを読み込まずとも、
   CSSをベタ書きしてCSSのデザインを反映することが可能。
 
 ●デメリット
  ・ソース量が多くなってしまう
  ・閲覧時にユーザーにスタイルの内容が見られてしまう


【CSS読み込み】
 
 ●メリット
  ・HTMLファイルに対するソース量が少なくて済む。
  ・一度作成したCSSを使いまわす事ができる。
  ・Webページ閲覧時にCSSの内容を見られないようにできる(?)

 ●デメリット
  疑問:考えてみたところ「CSSファイルを作成する手間」ができることと、
     HTMLファイル内で <link rel="stylesheet" type="text/css" href="○○○.css"> を入力して、
     「CSSファイルを読み込む手間」が出てくるだけな感じなのですが、何か他にデメリットってあるのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/11/25 00:06:10
  • 終了:2008/12/02 00:10:03

回答(5件)

id:van-dine No.1

van-dine回答回数108ベストアンサー獲得回数112008/11/25 00:43:28

ポイント20pt

その考えで合っていると思います。

あと、最新のXHTML(HTMLをXML風に拡張したもの)では、

<span style="~">

は非推奨ですし、styleタグを使う方法は

<style type="css">
<![CDATA[
  span : ~
]]>
</style>

と面倒な書き方になるので、外部ファイルで指定することをお勧めします。

↓ダミー

http://q.hatena.ne.jp/1227539167

id:ThinkThink

ご回答ありがとうございます。

XTHMLは使ったことはないのですが、

」いうのは非推奨(正常に動作するかわかりません?ということですよね。)

知りませんでした。

> <style type="css"></p> <p>> <![CDATA[</p> <p>> span : ~</p> <p>> ]]></p> <p>> </style>

確かに面倒な書き方ですね…汗


外部読み込みであれば変わらないということなのですね。

2008/11/25 21:38:29
id:hijk05 No.2

hijk05回答回数1307ベストアンサー獲得回数232008/11/25 11:29:16

ポイント20pt

>・Webページ閲覧時にCSSの内容を見られないようにできる(?)

みれます。


【CSS読み込み】

メリット

・管理がしやすい

・一度読み込んだCSSはキャッシュされるので、CSSを使いまわす場合は読み込みスピードアップ

http://q.hatena.ne.jp/answer

id:ThinkThink

ご回答ありがとうございます。


見ることができるのですか(驚)

確認してみます。


「一度読み込んだCSSはキャッシュされる」ということは、

「一度Web上で読み込んだデータはパソコン(HDD?)に記録される。」そして、この記録されたものを使用して、

次に表示する時に、一度読み込んだファイルを使用するため、早く表示できるもの、と考えたのですけれども、間違っていないでしょうか?

2008/11/25 21:45:38
id:hiro-rock No.3

hirorock回答回数39ベストアンサー獲得回数32008/11/25 13:19:30

ポイント20pt

【HTML直書き】

・ページが1ページしか無い場合はCSSをキャッシュする必要性が少ないのでファイル数を減らすという意味で直書きの方がメンテナンスしやすいかと思います。

【CSS読み込み】

・クライアントのブラウザ設定等にもよるのですが、通常同一ファイルはキャッシュしますので同じ外部CSSファイルを数ページで使用する場合はレンダリングが早いです!

・サイトリニューアル時のデザイン修正などが容易です。数ページのある箇所のFont替えという修正を考えただけでもHTML直書きより優れています。

http://q.hatena.ne.jp/

id:ThinkThink

ご回答ありがとうございます。


すみません。

レンダリングというのがちょっと判っていないのですけれども、これはHTMLのソースを実際に画像化していく。(視覚化していく)ということですよね?

 

>・サイトリニューアル時のデザイン修正などが容易です。数ページのある箇所のFont替えという修正を考えただけでもHTML直書きより優れています。

こちらについては運用レベルでの考えということですよね。

実際に運用していく場合については、例えば「色全体を赤から緑へ変えたい」という要望がユーザさんからあったとき、

CSSファイルで一括管理していれば“ある一部分だけを変更するだけで、その一部分が適用されているHTMLに修正を掛けれることになる(赤から緑へと変えることだできる” ということですよね。


ここで一つ疑問がありまして、よければ教えていただきたいのですけれども、

仮に企業HPなどを作成する場合では「HTMLにCSSをベタ書きする」する場合というのは滅多にないものでしょうか?

2008/11/25 21:52:09
id:kn1967 No.4

kn1967回答回数2915ベストアンサー獲得回数3012008/11/26 05:14:30

ポイント20pt

>>一度読み込んだCSSはキャッシュされる

>次に表示する時に、一度読み込んだファイルを使用するため、早く表示できる


その通りです。


>>レンダリング

>HTMLのソースを実際に画像化していく。(視覚化していく)


その通りです。


>>Webページ閲覧時にCSSの内容を見られないようにできる(?)

>みれます。


単なるテキストファイルなのでアドレスが判れば見れます。

(HTMLのソースを見ればアドレスは簡単に判りますよね)

例えば、こんな感じで・・・

http://q.hatena.ne.jp/css/question.css

余談ですが

http://q.hatena.ne.jp/js/prototype.js

http://q.hatena.ne.jp/js/prototype_extend.0.2.js

http://q.hatena.ne.jp/js/tooltip.0.2.js

http://q.hatena.ne.jp/js/toggle.0.1.js


>HTMLにCSSをベタ書きする


標準的な部分は外部cssファイルに

ページ特有の部分はべた書きというように使い分け。

極力、べた書きは行わない方向で行いますが

イベントページのような一時的で特殊な扱いのページや、

クライアントからの(勝手で強引な)突発的仕様変更の場合は

べた書きしてしまったりします。

id:Quphondi No.5

Quphondi回答回数59ベストアンサー獲得回数22008/11/28 00:17:41

ポイント20pt

CSSを使うメリットですが、ThinkThinkさんが挙げておられる

>・一度作成したCSSを使いまわす事ができる。

 を発展させると、

・1つのCSSファイルで複数のHTMLファイルのデザインを一括して制御できる。

 私はこれこそがCSSを使う最大のメリットだと考えています。

CSSを独立ファイルにするか否かは、このメリットとデメリットとしてデメリットとして挙げられている

>HTMLファイル内で <link rel="stylesheet" type="text/css" href="○○○.css"> を入力して、

>     「CSSファイルを読み込む手間」が出てくるだけな感じ

 とのバランスだと思います。


1人の管理者が3~4ファイル程度のホームページを運用するのであれば、デザイン変更もコピペで

すぐできます。なので、独立させることで得られるメリットは皆無です。


 対して、複数人の管理者・コンテンツ作成者で100ファイル超のホームページを運用するにおいて、

デザインを各ファイル任せとすると、統一を保つのは現実的には不可能なので、CSSを別ファイルに

するメリットが大きくなります。


 複数のHTMLファイルから構成される1つのコンテンツ内で、デザインがバラバラなのは

ユーザに対して非常に不親切です(あ、意図的に仕組んでいる場合は別ですよ(笑))。

また、デザイン、構成がバラバラなのは、ホームページに掲載されている情報の信用度も

下げてしまいます。


 私ルールですが、7つ以上のhtmlファイルから構成されるホームページを作るときは、

CSSを分けています。なぜ7つかと言えば、人間が短期に覚えていられる数の限界だからです。

おおよそ7つを越えると、編集中にミスをします。ミスをして腹を立てて、さらに効率を下げて

またミスをする、というデススパイラルの種を自ら蒔かないのも重要なポイントだと思います。


http://q.hatena.ne.jp/1227539167

  • id:ThinkThink
    id:kn1967 さん
    ご回答、ご確認頂きありがとうございます。

    やはりベタ書きって直接することは余りないのですね・・・
    そうなのじゃないだろうか?だけれどもどうなんだろう、という考えでふらついていたので、
    お話いただけてとてもありがたかったです。


    id:Quphondi さん
    回答ありがとうございます。
    場合分けして書いて下さっていたので、とても参考になりました。


    >複数のHTMLファイルから構成される1つのコンテンツ内で、デザインがバラバラなのは
    >ユーザに対して非常に不親切です(あ、意図的に仕組んでいる場合は別ですよ(笑))。
    確かに統一性が無いと何故か違和感も出てしまいますし、その点を考えるとおっしゃられている事が判る気がします。

    >私ルールですが、7つ以上のhtmlファイルから構成されるホームページを作るときは、
    >CSSを分けています。なぜ7つかと言えば、人間が短期に覚えていられる数の限界だからです。
    そうだったのですね(驚)
    何故7つが人間が短期的に覚えられる数なのか、というところもちょっと気になってきました。

    ご回答、アドバイスの方ありがとうございます。


この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません