2018.08.27
私がおすすめするDreamweaverを使ったSCSS・Compassのファイル構成（レスポンシブ）
こんにちは！ 佐々木です。
今回はDreamweaverでSCSS・Compassを利用する場合におすすめしたいファイル構成です。
もちろん、Dreamweaver使っていない場合にもおすすめです！
では、早速いってみましょうー！
まず、なぜにSCSSやCompassを使うのか
そもそもなのですが、なぜSCSSやCompassを使うべきなのでしょうか。
私がSCSSやCompassを使う理由としては、レスポンシブ対応に必須のメディアクエリの切り替えがあるからです。
単体のcssファイルだと、いったいどこの記述からPCレイアウトで、どこからがSPレイアウトなのか・・・迷いますよね。
SCSSやCompassを利用していれば変数や関数化が行えるので、ぐっと便利になりますし、サイト規模が大きくなってきても便利ですよね。
では、早速おすすめのファイル構成
ずばり、私はレスポンシブコーディングをする場合に、完全にPCとSPのファイルを分離してしまいます。
1ページであってもです。
色々な人が行ったHTMLコーディングに触れてきましたが、１つのcss or scssファイルに全てをてんこもりにしてしまうと、SCSSを使っていたとしても
切り替え箇所の判別が難しくなってしまいます。
例えば、下記のようにメディアクエリを書いている場合です。
.hoge{
color: #ff0000;
}
@media all and (max-width: 480px) {
.hoge{
color: #ff0000;
}
}
これぐらいの量だったらまだ良いですよね。
でも、下記みたいに増えてきたらどうでしょう。
.hoge{
color: #ff0000;
}
@media all and (max-width: 480px) {
.hoge{
color: #ff0000;
}
}
@media all and (max-width: 800px) {
.hoge{
color: #eeeeee;
}
}
.hoge2{
color: #ff0000;
}
@media all and (max-width: 480px) {
.hoge2{
color: #ff0000;
}
}
@media all and (max-width: 800px) {
.hoge2{
color: #eeeeee;
}
}
と、ちょっと増えただけでも、どこに何を書いてるのかわかりません。
メディアクエリ毎に「これは４８０px以下のSP表示に適用」などと書いてもよいですが、記述が多くなり混乱を招きます。
そもそもメディアクエリの記述数を少なくすれば良いじゃない。
と思いますが、そうなると、ほとんどファイルを分離した状態と同じなので、１ファイルが数千行になってしまう場合もザラにありますし、量が増えればスクロールが大変忙しくなります。
そして下記がオススメのファイル構成です！
-layout.scss (大元のファイル、PC、SP共に共通するような変数はmixinはここに記述し、pcとspのインクルードファイルを読み込む） -pc/_layout.scss (PC専用の共通レイアウトを記述する） -pc/_header.scss (お好みでheader用のcssを分離する） -pc/_footer.scss (〃） -pc/pages/_top.scss (トップページにしか使わない記述など） -pc/pages/_xxxx.scss (上記に同じく） -sp/_layout.scss -sp/_header.scss -sp/_footer.scss -sp/pages/_top.scss -sp/pages/_xxxx.scss
と、上記のような構成をおすすめしています。※import対象はアンダーバー「_」をいれないとDreamweaverが勝手にコンパイルして、cssファイルを生成してしまいます
あまりheaderやfooterまでも分離しなくても良いかもしれませんが、なるべくそのファイルに記載されている内容が瞬時に判別できるような単位で分離すると良いと思います。
目安として、１ファイル内が10００行以上になるようだとつめこみすぎだと思います。
PCとSPを分離するための記述はlayout.scssに記述します。
例えば・・・・
/*--------------------------------------
PC
---------------------------------------*/
@media screen and (min-width: 768px) {
.sp {
display: none !important;
}
@import 'pc/_header.scss';
@import 'pc/_footer.scss';
@import 'pc/_layout.scss';
@import 'pc/pages/_top.scss';
@import 'pc/pages/_products.scss';
@import 'pc/pages/_company.scss';
}
/*--------------------------------------
スマホ
---------------------------------------*/
@media screen and (max-width: 767px) {
.pc {
display: none !important;
}
img{
max-width: 100%;
}
@import 'sp/_header.scss';
@import 'sp/_footer.scss';
@import 'sp/_layout.scss';
@import 'sp/pages/_top.scss';
@import 'sp/pages/_products.scss';
@import 'sp/pages/_company.scss';
}
これは実際になうでコーディング中の内容から抜粋したものです。
こうすることで、各々のファイル内でメディアクエリの記述をする必要がなくなりました。（もちろん細かなウィンドウ幅毎の記述はしても良いです）
以上がおすすめのファイル構成です。
PC・SPの切り替えにCSSの継承を用いませんので、少し不便に感じるかたもいるかもしれません。
ですが、経験上継承を多様していると、継承元を修正して思わぬところで崩れがおきる。
たとえば、下記のようにPCファーストで継承したとしましょう。
.hoge{
width: 500px;
}
〜〜
このあいだがすごく離れていたとする。
〜〜
@media all and (max-width: 480px) {
.hoge{
width: 100%;
}
}
これで、うっかり上部の大元にmargin:10px;などをいれてしまうと、SPではみ出しかねません。
なんてこともありますので、私としては完全に分離してしまうのがスマートな方法なのではないかと思います。
