前置き
CSSって思ったより凄いよって記事です。
高校生の分際で一丁前にCSSを語るなと有識者諸兄に怒られそうなので先にお詫びしておきます。大変申し訳ございませんでした。
本題
謝ったので好きな事言えます。
CSSアニメーション
まずは広く知られてるであろう所から。
CSSでアニメーションが記述できる。それだけの代物。
See the Pen
ExgWJJY by HATO (@hatopoppo)
on CodePen.
最近だとハンバーガーメニューとかで見かける。( transitionで実装してる物の方が多いけど )
これを頑張れば、
See the Pen
mdrWZXY by HATO (@hatopoppo)
on CodePen.
こういう事もできる。
因みにコードはtransform-originでrotationの原点を関節の位置に変えて回してるだけ。
コードの行数と比例する形にはなるがとりあえずアニメーションに限界はなさそう。
CSS変数
CSSは変数も扱える。
See the Pen
GRjWVpp by HATO (@hatopoppo)
on CodePen.
もちろんこれだけでも、全体の色味変えたりする点でとても便利だが、本命はこちら。
See the Pen
wvzJVWg by HATO (@hatopoppo)
on CodePen.
ダークモード対応。
mediaで端末がダークモードか否か判定して結果により変数を変える。
今例示した二つはどちらもcolorを変数に入れた物だったが、数値型も扱えればvwやremのような単位のついたものも扱える。さらに 「 inline 」 とか 「 flex 」 のような文字列ですら扱える為スタイリングの幅が広がりそう。
因みにCSSアニメーションと組み合わせるとこういう事もできる。
See the Pen
PoGpMpG by HATO (@hatopoppo)
on CodePen.
hsl1 の h2 だけを変数で変化させたもの。これでもちゃんと動くのがすごい。
鬼のようなアニメーションの長文を見てもらうとわかるだろうが、残念ながらCSSアニメーションでは変数間の補完はできない。その為短い間隔で色を描き変えないといけない。少し残念。
ただ相変わらず限界は見えない。変数によって出来ることが広がりすぎ。
attr
属性値の取得もできる。
See the Pen
LYRWwdY by HATO (@hatopoppo)
on CodePen.
こんな感じ。
pタグに付いたdata属性、data-textから文字列を持ってきた。
尚attrはCSS Level4に位置付けられる物であり、まだ草案段階のため、今は擬似要素のcontentにしか使えない。だが、今後colorプロパティに使えるようにする事なども検討されている。
data属性はjsからも扱いやすい3ので、そこからスタイルなども弄れるようになるととても面白くなりそう。
See the Pen
oNzZKVb by HATO (@hatopoppo)
on CodePen.
とりあえず今できることは、日付等のデータを入れることくらい。
これもコンポーネントっぽくてかなり需要はありそう。
終わりに
初心者向けだとかプログラミング言語じゃない4だとか怪しげな情報商材屋のTwitterのプロフィールによく書いてあるだとか散々揶揄された言語ですが、見かけによらず奥深く、限界が見えないのがCSSです。
今回は飽く迄も分かりやすさ重視で、一目でわかるようなCSSの変貌を中心に据えましたが、色々と組み合わせてやれば意外と器用な事もできます。
最近は、CSS in JS など生のCSSを追いやろうとする流れが散見されますが、追いやられるべきCSSは過去の遺産となろうとしています。
限界知らずの、これからも成長していくCSSで、是非楽しい開発を。
CSS is GOD
-
色相 明度 彩度の3つで構成される色の表し方 ↩
-
色相 ↩
-
Object.dataset.hoge で取得や変更が出来る。 ↩
-
因みに最近MDNが行ったアンケートで「今書いてるプログラミング言語は何ですか」という設問で選択肢にHTMLとCSSがあったので誰が何と言おうとプログラミング言語です。チューリング完全だし。http://hoo89.hatenablog.com/entry/2014/09/12/164712 ↩