Dreamweaver での CSS プリプロセッサーの使用

Last updated on 2023年9月25日

Dreamweaver 内で CSS プリプロセッサーのファイルを使用およびコンパイルする方法について説明します。

CSS は、HTML ドキュメントのスタイルを記述するための言語です。 CSS プリプロセッサーは、事前に処理された言語で記述されたコードを最も使い慣れた CSS にコンパイルします。プリプロセス言語は、CSSをプログラミング言語により近いレベルまで引き上げます。

具体的には、プリプロセッサーを使用すると、変数、ミックスイン、関数、およびCSS では
不可能なその他の多くの技術を使用できます。CSS プリプロセッサーを使用すると、すべてを一度定義して繰り返し再利用できるため、保守性と拡張性に優れた CSS を作成できます。

CSS プリプロセッサーを使用すると、すっきりした方法で簡単に保存できる CSS を作成することもできます。多数の CSS ファイルを参照する web サイトを作成する場合、Sass や Compass などの CSS プリプロセッサーを使用すると、手動コーディングやコピー/ペースト操作を削減できます。

Dreamweaver では、組み込みの Ruby Saas コンパイラーを使用して、SCSS、LESS ファイルをコンパイルします。 Dreamweaver は、Sass ファイルをコンパイルするための Compass および Bourbon フレームワークもサポートしています。

LESS は JavaScript ベースであるのに対して、Sass は Ruby ベースです。しかし、これらの言語を理解していなくても問題はありません。また、コマンドラインを使用して、ファイルを CSS にコンパイルする必要もありません。 Dreamweaver は、これらのファイルを読み込み、編集、または保存すると、less.js JavaScript ライブラリを使用してこれらのファイルを CSS に自動コンパイルします。

サポートされているバージョン：

Sass: 3.4.25
LESS: 2.7.2
Compass: 1.0.3
Bourbon: 4.2.6
Bourbon Neat: 1.7.3
Bourbon Bitters: 1.2.0

Dreamweaver による CSS プリプロセッサーの処理方法

Dreamweaver による CSS プリプロセッサーの処理方法は、サイトを定義済みであるかどうかによって異なります。サイトを定義すると、CSSプリプロセッサー設定を行い、Dreamweaver内からCompassおよびBourbonフレームワークを使用することもできます。

サイトを定義済みの場合は、サイト固有の CSS プリプロセッサーの設定をおこなうことで、Dreamweaver 内での CSS プリプロセッサーの動作をカスタマイズできます。サイト固有の CSS プリプロセッサーの設定をおこなうと、コンパイルオプションをサイトごとに指定できます。 Sass および CSS ファイルの場所と、各サイト固有のプリプロセッサーオプションをカスタマイズすることもできます。

Dreamweaver で CSS プリプロセッサーを使用する方法について読み続けてください：

Dreamweaver 2017 および CSS プリプロセッサー

Dreamweaver 2017 では、CSS プリプロセッサーのサポートが Dreamweaver に組み込まれています。つまり、Dreamweaver 内で Sass/LESS/SCSS ファイルを操作できます。単純に Ctrl+S または Cmd+S を使用すると、Dreamweaver で CSS を自動的にコンパイルできます。ツール／コンパイル (または F9) を選択して、個々の CSS ファイルを手動でコンパイルすることもできます。変更は、このコンパイル済み CSS がリンクされているか添付されているすべての開いている HTML ファイルにも反映されます。

CSS プリプロセッサーを使用する際に関わるタスクのハイレベルワークフローを次に示します：

Dreamweaver で Compass または Bourbon を使用する場合は、適切なコンパイラーをインストールします。このインストールは、1 回クリックするだけで実行できます。 CSS プリプロセッサー設定をセットアップします。

このコンパイラは、フレームワークファイルのコピーが必要な場合 (Bourbon)、または初期設定の scss ファイルおよび Ruby ベースの設定ファイル (Compass) を生成する場合にのみインストールします。フレームワークファイルのコピーを保存しておくことをお勧めします。オーサリングフレームワークの特定のミックスインや関数が後のリビジョンで削除されても、サイト内のプリプロセッサーファイルにアクセスできます。

