CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します.
LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます.
Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです.
昨日 に引き続き LESS 関連エントリーです.
「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです.
今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました.
ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします.
LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪
サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい.
LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです.
LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません.
ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました.
騙されたと思って使ってみて下さい. LESS の良さが分かると思います.
サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい.
LESS のことは知ってはいるけど, 使っていない. そろそろ触ってみようかなぁ〜って人向けのエントリーです.
LESS 用のスタートアップテンプレートを作りました. ダウンロードするだけで LESS を使った Web サイトを開発する環境が揃います.
Read More
つい先日『jsdo.it が JSX と CoffeeScript をサポート!!』という記事を書きました.
「JSX や CoffeeScript がサポートできるんだったら Sass や LESS もサポートできんじゃね?」っと思っていたら 速攻でサポートしてくれてました!!
ということでちょっと期間が空いちゃいましたが, 紹介します.