このビデオでは CSSプリプロセッサーの強力な機能について説明します 「CSSプリプロセッサー」とは CSSに似た言語で作る、別個のファイルです スタイルシートだけでは実現できない高度な処理を プリプロセッサーを使って付け加えることができ 非常に便利です 主な使用目的は 同じ作業の繰り返しを不要にすること つまり、作業時間を短縮できるのです ばんざい！
CSSでは通常、カラー、サイズ、位置などのプロパティを 何度も何度も書かなくてはなりません プリプロセッサーには、そういう反復作業を なくすために役立つ機能がいろいろあります それらを紹介していきましょう とはいえ、やはり普通のCSSファイルは必要で なくすわけにいかないので CSSファイルを作成する前の段階に仕掛けをします CSSの前処理、つまり「プリプロセス」というわけです いま表示されている、このサイトは Dreamweaverを使って作られています 中を見てみましょう これは、完成したサイトのソースを デベロッパーモードで開いたところです プロジェクトのファイル管理に関する定義も Dreamweaverに設定されています この状態が説明の前提になるので あらかじめ、サイトメニューの「新規サイト」で 設定を済ませてください サイト定義の詳しい作業手順については 別のチュートリアルビデオで説明されています さて、「ソースコード」にサイトのHTMLが表示されていますが 関連ファイルの「styles.css」に切り替えましょう ごく標準的な構成のCSSファイルですね 白のカラーを指定している箇所を探すと 102行に「#fff」のカラー指定がありました 116行も同様ですね ハイライトして、検索メニューの 「検索および置換」を選択すると このように 同じ指定が12か所にあることがわかります 小さいサイトにしては、かなり多いですね こういう部分に プリプロセッサーを使うと、とても効果的です これは完成形のファイルなので、いったん閉じて 最初の状態に戻りましょう 「rendered-index.html」を開きます これをブラウザーで表示すると 今の状態では、上のテキストが黒 中央のテキストも黒 さらに、フッターなども黒になっています これらを全部、白に変更する必要があるとします プリプロセッサーを利用して効率的に作業しましょう なかなか単純には説明できませんが Dreamweaverに戻って まず、CSSプリプロセッサーを作ることにします このサイトは 「ファイル」のフォルダー構造を見てわかるとおり かなりシンプルです インデックスページが1つと、styles.cssファイルの他には フォルダーが若干あるだけです ルートにはファイルが2つしかありません ここにCSSプリプロセッサーを追加すると、どうなるでしょうか ファイルメニューで 「新規」を選ぶと、選択肢の中に 「LESS」や 「SCSS」、「Sass」があります 機能はだいたい同じで どれを使っても、先ほど説明したメリットがあります ただ、シンタックスは異なります 最新の「SCSS」を例にとって説明しましょう というのも、SCSSは本来のCSSに一番よく似ていて Webデザイナーが馴染みやすいからです 「作成」をクリックして 保存します 例として「scss-styles.scss」という名前を付けますが ファイル名は自由です 「保存」をクリックします すると、SCSSファイルができるのに加えて 新しいCSSファイルが1つ、自動的に作られます これは、Dreamweaverが ファイルのコンパイル作業に関する処理を 全部やってくれるからです 以前、私がプリプロセッサーを使い始めた頃は 概念や値の意味を理解するだけでは使えず コマンドラインのコンパイラーなど 複雑な操作が必要でした 使える状態にする環境設定が 当時は大変でしたが 今はDreamweaverで気軽に使えます ちなみに、このサンプルには いろいろな設定を含んだ既存のCSSファイルがあります 実際にサイトを作り始めるときには おそらく、既存のCSSファイルはなくて SCSSファイルをコンパイルして生成するだけでしょうが このチュートリアルでは、説明の都合上 両方を併用することにします ここでは、まず 変数というものを作成します 変数の書き方は簡単 先頭に「$」を付けて 目的に応じた変数名を指定します ただし、名前にスペースや特殊記号を含めることはできません アルファベットと数字で名前を付け、その後にコロンを書きます この変数に、カラーの値を代入します 例えば、「#fb00b4;」としましょう シンタックスはCSSに似ているので、わかりやすいですね 変数を使ったことがない方は カラーコードに「$primary-color」という名前を 付けたと思ってください このように変数を定義して サイト内で変数名を使うようにしておけば 何万か所に書いても、あとで変更したくなったとき 1か所を修正するだけで すべての該当箇所に値が反映されます 「検索および置換」よ、さらば！
変数の意味がピンとこない方も 使ってみれば 感覚でわかると思います さて、何のスタイル指定をするんだったかな HTMLファイル全体のうち あるクラスのテキストを対象にします この「hero」クラスですね クラスに属するテキスト全体に 変数に代入したカラー値を指定しようと思います フッターも同様ですね もう一度、SCSSファイルを開いて ピリオドの後に クラス名「hero」を書き、波括弧を入力します それから、「color」です フォントのカラー指定という意味ですね その後にコロン カラーピッカーから値を選ぶこともできますが 今やりたいこととは違います カラーピッカーを使うと、何度も同じ操作の繰り返しになります ここでは変数を指定しましょう 先ほどと同じく、「$」を付けて 変数名「primary-color」を入力し 末尾のセミコロンを付けます 要するに 値の代わりに変数名を書いたわけです 変数名「$primary-color」を書いた場所は Dreamweaverの自動コンパイル処理によって 変数の値に置き換えられ カラーコードが入ります いま表示されているSCSSファイルを コンパイルすると、どんなCSSができるでしょうか CSSファイルのファイルを開いてみると こういう内容が SCSSファイルから自動的に生成されています カラーコードが挿入された結果のファイルは 標準仕様のCSSファイルなので Webブラウザーで正しく解釈されます では、このCSSファイルをページで使いましょう エディターでページのHTMLを開くと ヘッダー部分に、既存のCSSファイルが指定されています 新しいCSSファイルも同様に読み込みましょう この画面内にカーソルがある状態で Macでは、Command+Dを押すと複製できます Windowsの場合は、Ctrl+Dです この行に書かれたファイル名を 新しいCSSのファイル名に変更します 両方の指定が揃いました 上は、元からあるCSSファイル 下は、プリプロセッサーで生成した新しいCSSファイルです Dreamweaverのコンパイル処理の結果である 拡張子.cssのファイルを読み込みます 同じ名前のSCSSファイルと間違えないでください ブラウザーで結果を見てみると こうなりました 変なピンク色になっていますね フッターも同じように変更しましょう 両方が対象になるよう、プリプロセッサーを書き足します フッターのIDである「footer」に 同じフォントカラーを指定したいので 同じ変数を使います コピー＆ペーストすれば書き間違えませんね もう一度ブラウザーで見ると フッターもピンクになりました 以上をまとめると 新しくSCSSファイルを作って、そこから CSSファイルを生成させることにしました その結果がこちら カラー指定が挿入されていますね これをHTMLページで参照したわけです 手間が増えたような気もしますが 実際、そうでもありません CSSファイルの生成も、HTMLとの関連付けも Dreamweaverが自動的にやってくれますから 作業対象は、このSCSSファイルだけです この仕組みをわざわざ使うのは 変数という強力な機能があるからです このサンプルは非常に小さなサイトですが ドキュメントの規模がもっと大きくて 「$primary-color」が何万回も使われている場合 カラーの変更作業はどうなるでしょうか ここを開けば 「検索および置換」であちこちを探さなくても 目的の設定箇所があります 例えば、指定を変更して ピンクではなく 白、つまり「#fff」にしましょう 保存して これだけでCSSが変更され、ブラウザー上のプレビューに 白の指定が反映されます もちろん、ヘッダーも変わりました 同じ方法を使って、フォントカラーだけでなく フォントファミリー、文字間隔、余白、マージンなど 何でも変数にしておけば あちこちで使われる設定値を1か所で変更できます さて、プリプロセッサーの便利さは 変数が使えることだけではありません 次は「ネスト」機能を紹介します これは、HTMLに含まれる階層構造をそのまま書いて CSSセレクターを指定できる機能です ソースコードを見ながら説明しましょう HTMLの構造に沿って スタイルを設定していきます ここにある「ul」、つまり番号なしリストは 一番上のナビゲーション領域です 例えば、この部分のアンダーラインを消し アルファベットを大文字にしてみましょう Dreamweaverに戻ります CSSでは、複合セレクターという書式を使って 「nav」内の「ul」内のリスト内にある「a」タグに スタイルを指定できますが プリプロセッサーを使えば、ネスト構造をそのまま書けるので スタイル指定の対象箇所がわかりやすくなります SCSSでの書き方を説明しましょう まず、HTML内で使われている「.site-nav」を 対象として指定します 普通のCSSで書けるのは、ここまでです 内側でクラスを指定することはできません それが、SCSSプリプロセッサーなら書けるのです この内側で「ul」を指定して リストスタイルの種類「list-style-type」に 「none;」と入力します これで、箇条書きの黒丸は表示されなくなります 次は「li」のスタイルです もう一度HTMLを見ると 指定対象の「li」は「ul」の内側 その「ul」は「site-nav」の内側にあります ですから この「.site-nav」内にある「ul」のさらに内側に 「li」、つまりリストアイテムを指定します リストに含まれる個々の項目ですね さらに波括弧を付けます 「.site-nav」の中に「ul」、その中に「li」という ネスト構造ですね ここの下側マージンの高さを 3.75emにし、セミコロンを入れます 保存して ちょっと、CSSを見てみます 今のSCSSファイルをコンパイルすると どんなCSSが生成されるでしょうか これです 「.site-nav」の中の「ul」に対する 最初のスタイル指定が、この部分 さらに、「ul」の内側にネストした「li」は こういうスタイル指定になりました 複合セレクターを使って 下側マージンが設定されています 意図したとおりのCSSですね SCSSファイルを書くだけで自動生成されるのは とても便利です SCSSなら HTMLと同じ、わかりやすい形で階層構造を書いて 「.site-nav」の内側に「ul」のスタイル、その内側に「li」のスタイルを指定できます では、これを仕上げましょう SCSSファイルに戻って 上端メニューの「a」タグにスタイルを指定します クリックできるリンクのタグですね スタイル指定の対象にしたい「a」タグは 「site-nav」内にネストされた「ul」内の 「li」に含まれるものだけです この「li」の波括弧内に、「a」と 波括弧を追加し スタイル指定を書き込みます フォントサイズは1.15em 文字の修飾「text-decoration」は 「none」（なし）にすると デフォルトのアンダーラインがなくなります 文字間隔「letter-spacing」は、0.15em 文字変換「text-transformation」は テキスト全体の大文字、小文字指定ですね 大文字「uppercase」に統一します カラートランジションも付けましょうか 「transition」を 「color」に設定して トランジション効果の長さを0.3秒にします これは、新しい特別なプロパティなので webkit用の設定も必要です この行にカーソルを置いて MacならCommand+D、WindowsならCtrl+Dで 行を複製し、webkitプレフィックスを付けて 保存します ところで、注意事項を1つ ネストレベルが、これで4層になりました 「a」の上位には「li」があり、さらに 「ul」、「site-nav」のレベルがあります 4層くらいは問題ありませんが、むやみにネストを深くすると 当然、読みにくくなりますし サイトの実行速度にも影響します さて、ブラウザーの表示はどうなったかな アンダーラインが出なくなりました 大文字になって、文字間隔も変更されています まだ、文字カラーを設定していませんね ここも白にしましょう Dreamweaverで フォントカラー指定は「color」です ここは、やはり 「white」とするのではなく 例の便利な変数を使うことにします 色の名前を直接書く代わりに 先ほど、上で使ったのと同じ 「$primary-color」 この変数名を入力します 保存して またブラウザーで確認しましょう ほら、白になりました 別の色に変更したくなったときは もう一度、Dreamweaverで この変数の値を、例えば赤にしたら きっとキレイでしょうね！
そうでもないかな とにかく、簡単に変わりました 変数の値を1つ修正するだけで、CSS全体に反映されるから らくですね！
さあ、色は白に戻したことにして 最後に紹介するプリプロセッサー機能は 「ミックスイン」です いってみましょう ミックスインが何かというと たくさん並んだCSSプロパティを1つにまとめて 扱いやすくする機能です 長い長いCSSプロパティの羅列を あちこちに何度も書く必要がある場合 長いリストを何度もコピーするのは面倒ですが ミックスインというカタマリを作ってしまえば 小さくなって、手軽に扱えます 例えば、CSSグラデーションなどには最適ですね このサイトをスクロールしてみると グラデーションが使われています ここの右半分、アートワークの説明文に きれいなグラデーションの背景 さらにスクロールすると アートワークの背景に、またグラデーション 最後のフッターもグラデーション付きです グラデーションだらけのサイトですね どんなCSSを使って表示されているのか Dreamweaverで見てみましょう これは、完成版のサンプルコードです HTMLではなくCSSファイルを開きます 一番上に見えているクラスが 最初のグラデーションを設定する部分 ご覧のとおり けっこう面倒な記述が必要です 背景画像「background-image」を リニアグラデーション「linear-gradient」にして 変化の向きを角度で指定し 始点のカラー、終点のカラーを決めています 以上の情報が書かれているのですが あいにく、まだ新しいCSSプロパティなので 各種ブラウザー向けの記述を統一できません 主な種類のブラウザーに対する指定を 羅列してあります 「moz」の行はFirefox向け この行です 次の「webkit」は一番メジャーで Chromeなどが該当します 「ms」はMicrosoft製ブラウザー向けです 同じことを何度も書く必要があるので かなり長くなっています さらに、2つ目のグラデーション指定では 同様の記述がまた長々と続きます ずっと下に行くと、今度は フッター用のグラデーションもあります この調子で「moz」「webkit」「ms」の指定を 何度となく繰り返すことになります ミックスインの効果を確かめるには最適ですね では今から、これを削除します フッター用グラデーションの指定対象を メモしておいて、丸ごと消します 後で作り直しましょう 「footer」をメモして 削除します 別の指定箇所も探して 同じく消します。
こちらは「.artwork-3」と 「.artwork-piece」です ミックスインを書くとき必要ですから メモを忘れずに これが最後ですね。
クラスは「.artwork-1」と 「.artwork-description」です グラデーションを削除すると 表示はこうなりました。
ただの白い背景です こちらの左側にあったグラデーションと フッターのグラデーションも消えました 今から、ミックスインで作り直します SCSSファイルを開いて ミックスインをここに作成しましょう それには、「@mixin」と書いて スペース ミックスインの名前を付けます 名前は何でもかまいませんが 「gradient」と呼ぶことにします 波括弧を書いて 先ほどCSSファイルから削除したプロパティを 中に貼り付ければ これで 名前が付いたミックスインのできあがり 長いグラデーション指定が 1つのカタマリになりました では、使ってみましょう グラデーションを削除したときに クラス名をメモしましたね それを、この下に書きます 最初のボックスのクラス名は「.artwork-1」と 「.artwork-description」でした あの長いグラデーション指定の代わりに ミックスインを挿入します 「@include」の後にミックスイン名を書くだけで 新しいCSSファイルが自動生成されます 結果を見てみましょう。「
ソースコード」から 生成されたscss-styles.cssを開くと こうなりました 「@include」が展開され、代わりに 「background-image」の指定が入っています ブラウザーで見ると、どうでしょう 白地になった部分のグラデーションが復活しました これを繰り返すと、ミックスインの再利用効果が どんどん発揮されていきます Dreamweaver上のSCSSファイルに戻って、続けましょう 2番目の削除箇所にあったクラス名は メモによれば 「.artwork-3」と「.artwork-piece」です 波括弧を書いて 先ほどと同じく、長い記述の代わりに 「@include」で 「gradient」を読み込みます 再び、CSSの生成結果をブラウザーで確認 スクロールします。
これは1つ目 こちらが2つ目です ミックスインの便利さ、見えてきましたね 長いコードの羅列を ミックスインに閉じ込めれば SCSSのどこにでもインクルードできます ただし、このままでは問題がありますね 2か所のグラデーションが同じになってしまいました 元は違う色だったはずです そんなときは変数付きミックスインを使いましょう 先ほど出てきた、変数というものを ミックスインと組み合わせれば 使う場所によって変化を付けられます Dreamweaverに戻ってみると このミックスインには、カラーがハードコードされています 色が決め打ちなので いつも同じ結果が展開されます 違うカラーが使えるようにするには 決め打ちをやめて カラー指定の箇所を変数にします やってみましょう 変数を渡すには ミックスインの名前「gradient」の後に 丸括弧を付けて その内側に、変数名を指定します 変数名の前には「$」を付けてください 「$gradient-color1」という名前にしましょう これが、グラデーションの始点色になります グラデーションの指定には 終点も必要ですね 終点色へと徐々に変化していく効果なので カンマの後に 終点色の変数を指定します 「$gradient-color2」 カラー指定には これら 2つの変数を渡すことになるので 決め打ちのRGB値は削除しましょう その代わりに、丸括弧で囲んだ変数名を書きます 2つ目のカラーも同じように これをすべて削除し、丸括弧付きで 終点色の変数名を書きます 異なるブラウザー向けの設定が 並んでいますから、それらを 同じように書き直します 決め打ちのRGBよ、さらば！
終点カラーの決め打ちも同じように 書き直しましょう 修正 修正です 今度は、このミックスインを使う側です こちらにある 「@include」を修正して 変数の指定を付けましょう カラー値を渡す変数なので、丸括弧内に 始点色として、ピンクのRGB値と カンマで区切って、ピーチカラーの終点色 これだけで「gradient」ミックスインが読み込まれます 必要なのは変数値の指定だけ ちょっとした修正で、始点と終点のカラーを 渡せるようになりました 下のインクルードで これらの始点色と 終点色を渡しています ブラウザーの表示は うわっ、失敗！
ご心配なく。
Dreamweaverで直します 「.artwork-1」のインクルードは修正しましたが 「.artwork-3」の修正を忘れていましたね やりましょう 丸括弧の中に、始点色のパープルと、カンマ そして終点色を指定します 再びブラウザーです。
スクロールします 最初の箇所は ピンクとピーチですね 2つ目は、青とパープルになりました ミックスインはすばらしい！
もう1つ、フッターが残っています 「footer」は定義済みのHTMLタグなので 先頭のピリオドは不要です 波括弧の中に、上のインクルードをコピー＆ペーストして 2つのRGB値をフッター用に修正して ブラウザーを見ましょう グラデーションが1つ、2つ 一番下の3つ目も出ていますね これがミックスインの力です 変数を渡すことで、展開内容もコントロールできます このビデオでは、CSSプリプロセッサーの機能のうち 3つを説明しました。
いかがでしたか その1、変数。
手軽でわかりやすい機能です 私自身も一番よく使っています その2、ネスト クラスの内側にクラスを書くことができます その3、ミックスイン コードの長い羅列をカタマリにして 1行で書き表すことができます どれも、普通のCSSにはない機能ですが Dreamweaverが自動コンパイルして 標準CSSファイルを出力してくれます これが、その出力結果 変数は、実際の値で置き換えられ ネスト書式を使ったスタイル指定は 適切な複合セレクターに変換されています ミックスインの長いコードも実際に展開されました SCSSでは、1行のインクルードで済んでいたものです 従来、この機能を使うには コマンドライン、コンパイラー、設定などの面倒な作業が必要でしたが とても楽になりました 本当にありがとう、Dreamweaver ありがたいCSSプリプロセッサーのお話は これでおしまいです