自動コンパイルが有効であることを確認します。次に Save を押して CSS ファイルを更新します。
（オプション）生成された CSS が使用されているすべての HTML ページで、ライブビューまたはリアルタイムプレビューに変更が反映されることを確認します。

Dreamweaver 2015 および CSS プリプロセッサー

dreamweaver 2015 以前のバージョンでは、sass、LESS、および SCSS ファイルを dreamweaver で使用できました。ただし、これらのファイルは Dreamweaver アプリケーションの外部で自分でコンパイルする必要がありました。
ワークフローは次の手順のようになります：

コンパイラーをダウンロードしてインストールします。
コンパイラーがSass/LESS/SCSSファイルを読み取るためのgrunt（Gruntfile.js）ジョブを設定します。
ファイルをCSSにコンパイルする別のgruntジョブを設定し、そのCSSをDreamweaverに取り込みます。

Sass/LESS/SCSSファイルを変更するたびに、これらの手順を実行する必要があります。

メモ

CSSプリプロセッサーを使用してCSSを強化する方法については、このビデオチュートリアルを参照してください。

サイトを定義していない場合は、Sass ファイルと LESS ファイルを手動でコンパイルすることもできます。ただし、Compass および Bourbon フレームワークはサポートされていません。

Dreamweaver で CSS プリプロセッサーを使用する方法

CSSプリプロセッサーを使用する際に必要なタスクの高レベルワークフローは次のとおりです：

Dreamweaver でサイトを定義します。コンパイルを試行する Sass ファイルまたは LESS ファイルが、サイトのルートフォルダーに含まれていることを確認してください。サイトが定義済みであり、Sass／LESS ファイルがサイトのルートに含まれている場合は、次の手順に進みます。 Dreamweaverサイトの設定の詳細については、Dreamweaverサイトについてを参照してください。
CSS プリプロセッサーの設定（生成された CSS ファイルの格納場所の定義など）をおこないます。これらの設定はサイトに固有です。詳細については、サイト固有のCSSプリプロセッサー設定を参照してください。
Compass や Bourbon などの特定のフレームワークを使用する場合は、それらのフレームワーク用の設定を指定できます。詳細については、Compassフレームワークの使用またはBourbonフレームワークの使用を参照してください。
Sass ファイルと LESS ファイルの自動コンパイルを設定するか、または手動でコンパイルします。詳細については、CSSプリプロセッサーファイルのコンパイルを参照してください。

CSS プリプロセッサーの環境設定の設定

サイト>サイトの管理ダイアログボックスを使用して、CSSプリプロセッサーのサイト固有の環境設定を設定できます。

CSS プリプロセッサーでサイト固有の設定を保持することにより、CSS プリプロセッサーをサイトごとに管理することができます。この操作により、サイトを切り替えるたびに環境設定を更新する必要なく、各サイトのCSSプリプロセッサーをコントロールできます。

メモ

一般とソースと出力サブセクションの設定は、デフォルトでRuby-Saasフレームワークに適用されます。

Compassの環境設定を設定するには、CompassセクションでUse Compassチェックボックスを選択する必要があります。

CSS プリプロセッサーの一般設定

サイト／サイトの管理／CSS プリプロセッサーダイアログでは、次に示す CSS プリプロセッサーの一般設定をおこなうことができます。デフォルトでは、これらの設定はSaasフレームワークに適用されます。

ファイルの保存時に自動コンパイルを有効にする

CSS プリプロセッサーの自動コンパイルを有効にするには、このチェックボックスをオンにします。このオプションを選択した場合、Sass、LESS、または SCSS ファイルを保存すると CSS ファイルが自動的に生成されます。このオプションを選択解除したままにすると、変更を行うたびに手動でファイルをコンパイルする必要があります。

LESS オプション

厳密な計算を有効にする

括弧内の計算のみ処理されます。例えば、（100px/25px）は正常に処理されますが、括弧のない 20％ + 10％は正常に処理されません。このオプションが無効になっている場合、ファイル内のすべての計算が処理されます。

