こんにちは。ForSchool事業部の石上です。だし巻き卵が好きです。
やりたいこと
さて、今回はCSSで遊ぶだけの記事です。以前、RubyWorld Conferenceへ参加させてもらった際、自社ブースでStudyplusのロゴに付箋をはっつけてベストRuby本を投票してもらうみたいなやつをやっていたことがあります1。あれをオンラインでやれたら面白そうだなと思ったのですが、思っただけで何もしていませんでした。今回それをふと思い出したので、ロゴをCSSで描いてみようという感じです。
ロゴを見てみる
ロゴを見てみると、長方形と三角形、そしてそれらを傾けて並べることが必要そうです。ひとつずつやっていきます。
長方形
長方形は簡単です。widthとheightとbackgroundを指定するだけです。
三角形
三角形はちょっとむずかしいです。調べてみると、どうやら三角形をCSSで描くときは、border-widthを使えば良いようです。
border-width
MDNでborder-widthのページを見てみます。
border-widthに値を4つ指定すると、 border-width: 上 右 下 左の指定になるみたいです。さらにここに色をつけてみるとわかりやすいです。borderは上下左右指定すると、それぞれが台形になるんですね。
それぞれ別の色を指定すれば、きれいに三角形ができるまでの過程がわかりやすいので、アニメーションさせてみました。
See the Pen Animation of making triangle by gaaamii (@gaaamii-the-sasster) on CodePen.
それぞれのborder-widthをboxの幅の半分に指定したところ、boxの中身が全部borderで埋め尽くされ、きれいに三角形で四等分されました。なお、border-box: 0にしておかないとbox内の領域をそのまま保とうとしてしまうので、boxに大きいborderが付くだけになってしまうので注意です。
表示したい部分以外をtransparentにすることで1つの三角形にする
下のborderだけ色を付けほかは透明にすることで、色をつけたところの三角形だけを表示できます。さらに、伸ばしたい辺のborder-widthをboxと同じ長さに、かつ向かい合う辺のborder-widthを0に、それ以外の辺はboxと半分の長さにすることで、いい感じにboxの幅と同じ長さの底辺の二等辺三角形が描けました。
描いていく
長方形と三角形が描けるということは、なんだか描けそうな気がしてきました。やっていきます。
マークアップ
まずはHTMLを書きます。これでどうでしょうか。
<i class="logo"> <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="tip"></span> </i>
ロゴを構成するのは5本の線と鉛筆の先でしょう。
5本の線をCSSで描く
まずは、こんな感じの線を描いてみたいです。何年もStudyplusを利用したり開発に関わってきた身としては、もうすでにこれでStudyplusという感じさえします。これくらいなら自分のCSS力でもスッと書けそうです。
:root { --line-width: 20px; --line-height: 100px; } .line { margin-left: calc(var(--line-width) / 4); width: var(--line-width); height: var(--line-height); transition: 0.5s; } .line:nth-child(1) { background: #e74126; height: var(--line-height); } .line:nth-child(2) { background: #f3b418; height: calc(var(--line-height) * 0.8); } .line:nth-child(3) { background: #8dc32e; height: calc(var(--line-height) * 0.7); } .line:nth-child(4) { background: #36b397; height: var(--line-height); } .line:nth-child(5) { background: #2f71b7; height: calc(var(--line-height) * 1.2); }
これでどうでしょうか。ここではCSS変数とcalcを使っています。プロダクションではIE 11対応が必要だったりしてSassを入れたりしてますが、早く時代が進んでCSSだけで全部できるようになるといいですね。
大きい三角形と小さい三角形を描く
次に、鉛筆の先の部分を描きます。鉛筆でいう木の部分と芯の黒い部分は、今回はHTMLで1つの要素としてマークアップしてあります。
<span class="tip"></span>
なので、::after という疑似要素にスタイルを当てて、黒い芯の部分を表現します。
:root { --line-width: 20px; --line-height: 100px; --tip-width: calc(var(--line-width) * 3.8); --tip-height: var(--line-height); } .tip { width: var(--tip-width); height: var(--tip-height); margin-left: calc(var(--line-width) / 4); box-sizing: border-box; border-style: solid; border-color: transparent; border-width: calc(var(--tip-height) / 2) 0 calc(var(--tip-height) / 2) var(--tip-width); border-left-color: #efdab3; border-radius: 5px; } .tip:after { --width: calc(var(--tip-width) / 3.5); --height: calc(var(--tip-height) / 3.5); width: var(--width); height: var(--height); display: block; content: ""; position: relative; left: calc(var(--width) * -1); top: calc(calc(var(--height) / 2) * -1); box-sizing: border-box; border-style: solid; border-color: transparent; border-width: calc(var(--height) / 2) 0 calc(var(--height) / 2) var(--width); border-left-color: #000; }
傾ける
最後に、これらの全体を傾けます。
.logo { transform: rotate(40deg); }
まとめ
よくよく見るとスタイルが雑なせいでまがいものみたいな出来になってしまいました。デザイナーの方々に見られたら怒られそうな気もします。が、とりあえずはHTMLとCSSだけでざっくりStudyplusのロゴを描くことができました。自分のCSS力では今の所これが精一杯です。.tipの部分に立体感を出したり、細かいところが難しいですね。
とりあえずCSSで表現できたことによって、好きなように動かしたりすることができるようになりました。.lineを上下にうにょうにょさせたり、全体を揺らしたりができます。これだけだと何が面白いのという感じですね。
今後はもうちょっと細部をちゃんとしつつ、JSからDOMのstyle属性をいじってデータを流し込んだりして遊んでみたいです。
See the Pen Studyplus logo drawn by CSS (with Text) by gaaamii (@gaaamii-the-sasster) on CodePen.
