CSS職人 入門

はじめに

はじめまして、jumdtwです。
ノリで始めたCSS職人について書いていこうと思います。

ソースコード

きっかけ

1, メジロマックイーンを崇拝する
2, マックイーンの絵でも描こうとググる
3, youtubeで戦場ヶ原さんをCSSで書いているやばい人を見かける
4, ノリで始めてしまう

といった感じです。ちなみに、マックイーンを描くのに40時間以上かかっているので皆さんはおとなしくペンタブ買ったほうが賢明だと思います。

完成品

完成品はこちらになります。

ウマ娘のゲーム内イラストを参考に作成しました。

CSS 職人基本テクニック

ここからはCSS職人の基本テクニックを紹介していきます。マックイーンも下記の基本テクニックで99%記述しています。

overflow: hidden

overflow: hidden は下記図のように親要素からはみ出した子要素を表示しなくなるといったものです。
これとborderなどを利用して線画を仕上げていきます。

box-shadow

上記 overflowとborderだけでもかけなくはないのですがとがっている部分や大きな楕円部分は書きにくかったり塗りにくかったりします。そこでbox-shadowを利用します。box-shadowを利用することで尖っている表現をきれいに書くことができます。

余談

正直CSSで描くメリットがあまり多くないというは事実。CSSを理解している人からすると努力がなんとなく伝わるとは思うのだが、多くの人はCSSを知らないので見た目上は変わらない。

まとめ

みんなもCSS職人になろう！！！