厳密な単位を有効にする

このオプションを使用しなかった場合、LESS は計算時に出力単位の推測を試行します。以下に例を挙げます。

.class {

property: 1px * 2px;

}

この場合は、長さに長さを乗算して面積が求められますが、CSS は面積の指定をサポートしていません。 Dreamweaver は、ユーザーが値の 1 つを長さの単位ではなく値として意図したものと想定します。

厳密な単位がオンの場合、Dreamweaverはそれを計算エラーと想定し、エラーを表示します。

URL を相対 URL として上書きする

このオプションを使用すると、生成されるCSSファイル内のURLを書き換えて、URLが常に生成されたファイルに対する相対パスになるようにできます。

ソースマップを生成

ソースマップを作成します。ソースマップは、SassやLESSなどの高レベル言語と、CSSなどのそれらがコンパイルされる低レベル言語との間のギャップを橋渡しするファイルです。

Sass／SCSS のオプション

出力ファイルのスタイル

CSS出力ファイルのスタイルを指定します：

Nested - コンパイルされたCSSを、よく知られたモジュール構造でフォーマットします。
コンパクト - NestedやExpandedよりもスペースを取らないコンパクト構造でコンパイル済みCSSをフォーマットします。
圧縮 - CSSをフラット構造で出力します。
拡張 - CSS を拡張形式で出力します。プロパティとルールごとに 1 行を使用します。プロパティはルール内でインデントされますが、ルールはインデントされません。

ソースコメントを作成

出力CSSファイルにコメントを作成し、CSSコードを生成元の行にマッピングします。

ソースマップを生成

ソースマップ（SassやLESSなどの高レベル言語と、CSSなどのコンパイル先の低レベル言語との間のギャップを埋めるファイル）を作成します。

CSS ソースおよび出力の設定

生成されたCSSファイルの配置場所と、パス内のSass/LESSファイルが外部エディターで変更されたときにDreamweaverが監視して自動コンパイルをトリガーするパスを定義できます。

メモ

初期設定では、ソースと出力セクションのオプションが Saas に適用されます。 Compassでこれらのオプションを有効にするには、CompassセクションでUse Compassチェックボックスを選択する必要があります。

この設定を変更して Compass をインストールした後は、すべての設定が config.rb に移行されます。後で設定を変更する場合は、config.rb ファイルの設定を直接編集する必要があります。また、サイト設定ダイアログボックスで行った変更は、コンパイルに影響しません。

サイト>サイトを管理ダイアログで以下の引用元と出力CSSプリプロセッサ設定を設定できます。

CSS 出力

生成されるCSS出力ファイルの場所を指定します。

ソースと同じフォルダー

生成されたCSSファイルを引用元のSassファイルやLESSファイルと同じフォルダーに保存する場合は、このオプションを選択します。

出力フォルダーを定義

このオプションを選択し、生成されたCSSファイルを保存するフォルダーを指定します。

入力パスのセグメントの置き換え

このオプションを使用すると、「置換元」と「置換先」の文字列を使用してパスの一部を置き換えることができます。例えば、From: scssおよびTo: cssを設定すると、出力ファイルはパス内のSCSSをcssに置き換えた後、同じツリー構造内に配置されます。

ソースフォルダー

サイトのルート内で監視対象のサブフォルダーを指定します。通常、このサブフォルダーには、すべてのSCSSまたはLESSファイルが含まれます。

一般設定でコンパイルを有効にしている場合は、Dreamweaver によって自動的に CSS プリプロセッサーが起動されます。 Dreamweaverは、フォルダー内のファイルが外部またはDreamweaver内から変更されたときに、自動コンパイルをトリガーします。

Compass フレームワークの使用

Compass はオープンソースの CSS オーサリングフレームワークで、Sass を使用して CSS3 スタイルシートを作成できるようにします。

Dreamweaver は Compass に対するサポートを提供します。 Compass を使用してスタイルシートを作成する場合、これらのスタイルシートをコンパイルして、Dreamweaver 内から CSS ファイルを生成できます。

