フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

プログラミングを勉強して改めて理解したこと

elm-ui

「CSSワカンナイ…」「CSSフレームワークでうまくレイアウトできない…」

CSSわかんないですか?CSSフレームワーク使ってみても結局思い通りにレイアウトできなくて辛くないですか?どうですか?

elm-uiはそんなあなたの救世主、次世代レイアウトシステムです(誇大広告です、適当に言ってます)

AltJS的にJSはバイトコードみたいなもので直接触るものじゃないはずです。elm-uiではCSSをバイトコードとして扱うことができます。他人の作った抽象にのっかろう

「そのなんとかuiで何ができるの?」

レイアウトできるよ

とりあえず楽天のこのページを見てきてくれ。適当なところで要素の検証をしてdomを覗いてもらえばclassが
hc bg-247-247-247-255 p-10-22 spacing-10-10 tc s c wf ct cl
こんな感じで書かれているのが分かると思います。
またstyleタグがちょくちょく書かれています

あと拙作だけどBiblipolaもelm-uiだし、Elm 2048もelm-uiで作ってます

使い心地

一種のCSSフレームワークだと思ってもらっていいかなと思います。el, column, rowというレイアウトが組み込まれた基本要素でhtmlを組み立てていきます。
また、styling(要素の装飾、背景色とかボーダーとか)はelm-uiで用意されたものを付けてくことになります

「え、じゃあelm-uiで用意されてなかったら?」

自分でcss書け

とはいえレイアウトは全部やってくれるので、そんなに難しいことはないと思います。
Elm 2048だとアニメーションだけcssで書いてます
あと思いつくのはグラデーションとかですかね。

まとめ

elm-uiいいぞ

今回はこれくらいにしといて次回(未定です)からelm-uiでどうレイアウトできるか、使い方などを記事にしていこうと思います(未定です)

でも普通にドキュメント読めばいいと思うよ。英語だけど

[紹介元] CSSタグが付けられた新着記事 – Qiita プログラミングを勉強して改めて理解したこと

コメント

記事に戻る

コメントを残す