今回はDreamweaverでSCSS・Compassを利用する場合におすすめしたいファイル構成です。Dreamweaver使っていない場合にもおすすめです!では、早速いってみましょうー!まず、なぜにSCSSやCompassを使うのかそもそもなのですが、なぜSCSSやCompassを使うべきなのでしょうか。私がSCSSやCompassを使う理由としては、レスポンシブ対応に必須のメディアクエリの切り替えがあるからです。単体のcssファイルだと、いったいどこの記述からPCレイアウトで、どこからがSPレイアウトなのか・・・迷いますよね。SCSSやCompassを利用していれば変数や関数化が行えるので、ぐっと便利になりますし、サイト規模が大きくなってきても便利ですよね。おすすめのファイル構成ずばり、私はレスポンシブコーディングをする場合に、完全にPCとSPのファイルを分離してしまいます。1ページであってもです。scssファイルに全てをてんこもりにしてしまうと、SCSSを使っていたとしても切り替え箇所の判別が難しくなってしまいます。下記のようにメディアクエリを書いている場合です。}}これぐらいの量だったらまだ良いですよね。下記みたいに増えてきたらどうでしょう。}}と、ちょっと増えただけでも、どこに何を書いてるのかわかりません。メディアクエリ毎に「これは480px以下のSP表示に適用」などと書いてもよいですが、記述が多くなり混乱を招きます。そもそもメディアクエリの記述数を少なくすれば良いじゃない。思いますが、そうなると、ほとんどファイルを分離した状態と同じなので、1ファイルが数千行になってしまう場合もザラにありますし、量が増えればスクロールが大変忙しくなります。(上記に同じく)-sp/_layout.scss-sp/_header.scss-sp/_footer.scss-sp/pages/_top.scss-sp/pages/_xxxx.scssと、上記のような構成をおすすめしています。※import対象はアンダーバー「_」をいれないとDreamweaverが勝手にコンパイルして、cssファイルを生成してしまいますあまりheaderやfooterまでも分離しなくても良いかもしれませんが、なるべくそのファイルに記載されている内容が瞬時に判別できるような単位で分離すると良いと思います。目安として、1ファイル内が1000行以上になるようだとつめこみすぎだと思います。PCとSPを分離するための記述はlayout.scssに記述します。'sp/pages/_company.scss';}これは実際になうでコーディング中の内容から抜粋したものです。することで、各々のファイル内でメディアクエリの記述をする必要がなくなりました。(もちろん細かなウィンドウ幅毎の記述はしても良いです)以上がおすすめのファイル構成です。PC・SPの切り替えにCSSの継承を用いませんので、少し不便に感じるかたもいるかもしれません。経験上継承を多様していると、継承元を修正して思わぬところで崩れがおきる。下記のようにPCファーストで継承したとしましょう。500px;}〜〜このあいだがすごく離れていたとする。}}これで、うっかり上部の大元にmargin:10px;などをいれてしまうと、SPではみ出しかねません。なんてこともありますので、私としては完全に分離してしまうのがスマートな方法なのではないかと思います。使いものになるかわかりませんが、テンプレートをアップしました。shareDreamweaverのSCSSでimportファイル更新時に親ファイルが更新されないバグこんにちは、佐々木です。SCSSのimportファイルが特定のファイル名の時に親ファイルが更新されないバグ?があるようです。_xxxx_pc.scss等のパーシャルファイルを読み込ませたい時です。仮に下記のような構成だったとします。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。