CSS4以降を見据えてSass(Scss)やCssnext(PostCSS)を使おう

CSSのイメージ

まとめ

移り変わりの早いウェブ業界。
その中でも今は大きく変化する時期に来ているのかなと、思う。

10数年前、本格的にウェブ制作をしだしたこと、今では当たり前のCSSを使うことができない、使えるようになろうとしなかった人たちが淘汰されていくのを見てきた。

jQueryが流行だしたころもCSSの時ほどではないけど、似たようなことがあった。

今、なんとなくそれと同じような感覚を感じています。

今後どうなるか分からない、であれば新しい技術を身に着けつつ、枯れた技術は正しくしっかりと使いこなすことが大事。

Sass(Scss)にしろCssnext(PostCSS)にしろ、新しいからどうのだけじゃなく、便利で効率よく仕事できるので、使った方が良いですよ。

最初に注意

CSS4なんてもものはないかもしれませんが、分かりやすくするために、今後出てくる新しいCSSをCSS4としています。

ScssやCssnextの話をします

たまにはエンジニアっぽい話もしたいなと思いました。
思ったけども、基本的に何でも屋で仕事してますが、デザイナー兼フロントエンドがもともとの仕事。

なのでCSS関連を今回は。

ここ数年は指定されない限りはCSSはSass(Scss)で書いています。
CSSプリプロセッサは他にもありますが、Scss使ってます。

しかしながら、最近はCssnext(PostCSS)もありかなと思って使っています。

どちらにしても、CSSプリプロセッサを使うにはそれなりの理由があります。

CSSプリプロセッサ、なんやかんやをそれぞれの構文で書いて、CSSに変換して使う感じと思ってください。

そもそもScssを使いだした理由は単純に便利だから。
使いだした当時はLessとどっちにするか悩みましたが、最終的には勘でSass一択に。

SassにしろLessにしろ、cssnextにしろ、最初がとっつきにくそうに感じるかもですが、実際はコンパイル方法さえわかってしまえば、いままでCSS書いていた人なら問題はないくらい簡単なはずです。

そもそも、素のCSS書いても動くわけで。

何が便利

何が便利なのか。

便利機能は山ほどあるのですが、その中でも。

  • インポート
  • ネスト
  • 変数
  • オートプレフィクス
  • カスタムセレクタやforなどのまとめてなんかするやつ

このあたりでしょうか。

MixinやExtendも便利ですが、いらないこともあります。

インポート

これは素のCSSのインポートとはちょっと違います。

プリプロセッサはコンパイル・トランスパイルして実際に使用するCSSに変換するため、好きなところでインポートできます。

そうして作業時には複数ファイルだったものを1ファイルにまとめて使用することができます。

これは複数人での作業時にも便利です。
作業中は小分けに整頓されたソースコードでわかりやすく編集しつつ、実際の公開している環境では1つのファイルになっているためリクエストを減らしてサイトの表示高速化をサポートすることができます。

ネスト

単純にソースコードが見やすくなります。
多用しすぎるのはどうかなとう場面も多々ありますが、便利です。

/* -------- 
 * CSS
 * ----- */
.foo {
    margin: 10px;
}
.foo a {
    background-color: #fff;
}
.foo a:hover {
    background-color: #000;
}


/* -------- 
 * Scss
 * ----- */
