361CSSメタ言語とも言いますね。SASS/SCSSやLESSとかのことです。CSSだけでは出来ない便利な記述ができるすごいやつだよ。一度使い始めると通常のCSS編集が苦痛になるレベルで世界が変わります。昔のサイトの修正でCSSファイルしかないと「ほげぇーー!」ってなりますよね。ちなみに、昨年実施された海外のアンケートでは、9割弱の人が何らかのCSSプリプロセッサを使用しているそうです。国内はそこまで多くない気がしますが、それでも使用率はかなり増えてきているのではないかと思います。ResultsCSSプリプロセッサの導入方法や書き方などは検索すればいっぱい出てきますので、ここでは「こんな感じの便利なことができる」という紹介をしたいと思います。いうわけで、以下のようなHTMLとSCSSを書いてみました。}}で、その結果がこちら。使いどころが思いつきませんが、波っぽい動きができました。ご使用のブラウザによっては少し表示が変になっているかもしれません。その場合は諦めるか、別のブラウザを使うか、ブラウザの中の人に生卵でも投げつけるかしてください。ちなみに、上記SCSSから書き出されたCSSはこんな感じです。CSSだけでは書きたくないですね。-4s;}上記の例の中だけでもCSSプリプロセッサの便利なポイントはいくつかありますが、特に便利なポイントを2つ紹介します。変数で変更が簡単にSCSSでは変数を使って、よく使う値や変更が多そうな値をCSSの記述の外側で管理できます。10;の部分が変数ですね。上からそれぞれ、表示幅、表示高さ、アニメーションの速さ、子要素の数です。「幅いっぱいに表示したい」とか「アニメーションの速度をもう少し遅くしたい」といった修正があったときは、この変数をちょいちょいっと修正してCSSを書き出してしまえばOKです。CSSだけで書いていたと思うと......修正指示が入るたびに叫んでしまいますよね。「ちょっと変えるだけだから簡単でしょ〜?」とか言われたら、暴力による対話に発展する可能性さえあります。8s;※上記変数の値以外は変更していません。ループ(繰り返し)が使えるちょっとプログラムっぽいですが、CSSプリプロセッサは繰り返し記述が使えるので、連番クラスでちょっとずつ値を変化させていく、みたいなことが簡単にできます。}}この部分がループの記述です。.w.w10」までの記述になります。あれだけの記述がたったこれだけで済みます。CSSで書いていた場合、もし追加の修正指示で「幅いっぱいにしたら波1つ1つの大きさが目立つね!もっと細かくできない?」とか言われたら、追加部分を書くより先に退職願書いちゃいますよね。SCSSなら簡単に修正できます。300;※上記変数の値以外は変更していません。なって300分割してしまいましたが、流石にやりすぎでしたね。完全にただの波形になってしまいました。ブラウザによっては誤差のせいで波部分が幅いっぱいになっていないかもしれません。その場合は、もう分かっていますよね。生卵は持ったか?この例では変数と繰り返しくらいしか出ていませんが、他にも便利機能はいっぱいあります。興味を持ったら是非調べてみてください。さいごにこんな感じで、CSSプリプロセッサを導入すると色々と便利なことが多いです。単純に全体の記述量が減るので、作業時間が短くなります。可読性が向上するので、メンテナンスしやすさも格段にあがります。作業時間が短くなれば、それだけ他の部分に時間を割くことができます。原稿を流し込む際にしっかり読んでおかしいところがないか確認するとか、一旦作った後の全体的なバランスのチェックにより時間をかけるとか、サイト全体のクオリティアップに繋げることができます。保守にしても、CSSプリプロセッサなら同じ記述や値を1つにまとめることができるので、修正時にありがちな「あっちは直したけどこっちは直っていない」といったミスを回避しやすいです。CSSが書けるなら学習コストもそこまでかからないと思うので、まだ使ったことがない人は是非試してみてください。CSSプリプロセッサなしでは生きられない体になります。次の記事「最近麻雀ずっとやってる」へ「制作室の叫び」TOPへ書き手は私よろしければどうかご感想を!※コメントは、サイト管理者による承認後、ページに表示されます。Reserved.とりあえず。