Q&A
＞・PCサイト，スマホサイトでほとんど別のデザインをする場合は，別ファイルに分けたほうがよい。
今までPCでのアクセスが多かったので、PCファーストで考えていたので、スマホではスマホに最適化した形で作り直す必要がある感じなので、別ファイルで作成しようと思いました。
この場合cssファイルの読み込み順が気になるのですが、重要と考えているデバイス（アクセスの多いデバイス）順に読み込むよう記述した方が良いでしょうか？
ECサイトのPC用ページを作成しているのですが、スマホ対応が全く進んでいません。今勉強しながら取りかかるところなのですが、知りたいことがあります。
表示するHTMLファイルでcssファイルを読み込む際に
1つのCSSファイルに全てのデバイス向け（スマホ向け、タブレット向け、PC向けなど少なくとも3つのデバイス向けにスタイルシートを記述するとします）のスタイルシートを記述する方が良いか、それとも
スマホ用、タブレット用、PC用の3つのCSSファイルを分けて記述し、
HTMLファイルで以下の様に3行記述するのが良いか
html
1<link rel="stylesheet" href="sumaho_style.css"> 2<link rel="stylesheet" href="tablet_style.css"> 3<link rel="stylesheet" href="pc_style.css">
今後コードの量が増えたときに
サイトの表示スピードや、管理面などでどちらが良いでしょうか？
知恵のある方、経験者の方ご教授くださいませ。
回答3件
0
レスポンシブにする場合は、PC版とモバイル版のCSSは合わせて作成し1ファイルにしたほうが良いです。(javascriptもPC版とモバイル版を合わせて作成して1つにしたほうが良いです。)
PCサイトとモバイルサイトを別のHTMLにして振り分けて表示させるのであれば、不要な部分のCSSを読み込まなくて済みますので別々に作成したほうが良いです。この場合もPC・モバイルいずれにせよ、CSSは1ファイルにした方がリクエストの数が少なくて済みますので速いです。
その上で、PC・モバイル両方に言えるのですが、min化して、可能であればgzip化して読み込ませる方が速度は速くなります。HTML・javascriptも同じですね。
あ。1つのファイルにしてもファイル内で@importで別のファイルを呼び出したらリクエストが発生してしまうので1つのファイルにした意味が無くなってしまうのでダメです。
で、肝心の管理方法ですが、
最初から1ファイルで作成すると長～いファイルになってしまい作業が大変だと思います。
恐らく最近の制作現場ではLESSとかSCSSとかStylusとか使っているのではないでしょうか？
そこで！
gruntやglupを使えば、それらのコンパイルとファイル結合、さらにmin化やgzip化まで自動で行えるようになるので、モジュールごとにCSSファイルを分けたまま制作できるので管理も楽になると思いますよ。
gruntやglupならjavascriptの結合やmin化もできますし、jadeの様なHTMLのテンプレートエンジンも使えるのでHTMLもmin化したりもできて慣れるまで大変かもしれませんが、使うようになるととても便利に感じると思います！
チームにエンジニアの方が居られるなら導入してみたいんだけど〜と提案してみてはいかがでしょう？
なんだかnode.jsの回し者みたいになってしまいました。。。
投稿2015/08/11 15:58
総合スコア596
0
どちらにもメリットデメリットがありますので，規模や要望に応じて切り分けするといいと思います。
・小規模サイトの場合は1つのファイルにまとめたほうがよい。
たとえば「PCではボタンの幅は5emだが，スマホでは100%にする」など，部分的なレスポンシブデザインをする時に便利。
・PCサイト，スマホサイトでほとんど別のデザインをする場合は，別ファイルに分けたほうがよい。
同じHTMLを使っているが別サイト，という意識で作成する。
(共通する部分はcommon.cssなどにまとめる)
ECサイトはPCとスマホでまったく別のデザインになることが多いような気がします。
また，ユーザエージェントでの割り振りや，「パソコン表示にする」ボタンによるデザイン切り替え等も発生するかもしれませんので，
別ファイルにした方がいいのではないかな，と思っています。
投稿2015/08/11 13:28
総合スコア25
>この場合cssファイルの読み込み順が気になるのですが、重要と考えているデバイス（アクセスの多いデバイス）順に読み込むよう記述した方が良いでしょうか？
このあたりのことはわからないため，いまググった程度の知識しかないですが……
外部JavaScriptやCSSの記述順によってページの読み込み速度が違う
http://weboook.blog22.fc2.com/blog-entry-196.html
上記参考サイトを見ると，cssは同時に読み込むようです。
そのため，処理速度の効率の面からでしたら順番は関係ありません。
"わかりやすさ"のような面から考えると，cssは後に書かれたものの方が上書きされるので，重要と思われるものの方を後の順番にした方がわかりやすいかもしれません。
「感覚的に，先に書かれているほうが重要な気がする」と思われるのでしたら，重要なものを上にしてもいいと思います。
このあたりは，自分の感覚や，会社の記述ルールがあるのでしたらそれに従った方がわかりやすいと思います。
参考サイトも勉強になりました。ありがとうございました。
だんだん、方向性は決まってきました。
0
1つのcssファイルで全て(複数デバイス分)のCSSを書いていきます。
理由としては
・リクエストが1ファイル分で済むので、表示速度短縮になる
・複数ファイルに分かれているとクラスの上書きなどの管理が難しくなる
→CSSファイルの読み込み順に依存してしまう。
・PC/SP/タブレットで共通のクラスをどこに書くか分かりづらい
という感じです。
複数ファイルだと自分以外の人間がCSSを触るときに、上記のような混乱を招く恐れがあります。
きちんとコメントなどで管理していれば、同一ファイルでもそれほど困ることはありません。
投稿2015/08/11 13:25
編集2015/08/11 13:28
総合スコア897
レスポンシブをイメージしていました。。。
PC/スマホで全くデザインが違う場合はm-a-iさんのご回答の通り、CSSを分けたほうが良いですね。
レスポンシブであれば同一ファイルが良いと思います。
PCとスマホでかなり見た目を変える予定なので、cssを分けて記述したいと思います。
回答ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/13 04:20
2015/08/13 11:03