Compassファイルを使用します。

Compassがまだインストールされていない場合は、Dreamweaver内からインストールできます。

サイト設定ダイアログボックスで、CSS プリプロセッサー／Compassを選択します。 Use Compassを選択し、Install Filesをクリックします。

すべてのCompassファイルと*.rb設定ファイルがサイトフォルダー内にインストールされ、ファイルパネルで確認できます。

既存の Ruby ベースの config ファイルを指定

コンピュータにCompassがすでにインストールされており、Compass *.rbファイルが設定されている場合は、Dreamweaverサイト設定ダイアログで、現在のサイトルート内のCompass *.rbファイルへのパスを指定します。

サイト設定ダイアログで、CSS プリプロセッサ > Compass を選択します。
Use Compassチェックボックスを選択します。
Ruby ベースの設定ファイルの指定をクリックして、ファイルの場所を参照します。
完了したら保存をクリックします。

メモ

このファイルは、サイトのルートフォルダーに配置する必要があります。

設定オプションを手動で指定

既存の設定オプションがない場合は、設定を手動で指定できます。

サイト設定ダイアログで、CSSプリプロセッサー > Compassを選択します。
Compassを使用チェックボックスを選択します。
「設定オプションを手動で指定」をクリックします。次の構成オプションを指定し、保存をクリックします。

次のフィールドは自動的に入力されますが、要件に応じて変更できます：

メモ

これらのオプションで選択したすべてのパスは、サイトルート内にある必要があります。

HTTP パス

Web サーバー内で実行する場合のプロジェクトへのパス。デフォルトでは「¥」になります。

画像ディレクトリ

画像を保持するディレクトリ。ディレクトリは project_path に対する相対パスです。

生成された画像ディレクトリ

生成された画像を保持するディレクトリ。このディレクトリは project_path に対する相対パスで、デフォルトは images_dir の値です。

フォントディレクトリ

フォントファイルが保存されているディレクトリです。

相対アセット

Compass ヘルパー関数が、生成される CSS からアセットへの相対 URL を生成するか、そのアセットタイプの http パスを使用した絶対 URL を生成するかを示します。

ファイル保存時の自動コンパイルを有効にするをSites > サイトの管理 > CSS プリプロセッサーダイアログで選択している場合、Dreamweaver は Sass ファイルへの変更を保存するたびに CSS ファイルを生成します。

これらの変更はブラウザーウィンドウでもリアルタイムにプレビューできます。ブラウザーでの変更のリアルタイムプレビューの詳細については、リアルタイムプレビューを参照してください。

自動コンパイルが不要な場合は、次のいずれかの方法で CSS ファイルを手動でコンパイルできます：

ファイルパネルで Sass、LESS、または SCSS ファイルを右クリックし、コンパイルをクリックします。
ツール > コンパイルをクリックして、現在のファイルをコンパイルします。

その後、コンパイルされた CSS ファイルをサイト内の HTML ファイルに添付することができます。詳細については、外部 CSS スタイルシートへのリンクを参照してください。

Bourbon フレームワークの使用

Dreamweaver は Bourbon 製品ファミリーをサポートします。 Bourbon を使用してスタイルシートを作成する場合、これらのスタイルシートをコンパイルし、Dreamweaver 内から CSS ファイルを生成できます。

次の Bourbon フレーバーがサポートされています。

Bourbon - Sass 用のシンプルで軽量なミキシングライブラリ
Bourbon Neat - Sass および Bourbon 用の軽量なセマンティックグリッドフレームワーク
Bourbon Bitters - Bourbon プロジェクト用の枠組みとなるスタイル、変数および構造

コードに次のいずれかを追加することで、Bourbon フレームワークを読み込みできます：

@import "bourbon" - Bourbon を読み込み
@import "neat" – Bourbon Neat を読み込み
@import "base" – Bourbon Bitter のインポート用

Dreamweaver は、プリプロセッサーファイルのコンパイル時に、事前にパッケージ化された Bourbon のバージョンを使用します。

