Entries


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/910-e32733a3

cssを外部ファイル化する理由・メリットを考えた


某モ○ゲーの所属コミュニティにおいて以下の書き込みがありました.
『CSSの直書きはHTMLを増やすからダメ?』

この書き込みを読んでCSSの直書きは何故よくないのか?と感じたので,これを機会にCSSを外部ファイルに記述する理由を考えてみました.

ファイルサイズの減少


HTMLのHEAD内にCSSを記述すると,新しいHTMLファイルを増やした際に,新しいHTMLにもCSSを記述しなければなりません.HTMLファイル数が増えれば増えるほどCSSを重複して記述することになり,HTMLのファイルサイズが増加することになります.

この問題はCSSを外部ファイルに記述することにより,CSSの一括管理が可能となり,サイト全体のファイルサイズを抑えることが可能となります.

コードの共有化


CSS外部化による最大のメリットは異なるページのスタイルを共有し使いまわせることでしょう.共有部分のスタイルファイルと詳細部分のスタイルファイルを分割することにより,同じスタイルの重複記述を減少させることができます.

例えば,以下のようなスタイルは共有用のCSSファイルにクラス指定しておき使い回します.
display
border
float
color
text-align
font

使用頻度が高いものは共有クラスへ,また背景指定やサイズ指定は個別クラスに指定します.一つのHTMLタグにクラスは複数指定できるので,共有クラスと個別クラスを分けることによりコード量を減らし,スタイルの重複記述を減らすことができます.ちなみに場所ごとやHTMLタグごとにスタイルを指定するよりも,使用頻度でスタイルをクラスに共通化したほうがスタイルファイルの量を減らすことができる気がします.ということでスタイルの指定はなるべきクラス用いましょう.

メンテナンスコストの低下


HTML内にデザインを記述する最大のデメリットはこれといっても間違いないでしょう.HTMLの各要素にスタイルを記述した場合,後にデザインの変更を行う際に大きなコストを支払うことになります.HTML内にデザインを記述すると,各ファイルに指定したデザインが分散してしまいます.変更を行う際に,各ファイルに分散したデザインを変更する作業は膨大なコストになります.一方でCSSの外部ファイル化はデザインをスタイルファイルのみの修正で済ますことができます.

何が問題になるか


HTML内にCSSを直書きをしていても,サイトのファイル数が少なければそれほど問題は感じないかもしれません.しかし,サイトが大規模になればなるほどHTMLへのCSS直書きはデメリットを顕在化させます.逆に大規模サイトほどCSSが外部ファイル化されているメリットを享受できるようになります.

その他


某モ○ゲーの掲示板にこんな書き込みがありました.
『CSSの外部化はSEO的にいい』

正直SEOは関係無い気がします.SEOとCSSが関係あるんですかね??サイトで重要なのはHTMLと情報のはずです.デザインが関係あるというのは営業トークっぽい気がします.よくウェブ標準に従ったサイトだからSEO的にもいいですみたいな話をする人と同じノリに聞こえるんですよね.ウェブ標準に従って作るのは割と普通のことだからわざわざ主張することでもないし,ウェブ標準に従っていないサイトがこの世の大部分なのにもかかわらず,ウェブ標準だからSEOにいいとか言われてもちょっと拍子抜けしちゃいます.ちょっと脱線しました.

他だとHTMLとCSSを分割したほうがページの表示スピードが速くなるとかあるみたいです.まあほとんど関係ないでしょうけどね.表示を早くしたいならCSSSpritesが効果的です.

結論


とりあえずCSSは外部化しとけば間違いないです.内部に書くと後々きっと後悔する羽目になります.


      ._
       \ヽ, ,、
        `''|/ノ
         .|
     _   |
     \`ヽ、|
      \, V
         `L,,_
         |ヽ、)  ,、
        /    ヽYノ
       /    r''ヽ、.|
      |     `ー-ヽ|ヮ
      |       `|
      |.        |
      ヽ、      |
        ヽ____ノ      
        /_ノ ' ヽ_\
      /(≡)   (≡)\
     /::::::⌒(__人__)⌒::::: \      
     |     |r┬-|     |      
     \      `ー'´     /
     /          \
     (  |          |  )
     \|    э    |/
       (    ,,,,    ,ノ
       \  、(U)ノ ノ
         \/  /            ┼ヽ  -|r‐、. レ |
         /  /\            d⌒) ./| _ノ  __ノ 
      ⊂⌒__)__)

現場のプロから学ぶXHTML+CSS現場のプロから学ぶXHTML+CSS
(2008/11/11)
益子 貴寛堀内 敬子

商品詳細を見る

0件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/910-e32733a3

Appendix

プロフィール

川崎修

  • Author:川崎修
  • インターネット大好き!
    調布周辺で自宅警備してます



    メール:pugiemonn@gmail.com
    skype:pugiemonn
    twilog:Twilog
    mixi:mixi
    facebook:facebook
My Profile by iddy
FC2ブログ

カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

最近の記事

Twitter

コミュニティ

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Adsense

月別アーカイブ

はてぶ数

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。