TIPSコメントを書く世間様ではSCSSとかSassとかでCSSを書く方も多いのでしょうが、古代に生きているわたくしはいまだに古代よろしくCSSはぜーんぶ手打ちでございます。出身がプログラマではないのでプログラミングライクに記載していくSassのSASS記法とはもう致命的に相性が悪い。言われましてもそもそもPCにRubyが入っていない。そもRubyってナニ?おかげでCSSは膨れあがる一方でその整形からはそっと目をそらしているような有様。これではいけませんね、ということで、ちょっとSassを勉強する前に、Rubyの使い心地を確かめるためにも、今まで目を背けていたCSSの整形を行おうと思いたち、CSSCSSなるものを使ってみようと思います。CSSCSSを実行する。CSSCSSで判明したダブりを修正してもっときれいに整形するCSSCSSとはRubyで動くCSSプロパティの重複を教えてくれるアプリケーション(gem)CSSCSSはCSSプロパティの重複を教えてくれるアプリケーション(gem)です。gemとかいきなり知らない単語を出されると涙ながらにGoogle先生に尋ねに行く日々です。CSSCSSは、Rubyというオープンソース(要約すると誰でも使える、という意味)の動的プログラミング言語。動的プログラミング言語とは、コンパイル(コンピューターが実行前にプログラムを機械語に翻訳する事)時に行うことを、実行時に行う高水準言語のプログラミング言語処理系言語。Rubyはこちらが指示したプログラムを「翻訳→実行」ではなく、「翻訳と実行」を同時に行うなんかすごいプログラム言語。gemはこのRubyという言語で利用されるシステムで、ライブラリとして存在していることが多いようです。アプリケーションというくらいなので、Rubyで動かすソフトウェアくらいの感覚でいいのだろうか......。CSSCSSは、以下のような手順で利用します。https://www.ruby-lang.org/ja/2018年2月16日現在で安定版は2.5.0だそうです。Installerというソフトが利用されることがおおいようなので、さっそくそちらをDLしていきます。Macなどに関しては公式サイトを参照してくださいませ。https://rubyinstaller.org/「よくわかんねえなら2.4.Xを使えよ」ということでそれをクリック。(x64)をクリックします。x64が64ビットでx86は32ビットだそうです。86なんだ......。インストーラーはDLしてからすぐに実行されます。License」にチェックを入れてネクストしましょう。Rubyをどこに入れますか、と尋ねられるので、任意の場所を選びます。そのままインストールへ。Finishを押してインストーラーを終了します。ここまでで一時間くらい消費しています。(主に英訳で)(決して2.4.Xを選ばなかったわけではない)そうするとすぐにこんな画面が。́・ω・)<エー1、2、3と選んでエンター、と言われたので、とりあえず1を押してみます。いうもののインストールが始まります。フォルダを新規で作成し、ショートカットをRubyにセット。Windowsでコマンドラインの環境を整えるもの......らしい......そろそろ頭がおかしくなりそうですね。DLが終わったところでもう一度コマンドの画面に戻ってつぎは2を押してみます。゚Д゚)な......なんですの......?ああ......もうやめたい......なるほどこれはエンジニアリング......紙媒体でやってたデザイナーが出てくるところではない......。WEBデザイナーにエンジニアやプログラマさんが出身の理由が多いのが本当に身に染みる......。最終的に「successed」で終わったのでエンターしたら画面は消えました。これでいいのでしょうか。Ruby」で可能です。CSSCSSを実行する。インクループのCSSで試してみます。CSSCSSのサイトはこちら。https://zmoazeni.github.io/csscss/そうして以下を実行。csscssと出てくる。これ以上おなか痛くなりたくありません。えー「$」いらないんでしょうか。「$」ってなんですか?なんかよくわかんないけどはいったってことでよいんでしょうかっ?!ならば実行してみましょう。https://サイトURL/ここにパス/style.cssわかりますかこれがプログラミングのぷのpの字もわからん人の右往左往ですよ。たああああできたあああああ......。想像以上にダブり多いな?!?!CSSCSSで判明したダブりを修正してもっときれいに整形するよく使っているCSSの整形ツールがこちら。configから自分の思う通りのコードが設定できます。onlineでそのコードが出力可能。http://www.cssportal.com/format-css/index.php簡単なプリセット設定ができるので重宝。1ライン構成のCSSがすきなので、よくそのスタイルに変換するときに使っています。いろんなCSSのジェネレーターがあるのでこちらも重宝しています。プロパティもいい感じに収録されていて、アニメーションまで見れる万能サイト。Rubyが搭載できたのでもう少しきれいなCSSを提供できそうです。重さも軽くなるし、見やすくなるし、一石二鳥ですね。Rubyについては......A氏かM氏がいつか解説してくれるって信じてます......。この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。インクループ株式会社デザイナー。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。ホームページ制作、WEBマーケティングページ上部へ戻る。