または、Dreamweaver への今後の更新がコンパイルのワークフローに影響しないように、Bourbon フレームワークファイルをサイトにインストールすることができます。 Bourbon フレームワークファイルがサイトにコピーされます。 Bourbon は、フレームワークをインポートするファイルに対してコンパイルがトリガーされた際に使用されるフレームワークです。

Bourbon、Bourbon Neat、または Bourbon Bitters ファイルのインストール

Bourbon またはそのフレーバーをインストールするには：

サイト設定ダイアログボックスで、CSS プリプロセッサー > Bourbon、Bourbon Neat、またはBourbon Bittersを選択します。

ファイルをインストールをクリックして、サイト内の指定されたサイトルートフォルダーの場所にファイルをインストールします。

すべてのBourbonファイルがサイトフォルダー内にインストールされ、ファイルパネルでそれらを確認できます。

失敗した場合、エラーがOutputパネル（ウィンドウ > Results > Output）に表示され、ステータスバーのアイコンが赤色に変わります。

CSS プリプロセッサーのファイルのコンパイル

CSS プリプロセッサーファイルは、以下のいずれかの方法でコンパイルできます：

CSS プリプロセッサーのファイルの自動コンパイルを設定する
CSS プリプロセッサーファイルを手動でコンパイルする

CSS プリプロセッサーのファイルの自動コンパイルを設定する

Sass ファイルまたは LESS ファイルでおこなわれた変更を自動的にコンパイルして同等の CSS を作成するオプションを Dreamweaver 内で設定できます。生成された CSS を保存する場所（サイトルート内）を指定することもできます。

サイト設定ダイアログボックスで、CSSプリプロセッサー > 一般 > ファイル保存時の自動コンパイルを有効にするを選択します。

CSS プリプロセッサー>ソースと出力をクリックします。

生成された CSS ファイルを保存する場所を指定します。次のいずれかのオプションを選択できます。

ソースと同じフォルダー

生成されたCSSファイルを、ソースSassおよびLESSファイルと同じフォルダーに保存したい場合は、このオプションを選択します。

出力フォルダーを定義

このオプションを選択し、生成された CSS ファイルを保存するフォルダーを指定します。

入力パスのセグメントの置き換え

このオプションを使用すると、「置換元」と「置換先」の文字列を使用してパスの一部を置き換えることができます。

Dreamweaver が監視する Sass または LESS ファイルが含まれるフォルダーを指定します。

トラッキングされているフォルダー内のファイルに変更を加えると、Dreamweaver はファイルを保存した後に自動的にコンパイルします。

メモ

Dreamweaver は、Dreamweaver の外部で変更を行った場合（例えば、テキストエディターを使用）でも、これらのファイルを監視してコンパイルします。

コンパイルが成功すると、Output パネル（ウィンドウ > 結果 > Output）にメッセージが表示されます。ステータスバーのステータスアイコンが緑色で表示されます。コンパイルされた CSS を開くには、パネル内の成功メッセージをダブルクリックします。

エラーが検出された場合、CSS が正常にコンパイルされていないことが考えられます。ステータスアイコンが赤で表示された場合、出力パネルにすべてのエラーと警告が一覧表示されます。パネル内のエラーメッセージをダブルクリックすると、コード内のエラーが含まれた行にすばやくジャンプできます。すべてのエラーが解決されるまで、CSS ファイルは正常にコンパイルされません。

メモ

出力パネルは、ワークスペースの下部にドッキングされます。パネルが閉じている場合は、ウィンドウ > Output パネルをクリックします。

ステータスが赤の場合、ステータスアイコンを使用してOutputパネルを切り替える（表示/非表示）こともできます。

コンパイルされた CSS ファイルを取得したら、Web ページをスタイルシートにリンクできます。 CSS プリプロセッサーを変更した場合、対応するコンパイル済み CSS ファイルが自動的に更新されます。 Live View では web ページも自動更新されます。

スタイルシートに web ページをリンクする詳細については、「外部 CSS スタイルシートにリンクする」を参照してください。