記事の詳細

世間様では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を使えよ」ということでそれをクリック。

便利ツールCSSCSSを導入【Rubyインストール】

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

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

便利ツールCSSCSSを導入【Rubyインストーラー】

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

便利ツールCSSCSSを導入【Rubyインストーラー】

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

便利ツールCSSCSSを導入【Ruby開始画面】

which components shall be installed?

(;´・ω・)<エー

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

便利ツールCSSCSSを導入【Ruby開始画面】

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

便利ツールCSSCSSを導入【MSYS2】

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

便利ツールCSSCSSを導入【MSYS2】

( ゚Д゚)

な……
なんですの……?

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

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

 

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

便利ツールCSSCSSを導入【スタートメニュー】

CSSCSSを実行する。

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

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

そうして以下を実行。

便利ツールCSSCSSを導入【CSSCSS実行】

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

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

便利ツールCSSCSSを導入【CSSCSS実行】

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

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

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

便利ツールCSSCSSを導入【CSSCSS実行】

で き た

 

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

……。

想像以上にダブり多いな?!?!

 

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

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

CSScomb

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

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

Format CSS Code

便利ツールCSSCSSを導入【Format CSS Code】

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

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

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

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

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

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る