.foo {
    margin: 10px;
    a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

/* -------- 
 * Cssnext
 * ----- */
.foo {
    margin: 10px;
    & a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

ついでに言うと、ネストさせてると.fooを変更したくなった時、そこだけ変えれば他もまとめて済むので手間が省けます。

変数

プログラミングを少しでもしたことがあれば、CSSにも変数欲しいと思いますよね。
ScssやCssnextは変数使えます。

プログラミングをしたことがなくても、そう難しいことではないです。

余談ですが、変数、って呼び方が敷居を上げてるような気がするんですよね。
型指定とかは抜きにして、数以外も格納できるわけで。
昔後輩になんやら教えてたときに、変数なのに文字も?みたいなこと言われたことあります。みんなありますよね?

話を戻します。

CSSにコンパイル後は変数ではなく固定の値としてコンパイルされるものです。
「なんだよ」って思うかもしれませんが、これはこれで便利です。

定数的な感じでもあります。
そんなわけで、「あれってなんだっけ?」を防ぐのにも使えます。
カラーコードを変数に格納して、必要なところで呼び出すなどは、多用しています。

最近はスタイルガイドなどで制作前の段階でしっかりとしたスタイル設計をすることが多いかと思います。

俺の場合も小さなサイトでもクライアントの案件では、スタイルガイドをまず作ります。

スタイルガイドで決められたカラーコードなどを変数に代入。
そうすると、いちいち「あそこの色のコードなんだっけ?」、「こんな感じでいいや」などという状態が防げます。

複数人で作業したり、のちのち作業したりするときも、間違いがなく、統一されたイメージのサイトが作成でき、クオリティが維持しやすくなります。

もちろんコンパイル前の演算にも使えますし、使い方次第ですね。

/* -------- 
 * CSS
 * ----- */
.foo {
    color: #000;
}
.bar {
    background-color: #000;
    color: #fff;
}

/* -------- 
 * Scss
 * ----- */
//変数を作成
$color-black: #000;
$color-white: #fff;

//変数を呼び出してソースを書く
.foo {
    color: $color-black;
}
.bar {
    background-color: $color-black;
    color: $color-white;
}

/* -------- 
 * Cssnext
 * ----- */
/*変数を作成*/
:root {
    --color-black: #000;
    --color-white: #fff;
}

/*変数を呼び出してソースを書く*/
.foo {
    color: var(--color-black);
}
.bar {
    background-color: var(--color-black);
    color: var(--color-white);
}

Cssnextの記述はなんか慣れないし面倒です、個人的に。

オートプレフィクス

ベンダープレフィクスが勝手につくやつね。
これは単純に、まぁ、楽。
こんなん手作業でやるもんじゃないよ、実際。

カスタムセレクタ

Cssnextの機能です。

/* -------- 
 * Cssnext
 * ----- */
/*カスタムセレクタを定義*/
@custom-selector :--foobar .foo, .bar, .baz;

/*カスタムセレクタを使用*/
:--foobar {
    color: #fff;
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.foo,
.bar,
.baz {
    color: #fff;
}

Scssにカスタムセレクタはないですが、eachと配列を使えば同じような事ができます。
プログラムチックですね。

/* -------- 
 * Scss
 * ----- */
//配列を作成
$foobar: '.foo', '.bar', '.baz';

//配列でループ
@each $val in $foobar {
    #{$val} {
        color: #fff;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
 .foo {
    color: #fff;
}
 .bar {
    color: #fff;
}
 .baz {
    color: #fff;
}

もうちょっと工夫すればCssnextの結果と同じようにクラスをまとめて出力もできると思うけど、面倒なのでこれで。

同じようにくるくると回すにはforもあります。
例えばマージン用のクラスを10px刻みで100まで作るとします

/* -------- 
 * CSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}
/*これを100まで繰り返す*/

こんな風に100まで1回コピペと修正をすればできます。
できますが、面倒だしソースの見通しも悪いですね。

で、Scssなら

/* -------- 
 * Scss
 * ----- */
//ループ
@for $i from 1 through 10 {
    $val : ($i*10);
    .mg#{$val} {
        margin: #{$val}px;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}

/* ~ 中略 ~ */

.mg100 {
    margin: 100px;
}

ちゃちゃっとできます。

ね、ScssもCssnextも便利でしょ?

という訳で便利なことが満載です。
これ以外にも便利で効率的な機能がいろいろあります。

CSSを圧縮したりもできちゃうので楽です。

それぞれで、できることできないこともありますが普通にCSS書くより効率的で、ソースコードの管理もしやすくなります。

ScssからCssnext

ScssからCssnext、どちらもCSSを拡張して便利に効率的に制作することができます。

ですが、立ち位置はちょっと違うかなと思います。

ScssはそもそもCSSの不便なところを拡張して便利にするためのもの
CssnextはCSSに新しく実装されるであろう便利機能を、先行して使えるようにするもの

乱暴ですが、こんな感じに考えるといいのかなと。
※Cssnextの構文は策定中の新しいCSSとかけ離れていることももちろんあるので、注意が必要です

そんなわけで、jQuery(Scss)からBabelでES6(Cssnext)みたいな感じに考えてみたらわかりやすいかもしれません。

今後標準化されていくであろう、新しいCSS。
最初にも書きましたが、どうなるかわからないのでCSS4としておきます。

CSS4以降ではCSSプリプロセッサでしかつかないことが、デフォルトで使えるようになる部分もあります。

jQueryから着想を得てJavaScriptの新しいAPIができたことがあるように、SCSSなどをヒントにCSS4以降に新しく追加されるものもあるでしょう。

CssnextはCSS4以降の機能を先行して実装しているところが多いです。
なので、最近はCssnextを使ってみています。

とはいえ、少し上で書いた通り新しいCSSと全く同じとはならないのも事実。

であれば、実際の制作ではもうしばらくはScssでもいいかなと感じているのも事実です。

この辺は好みでいいんでないか?と思いますが、なんにしても勉強しておくに越したことはありません。

Cssnextを使ってみると、今後CSSはこういう風になっていくのかなと将来が感じられたり、Scssとの違いにより一層興味を引かれたりします。

仕事で使うなら

とうことで、実際に業務に使うことを考えたらScssをまずはやってみることをお勧めします。
使われている率も多いですし、資料もググれば沢山出てきます。
プログラム的部分では、分かる人はすぐに楽できますし、分からない人は今後JavaScriptなどをやるきっかけにもなるかもしれません。

個人的結論は

  • 仕事ならScss
  • 趣味と学習ならCssnext

こうなります

肝心のCSSに変換のコンパイル・トランスパイルの仕方は・・・

nodeでGulpやらwebpackやらなんやらで、とそこまで書いてると長いので・・・調べればいくらでも出てきますしね。

たぶん、この辺でつまずいたり敬遠したりしてる人が多いのではないかなと、とも感じます。
これもそこまで難しくはないんだけどね。

機会があれば初めての人でも簡単に使える、ってところまで書けたらなと言いつつ、今回はこの辺で失礼いたします。

ついでに勉強会の宣伝

勉強会を主催しています。

2017年12月16日土曜日にいつもよりちょっとだけ規模の大きい勉強会をやります。

LT(ライトニングトーク)ともくもく自習の2本柱で行います。
ScssやCssnextも学べるかもです、保証はないですけど・・・。

勉強会はConnpassにて募集しています。
ゆるゆるIT勉強会のConnpass募集ページ

今までの勉強会のことを記事にもしています。
今までのゆるゆるIT勉強会の記事

レスポンシブウェブデザインを再確認してみる

JB20140818

お盆休みなんて特になかった、JETBABY管理人です。
ご無沙汰です。

最近レスポンシブなサイト制作をすることが重なっているので、ちょっと自分の中で再確認したいと思います。
今回から数回に分けて、レスポンシブサイトの制作についてまとめてみる予定。

ということで、レスポンシブ、レスポンシブウェブデザインとはどんなものや?というのを先ずはざっくり。

「HTMLはワンソースでCSSなどで画面幅によってレイアウトを最適化させる手法」

という感じでしょうか。

どんな種類があって、どんなメリットでメリットがあるのでしょうか。
簡単なサンプルを作ってみましたので、そちらをご覧くださいませ。

レスポンシブデザインの種類としては大きく分けて以下の5つがあります。

  • Fluid Grid(Mostly fluid)
  • Column Drop
  • Layout Shifter
  • Off Canvas
  • Tiny Tweaks

サンプルは種類ごとにページを作ってあります。
各種類がどんなものなのかもサンプルに記載しておきましたので、どうぞ。

レスポンシブウェブデザインのサンプルデモ

サンプルの補足として・・・

なによりもあくまでサンプルですという、逃げを先に謳っておきます。

このデモではHTMLの構造はすべて同じでCSSだけ変えています。
本来はレイアウトごとにHTMLの構造も変化させるべきだとおもいます。
3カラムの横並びもCSSでtabll-cellとか使えばもっと簡単にできます。flexboxとかでも同じく簡単にできる場合もありますが、まだまだ環境に依存する部分が多いので面倒なので使っていません。

ブレイクポイントの調整は細かくしていないので、若干レイアウトが狂う幅がすうピクセル単位であると思います。jQueryで左右のカラムの高さをあわせたりしてる部分で特に。

基本的にPC、タブレット、スマホといった形で画面幅にあわせて3段階でレイアウトが変わります。

とはいえ、モバイル実機では確認していません。実機確認は結構大変なので。うちにはAndorid1.6、Andorid2.3、Andorid4.0が2機、Andorid4.2、iPhone4s(iOS6)、iPhone5s(iOS7)、iPad(iOS6)、Win8.1タブとありますが、まぁ、どれもこれもちょっとずつズレたりと・・・。

最後になんかサンプルのメリット・デメリットにネガティブなこと書いてるんですが、レスポンシブデザインが嫌いなわけではない。むしろ好きだ。
でも使う意味は考えないと火傷するぜ!ということが言いたかったということをお伝えします。

レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons

JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

[html]<link rel="stylesheet" href="css/rrssb.css" />[/html]

HTMLはこんな感じで

[html]
<ul class="rrssb-buttons clearfix">
<li class="email"> … </li>
<li class="facebook"> … </li>

<li class="googleplus"> …</li>
</ul>
[/html]

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery.1.10.2.min.js"><\/script>’)</script>
<script src="js/rrssb.min.js"></script>
[/html]

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。