こんにちは、とらラボのY.I.です。12月も中旬に差し掛かり寒い毎日が続きますが、みなさんいかがお過ごしでしょうか。
さて今回は、虎の穴ラボ Advent Calendar 2020 - Qiita 15日目の記事として、私Y.I.が、CSSを使ってイラストを描いていく上でのオススメの環境と、オススメのCSSプロパティを紹介したいと思います。
また虎の穴ラボ Advent Calendar 2020 - Qiitaでは14日目にY.Nさんが「Docker + GradleでKotlin WEBアプリの開発環境＋本番環境の構築をやってみよう」を、 16日目はH.Hさんが「Chromeの拡張機能でショートカットを作る二つの方法」を書かれています。どちらも非常に興味深い記事ですので、本記事と合わせて是非ご覧ください。
それでは本編スタートです！
See the Pen neko by YUSUKE IWADE (@benibana2001) on CodePen.
かわいいﾈｺﾁｬﾝも登場するよ
〜目次〜
- 1.環境構築
- 1.1. テンプレートエンジンとCSS PreProcessorを使う理由
- 1.2. ローカルにPug+Stylus環境を構築する
- 1.3. CodePenでPug+Stylus環境を用意する
- 2.CSSで絵を描いてみよう
- 2.1. 猫🐈（clip-path）
- 2.2. ボール🥎（radial-gradient）
- 2.3. 3D表現（transform-style）
- 3.おわりに
1. 環境構築
まずはじめに、CSSで絵を描く際のオススメの環境（テンプレートエンジン + CSS PreProcessor）について、オススメする理由と、環境構築方法について紹介したいと思います。
1.1.テンプレートエンジンとCSS PreProcessorを使う理由
テンプレートエンジンを使う理由についてですが、これは「CSSで絵を描く際には多くのHTML要素を作成・修正する必要がある」ためです。
CSSで絵を描いたことのある方ならばわかると思いますが、 CSSでのお絵かきは１%の閃きと９９%の根気によって成り立っています。CSSお絵かきと対峙する時、人は「HTMLとCSSを書いては消してを繰り返す地獄」と対峙するのです...。
そんな地獄に吊り下げられた一本の蜘蛛の糸がテンプレートエンジンです。テンプレートエンジンを使うとことで、HTMLの記述コストを大幅に下げることができます。多くのDOMを調整する必要のあるCSSお絵かきにおいては、とても大きな力を発揮します。
またCSS PreProcessorを使う理由ですが、こちらもテンプレートエンジンと同様に、記述コストを下げる目的で導入します。
1.2. ローカルにPug+Stylus環境を構築する
次に、ローカル環境の構築手順について記します。今回はPug（テンプレートエンジン）とStylus（CSS PreProcessor）を例に取り紹介します。
〜ローカル環境構築手順〜
- PugとStylusのそれぞれをNPMでインストール
- PugとStylusのビルドを（watchして）常時実行
- VSCodeの拡張機能「LiveServer」を使用してブラウザ表示
上記の手順について、一つ一つ見ていきます。
まず「1. PugとStylusのそれぞれをNPMでインストール」についてです。ここではPugを使用するために、npmコマンドを使用してpugとpug-cliをインストールしておきます。またお好みのCSS PreProcessorについてもここでインストールしておきます。
次に「2. PugとStylusのビルドを（watchして）常時実行」です。PugもStylusも、HTML上に表示するためにはビルドを行う必要があります。webpackのようなバンドラーと異なり、未ビルド状態でもブラウザ表示可能な機能（開発モード）は存在しないため、PugとCSS PreProcessorのそれぞれの監視モードを使用して常時ビルドを行う必要があります。私は以下のようなnpmスクリプトを用意し、実行しました。
{ "scripts": { # Pugの変更を監視 "watch:pug": "npx pug src/pug/ -o ./ -P -w", "build:pug": "npx pug src/pug/ -o ./ -P", # Stylusの変更を監視 "watch:stylus": "npx stylus -w src/styl/ -o ./", "build:stylus": "npx stylus src/styl/ -o ./", ＃ビルド専用コマンド "build": "npm run build:stylus && npm run build:pug" }, "devDependencies": { "pug": "^3.0.0", "pug-cli": "^1.0.0-alpha6", "stylus": "^0.54.8" } }
最後に「3. VSCodeの拡張機能「LiveServer」を使用してブラウザ表示」です。VSCodeの拡張機能であるLive Serverを使用することで、コードの内容をリアルタイムでブラウザ表示することが可能になります。
これら3つのステップを通して、ローカルでCSSお絵かきをする環境が整いました。
1.3. CodePenでPug+Stylus環境を用意する
これまでの流れで、ローカルでCSSお絵かきをする環境が整ったかと思います。しかし、これらの環境を構築するにはそれなりの時間と手間がかかります...。
環境構築をするのに気が進まない方には、CodePen（オンラインエディタ）を使用した方法をお勧めします。
CodePenではPugをはじめとした各種テンプレートエンジンや、Stylusをはじめとした様々なCSS PreProcessorが予め用意されており、これらを用いてコーディングを行うことができます。環境構築にかかるコストがグッと下がるため、初めてCSSお絵かきに入門される方にはこちらの方法がオススメです。
またCodePenは、ReactやVueといったライブラリ（フレームワーク）の記述も可能であるため、お絵かきに興味のない方も、一度は触れてみても良いかもしれません。
2. CSSで絵を描いてみよう
ここでは実際に私が描いた絵を紹介するとともに、その中で使用しているCSSプロパティ・関数について取り上げたいと思います。
2.1. 猫🐈（clip-path）
See the Pen neko by YUSUKE IWADE (@benibana2001) on CodePen.
こちらは冒頭で紹介させていただいた、猫のイラストです。 このイラストではクネクネとした猫の尻尾の形を表現するために、clip-pathというプロパティを使用しています。 developer.mozilla.org
このプロパティは、HTML要素の切り欠き（クリッピング）を行うことができます。 複雑な形を表現する上では欠かせないプロパティで、CSSイラストを描いていく上であらゆる場面で使用する事になる大変便利なプロパティの一つです。
2.2. ボール🥎（radial-gradient）
See the Pen ball by YUSUKE IWADE (@benibana2001) on CodePen.
リアルな球体をCSSで表現したと思って描いたイラストです。 この「ボール」イラストの中では、radial-gradient関数を使用し、放射状に広がる画像を作成し、ボールのbackground-imageに当て込んでいます。 developer.mozilla.org
こちらのイラストではリアルな球体を描くために、実在の光源がページ内に存在すると仮定して記述を行いました。
光源がページの左上に存在すると仮定したとき、球体の左上面には光が強く当たり、逆に球体の右下面には陰が強く表れます。この表現を演出するために、radial-gradient関数を使用してグラデーションを付与しました。
グラデーションを付与するCSS関数は、radial-gradientの他にもlinear-gradient関数というものが存在します。radial-gradientが放射状に変化するグラデーションを生み出す一方、linear-gradientは直線的な変化のグラデーションを作り出します。
今回の「球体に陰をつける」というケースにおいてはradial-gradientの方が適していたため、こちらを使用しました。
2.3. 3D表現（transform-style）
See the Pen cube3d by YUSUKE IWADE (@benibana2001) on CodePen.
こちらのイラストでは、3D表現を演出するために、transform-styleプロパティを使用しました。このプロパティは要素の表示方法を"2D"もしくは"3D"として設定することができます（未設定の場合は2D）。
表現の幅が広がる非常に便利なプロパティである反面、W3Cにおいてはまだ草案レベルであり、ブラウザによっては動作しないことがあります。そのため使用にあたっては注意が必要です。
3. おわりに
今回は「Pug+CSSでお手軽にCSSお絵かきを始めよう！」と称して、CSSお絵かきの環境構築方法と、オススメのCSSプロパティ・関数を紹介しました。
新年のスタートはCSSで書き初めなどいかがでしょう...?! ぜひこの機会に皆さんも「Pug+Stylus」でCSSお絵かきにデビューしてみてください！！
P.S.
虎の穴ラボではいくつかのオンラインイベントを企画しております。是非ご参加ください！！
【オンライン】とらのあなラボエンジニア座談会Vol.5【リーダー対談】
12/18(金) 19:30から「虎の穴ラボ」社員によるトークイベントを準備しております。 yumenosora.connpass.com
TORA LAB Management & Leader Meetup
12/23(金) 19:30からとらのあなが運営している「とらのあな通販」と「Fantia」の開発の魅力を発表し、参加いただいた方の気になる点やご質問に答えるイベントとなっています。 yumenosora.connpass.com
その他採用情報
虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。 カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。 カジュアル面談や採用情報はこちらをご確認ください。 yumenosora.co.jp
