『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 00.

まずは, ベースとなるマークアップとスタイルを書きましょう!

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 サイトを開発する環境が揃います.

つい先日『jsdo.it が JSX と CoffeeScript をサポート!!』という記事を書きました.

「JSX や CoffeeScript がサポートできるんだったら Sass や LESS もサポートできんじゃね？」っと思っていたら 速攻でサポートしてくれてました!!

面白法人カヤックさんによる公式解説はこちら.

ということでちょっと期間が空いちゃいましたが, 紹介します.