新ブログバナー

--.--.--スポンサーサイト

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

2011.05.04CSS(スタイルシート)分割化

久々にHPをいじりました。
何をしたかというと、タイトル通りHPのレイアウトを構成しているスタイルシートを
複数のファイルに分割するという作業です。
CSSを分割する方法はいろんなサイトが使っていて興味があったので、
いずれは我がHPにも取り入れてみようと思っていたのです。

一応作業を行う前に、CSSを分けるメリットとデメリットを調べました。

メリットとしては、?CSSの管理がしやすい ?古いブラウザにスタイルシートを
読み込ませない が挙げられるようです。
実際、CSSファイルは一つにしていましたが、縦に長い記述の中から
修正したい箇所を探すのはちょっとした手間になっていました。
(といっても会社のものに比べたら1/10の長さですが・・・)
また、古いブラウザはスタイルシートを読み込むとレイアウトが崩れる場合がある為、
import(古いブラウザは対応できない)を経由する事で崩壊を防ぐ役割があるとの事。
(未経験なので正直よく分かりません・・・)

デメリットとしては、読み込むファイルが増える事でページの表示に
時間が掛かってしまうという点です。
これはアクセスが多いサイト(1時間に数十件、数百件)では問題ですが、
アクセスが頻繁に来ないサイトでは気にする事はないようです。
我がHPも1時間に0~2件(悲しいですが)程度なので、全く問題なしです。

という事で早速CSSの分割にチャレンジ。

CSS分割

とりあえず import.css を作成して、読み込むcssを指定。
そして、今まで使っていた style.css の中身をそれぞれのファイルに移動。
最後にcss内にある画像の相対パスやhtml内のimport.cssの指定を直してアップ。
意外と簡単に修正が出来て、いつも通りの表示が出来ました。

こんなに簡単なら、もう少し早くやっておけば良かったと思いつつ、
今後の管理のしやすさにちょっと期待しています。
Secret

TrackBackURL
→http://hasenritte.blog85.fc2.com/tb.php/658-4578278a
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。