人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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ファイルを読み込む手間」が出てくるだけな感じなのですが、何か他にデメリットってあるのでしょうか?

●質問者: ThinkThink
●カテゴリ:コンピュータ インターネット
✍キーワード:CSS HTML Web スタイル ソース
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● van-dine
●20ポイント

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

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

<span style="?">

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

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

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

↓ダミー

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

◎質問者からの返答

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

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

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

知りませんでした。

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

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


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


2 ● hijk05
●20ポイント

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

みれます。


【CSS読み込み】

メリット

・管理がしやすい

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

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

◎質問者からの返答

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


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

確認してみます。


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

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

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


3 ● hirorock
●20ポイント

【HTML直書き】

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

【CSS読み込み】

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

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

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

◎質問者からの返答

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


すみません。

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

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

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

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

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


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

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


4 ● kn1967
●20ポイント

>>一度読み込んだ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ファイルに

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

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

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

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

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


5 ● Quphondi
●20ポイント

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