- ベストアンサー
CSSファイルの管理方法でアドバイスをください
- サイト制作初心者のため、現在のCSSファイルの管理方法についてアドバイスを求めています。
- 現在、レスポンシブWebデザインで30ページのサイトを制作していますが、6つのCSSファイルだけで構成しているため記述量が膨大になっています。
- 各ページ毎の個別CSSファイルを作成するかどうか悩んでおり、読み込み速度と管理のバランスを考えてアドバイスをいただきたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞cssは分ければ分けるだけ読み込み速度が遅くなっていく！ それはとんでもないデマです。まったく逆です。スタイルシートは一度読んだら読みませんのでね。しかも、必要なものしか読まないのですから。 私は、スタイルシートを次のように分けています。 media別スタイルシート [固定(persistent)スタイルシート]・・・すべてで適用させる基本的なもの rel="stylesheet" title属性なし。 [優先スタイルシート] rel="stylesheet" title="標準" [代替スタイルシート] rel="alternate stylesheet" title="大きなフォント" そして、それぞれに default.css サイト全体で統一すべきもの shape.css 配置 color.css 色 そして、ページのデザインカテゴリーごとに topPage.css カテゴリー(テーマ)のトップ content.css 各コンテンツ document.css 文章がメイン(会社案内、マニュアルなど) を必要に応じて<link>で呼び出しています。 @importは基本使いません。不必要なものまで読ませてしまうので・・ 各ページ独自のスタイルは、<head></head>内に追加しています。個別の要素のスタイルはstyle属性を使用します。 それよりも、問題なのはスタイルシートの整理です。 ＞ものすごい記述量でカオスな事になってしまいました。 それでメンテナンスできますか？他人が見てわかりますか？ 1) HTML自体の書き方に問題がある場合がある。 文書構造をきちんと示しているか？ リンクやjavascriptのターゲットでもないのにidを使っていないか？ 2) セレクタのグループ化、簡略化プロパティをきちんと利用しているか 3) 継承されるプロパティを何度も記述していないか？ 4) 詳細度やカスケーディングをきちんと利用しているか？ スタイルシートは、よほど派手な装飾をしても、せいぜい数百行で収まるはずです。私の場合 default.css 100行 shape.css 200行 color.css 150行 程度を目安にしています。 記述順は 1)タイプセレクタ 2)大きなブロック(.header,.section,.footer,.nav) 3)より小さなブロック(class) 4)一意セレクタ 5)より細かい部分 と記述していきます。 たとえば、 html,body{margin:0;padding:0;} body{background:;font-family:;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} div.header,div.section,div.footer{width:70%;margin:0 auto;min-width:480px;max-width:800px;} div.nav ol,div.nav ol li{display:block;list-style:none;marin:0;padding:0;text-align:center;line-height:2em;} ・・・・・ #sitemap{width:100%;position:absolute;top:0;left:0;height:2em;} #sitemap ol li{dispaly:inline-block;width:20%;} というふうに・・・HTMLを見なくてもスタイルシートが書けますし、あなたでも見ただけでなにを指定しているかわかると思います。 肥大化したスタイルシートを拝見すると、HTMLに膨大なdivやidが書かれていることが第一の原因ですね。そもそも「divやspanにつけるidやclass名は文書構造を補完するため」あるいは「文書構造を補完するためにidやclass名をつけたdiv,spanを利用する」という基本ができていないのではないでしょうか？ 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ヘッダーなら、<div class="header">,本文なら、<div class="section">、ナビゲーションなら<div class="nav">のように、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考につけておくと良いでしょう。将来、そのまま <div class="header">→<header> <div class="section">→<section> <div class="nav">→<nav> にできますし・・ ＞横幅毎のcssファイル レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収できるからレスポンス/リキッドデザインなのですよ。 div.header,div.section,div.footer{width:70%;margin:0 auto;min-width:480px;max-width:800px;} の指定で、480px幅以上のディスプレイはすべて対応できるはずです。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
・device_1環境 import.css ↑base.css ↑device_1.css（数百行） ・device_2環境 import.css ↑base.css ↑device_2.css（数百行） ・device_3環境 import.css ↑base.css ↑device_3.css（数百行） ・device_4環境 import.css ↑base.css ↑device_4.css（数百行） とすれば、 管理もしやすそうですし、各々の環境での総読み込みサイズを減らせるんじゃないでしょうか。
お礼
ご回答ありがとうございます。 なるほど！こういう分解もあるんですね！！ とても参考になります。 うう～～～～～ん、考えれば考えるほど、初心者のボクからしたらすごく効率的なワケ方です！！！ 貴重なご意見、ありがとうございます！
お礼
ご回答ありがとうございます。 ----------------------------------- ＞cssは分ければ分けるだけ読み込み速度が遅くなっていく！ ＞それはとんでもないデマです。まったく逆です。・・・ ！！！！ そうなんですか！？あれ！？ってなると・・・。これでまたいくつか疑問が浮かんできました・・・。 それは別件でまた質問してみますので、もしご覧になったら、ぜひご指導ください。 ----------------------------------- ＞たとえば、 ＞html,body{margin:0;padding:0;} 最近、気になるサイト様のソースを拝見したりすると、ORUKA1951様と同じように記述してあります。 確かに意味はわかるのですが、初心者的発想なんで、これがものすごい見づらい！メンテしずらい！と思い、このような↓記述をしておりました。 （同じタグで表現すると） html { margin: 0; padding: 0; } body { margin: 0; padding: 0; } と、このように。ぱっと見はこれのがメンテしやすそうだったためこう記述していたのですが、やはりスペース類は全部端折ってギリギリまで簡素化し、同じ内容ならまとめて記述したりする事を目指すべきなんでしょうか？ 現状が上記のような記述なので、ORUKA1951様と同じようにすれば、1つ1つに細かすぎるぐらいコメントをつけていたりも合わせてしていたので、ゆうに４分の1には行数が減りそうです。 ----------------------------------- ＞横幅毎のcssファイル ＞レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収＞できるからレスポンス/リキッドデザインなのですよ。 ＞div.header,div.section,div.footer{width:70%;margi・・・・ な！！！なるほど！言われてみれば確かに！ リキッドレイアウトしてるのに、わざわざcssを変えて余計な手間をかける必要はないんですよね！！！そうだそうだ！ サイト構成が大きくかわるのなんて、確かにスマホの縦用サイズになった時だけですし・・・。 この発想はありませんでした・・・。 ----------------------------------- 大変、大変参考になりました！！！ 私のような未熟者に、ここまで懇切丁寧にご教授頂き、大変感謝いたします。 ありがとうございます。