世間様ではSCSSとかSassとかでCSSを書く方も多いのでしょうが、古代に生きているわたくしはいまだに古代よろしくCSSはぜーんぶ手打ちでございます。
何せ出身がプログラマではないのでプログラミングライクに記載していくSassのSASS記法とはもう致命的に相性が悪い。（と思い込んでいるだけかもしれない）
SCSS記法ではどう？　と言われましてもそもそもPCにRubyが入っていない。そもRubyってナニ？

おかげでCSSは膨れあがる一方でその整形からはそっと目をそらしているような有様。
これではいけませんね、ということで、ちょっとSassを勉強する前に、Rubyの使い心地を確かめるためにも、今まで目を背けていたCSSの整形を行おうと思いたち、CSSCSSなるものを使ってみようと思います。

 

CSSCSSとはRubyで動くCSSプロパティの重複を教えてくれるアプリケーション（gem）

CSSCSSはCSSプロパティの重複を教えてくれるアプリケーション（gem）です。
gemとかいきなり知らない単語を出されると涙ながらにGoogle先生に尋ねに行く日々です。

• CSSCSSは、Rubyというオープンソース（要約すると誰でも使える、という意味）の動的プログラミング言語。
• 動的プログラミング言語とは、コンパイル（コンピューターが実行前にプログラムを機械語に翻訳する事）時に行うことを、実行時に行う高水準言語のプログラミング言語処理系言語。
• つまりRubyはこちらが指示したプログラムを「翻訳→実行」ではなく、「翻訳と実行」を同時に行うなんかすごいプログラム言語。

gemはこのRubyという言語で利用されるシステムで、ライブラリとして存在していることが多いようです。
アプリケーションというくらいなので、Rubyで動かすソフトウェアくらいの感覚でいいのだろうか……。

CSSCSSは、以下のような手順で利用します。

1. RubyでCSSCSSというgemをインストールする
2. CSSファイルを指定して、実行する
3. 重複箇所が提示される

Rubyをインストールする

Rubyのダウンロードはこちらから　https://www.ruby-lang.org/ja/

2018年2月16日現在で安定版は2.5.0だそうです。

WindowsのではRuby Installerというソフトが利用されることがおおいようなので、さっそくそちらをDLしていきます。Macなどに関しては公式サイトを参照してくださいませ。

Windows版 Ruby Installerはこちら　https://rubyinstaller.org/

「よくわかんねえなら2.4.Xを使えよ」ということでそれをクリック。

Ruby 2.4.3-1 (x64)をクリックします。ｘ64が64ビットでx86は32ビットだそうです。なぜ86なんだ……。

インストーラーはDLしてからすぐに実行されます。利用規約に目を通して、「I accept the License」にチェックを入れてネクストしましょう。

Rubyをどこに入れますか、と尋ねられるので、任意の場所を選びます。そのままインストールへ。

Finishを押してインストーラーを終了します。ここまでで一時間くらい消費しています。（主に英訳で）（決して2.4.Xを選ばなかったわけではない）
そうするとすぐにこんな画面が。

which components shall be installed？

(;´･ω･)＜ｴｰ

1、2、3と選んでエンター、と言われたので、とりあえず1を押してみます。

MSYS2　というもののインストールが始まります。……？　とりあえずフォルダを新規で作成し、ショートカットをRubyにセット。
Windowsでコマンドラインの環境を整えるもの……らしい……そろそろ頭がおかしくなりそうですね。

さてDLが終わったところでもう一度コマンドの画面に戻ってつぎは2を押してみます。

( ﾟДﾟ)

な……
なんですの……？

ああ……もうやめたい……なるほどこれはエンジニアリング……紙媒体でやってたデザイナーが出てくるところではない……。
WEBデザイナーにエンジニアやプログラマさんが出身の理由が多いのが本当に身に染みる……。

最終的に「successed」で終わったのでエンターしたら画面は消えました。これでいいのでしょうか。

 

次回からの起動は、スタートメニューの「Ruby」から「Start Command Prompt with Ruby」で可能です。

CSSCSSを実行する。

とりあえずインクループのCSSで試してみます。

CSSCSSのサイトはこちら。https://zmoazeni.github.io/csscss/

そうして以下を実行。

と出てくる。なんですか。もうこれ以上おなか痛くなりたくありません。

えー「＄」いらないんでしょうか。「＄」ってなんですか？

なんかよくわかんないけどはいったってことでよいんでしょうかっ？！

ならば実行してみましょう。

わかりますかこれがプログラミングのぷのｐの字もわからん人の右往左往ですよ。

で

で　き　た

 

ああああできたあああああ

……。

想像以上にダブり多いな？！？！

 

CSSCSSで判明したダブりを修正してもっときれいに整形する

よく使っているCSSの整形ツールがこちら。

CSScomb

サイトはこちら　http://csscomb.com/

Build configから自分の思う通りのコードが設定できます。計24項目を選んでクリックしていくと、Try onlineでそのコードが出力可能。

Format CSS Code

サイトはこちら　http://www.cssportal.com/format-css/index.php

簡単なプリセット設定ができるので重宝。
1ライン構成のCSSがすきなので、よくそのスタイルに変換するときに使っています。

http://www.cssportal.com/　はいろんなCSSのジェネレーターがあるのでこちらも重宝しています。プロパティもいい感じに収録されていて、アニメーションまで見れる万能サイト。

Rubyが搭載できたのでもう少しきれいなCSSを提供できそうです。
重さも軽くなるし、見やすくなるし、一石二鳥ですね。

Rubyについては……A氏かM氏がいつか解説してくれるって信じてます……。