CSSファイルの管理方法でアドバイスをください。こんにちはゲストさん。>>解決済みの質問CSSファイルの管理方法でアドバイスをください。私はサイト制作初心者です。現在、ページ数がおよそ30pのサイトをレスポンシブWebデザインにて制作しております。制作を・・・とおもい管理のし易さを無視してたった6つのcssファイルだけで構成しているのですが、横幅毎のcssファイルがとてつもなく膨大な記述量になってきました。各ページ毎にちょっとした演出やデザインを入れていいたら、結果すごい記述量に・・・。relでこのimport.cssだけを記述しています。一応、全ページ共通のタグをできる限りbase.cssにまとめ、各ページ毎の個別cssファイルは作らず、デバイス毎という形で一括で記述していきました。すると、あれよあれよと各デバイス毎のcssがものすごい記述量でカオスな事になってしまいました。当然といえば当然ですが。そこで、cssファイルを各ページ毎に分けるべきかどうか悩んでおります。ネットで調べたのですが、『cssは分ければ分けるだけ読み込み速度が遅くなっていく!』というのを知り、さらに調べると『記述量が多くても読み込みが遅くなる』という事も知り、もう一体どうしたら良いのだろうか?とさらに悩やんでおります。00:56:37通報するQNo.7793385ykgad1困ってます質問者が選んだベストアンサー>cssは分ければ分けるだけ読み込み速度が遅くなっていく!それはとんでもないデマです。スタイルシートは一度読んだら読みませんのでね。必要なものしか読まないのですから。私は、スタイルシートを次のように分けています。文章がメイン(会社案内、マニュアルなど)を必要に応じて<link>で呼び出しています。@importは基本使いません。各ページ独自のスタイルは、<head></head>内に追加しています。個別の要素のスタイルはstyle属性を使用します。それよりも、問題なのはスタイルシートの整理です。>ものすごい記述量でカオスな事になってしまいました。HTML自体の書き方に問題がある場合がある。詳細度やカスケーディングをきちんと利用しているか?スタイルシートは、よほど派手な装飾をしても、せいぜい数百行で収まるはずです。程度を目安にしています。記述順は1)タイプセレクタ2)大きなブロック(.header,.section,.footer,.nav)3)より小さなブロック(class)4)一意セレクタ5)より細かい部分と記述していきます。li{dispaly:inline-block;width:20%;}というふうに・・・HTMLを見なくてもスタイルシートが書けますし、あなたでも見ただけでなにを指定しているかわかると思います。肥大化したスタイルシートを拝見すると、HTMLに膨大なdivやidが書かれていることが第一の原因ですね。class属性と併用することで、文書に構造を付加するための一般機構を提供する。)を参考につけておくと良いでしょう。class="nav">→<nav>にできますし・・>横幅毎のcssファイルレスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収できるからレスポンス/リキッドデザインなのですよ。auto;min-width:480px;max-width:800px;}の指定で、480px幅以上のディスプレイはすべて対応できるはずです。08:40:16お礼ご回答ありがとうございます。----------------------------------->cssは分ければ分けるだけ読み込み速度が遅くなっていく!>それはとんでもないデマです。・・・!!!!そうなんですか!?あれ!?ってなると・・・。これでまたいくつか疑問が浮かんできました・・・。それは別件でまた質問してみますので、もしご覧になったら、ぜひご指導ください。----------------------------------->たとえば、>html,body{margin:0;padding:0;}最近、気になるサイト様のソースを拝見したりすると、ORUKA1951様と同じように記述してあります。確かに意味はわかるのですが、初心者的発想なんで、これがものすごい見づらい!メンテしずらい!と思い、このような↓記述をしておりました。0;}と、このように。見はこれのがメンテしやすそうだったためこう記述していたのですが、やはりスペース類は全部端折ってギリギリまで簡素化し、同じ内容ならまとめて記述したりする事を目指すべきなんでしょうか?現状が上記のような記述なので、ORUKA1951様と同じようにすれば、1つ1つに細かすぎるぐらいコメントをつけていたりも合わせてしていたので、ゆうに4分の1には行数が減りそうです。----------------------------------->横幅毎のcssファイル>レスポンスデザインでなぜこれほど増えるのかわかりません。ウィンドウ幅の違いを吸収>できるからレスポンス/リキッドデザインなのですよ。>div.header,div.section,div.footer{width:70%;margi・・・・な!!!なるほど!言われてみれば確かに!リキッドレイアウトしてるのに、わざわざcssを変えて余計な手間をかける必要はないんですよね!!!そうだそうだ!サイト構成が大きくかわるのなんて、確かにスマホの縦用サイズになった時だけですし・・・。この発想はありませんでした・・・。-----------------------------------大変、大変参考になりました!!!私のような未熟者に、ここまで懇切丁寧にご教授頂き、大変感謝いたします。ありがとうございます。管理もしやすそうですし、各々の環境での総読み込みサイズを減らせるんじゃないでしょうか。09:31:10お礼ご回答ありがとうございます。!こういう分解もあるんですね!!とても参考になります。レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。レスポンシブWebデザインのサイトを作っています。スマホの画面では右側の表示がきれてしまいます。こんにちは、サンタともうします。とあるWebサイトのソースを見たら、headの部分が次のようになっておりました。現在制作した、またはしているサイトのコーディングのチェックなんですが、不安が拭いきれません。今やHTMLファイルは文書情報のみ、デザインはCSSで定義することが常識となっています。私はサイト制作初心者なんですが、なんとかレスポンシブwebデザインでのサイトを作っています。Reserved.掲載情報の著作権は提供元企業等に帰属します。