超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します.

LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます.

Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです.

screenshot

Read More

「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

昨日 に引き続き LESS 関連エントリーです.

CSS3を使って美しく装飾されたテーブルの作り方|Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです.

今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました.

ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪

サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい.

screenshot

Read More

楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです.

LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません.

ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました.

騙されたと思って使ってみて下さい. LESS の良さが分かると思います.

サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい.

less-logo

Read More

CSS の border-style 一覧

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS の border-style って何があるのかって実は把握してなかったりします. ほぼ solid しか使わないし, たまーに dotted を使う程度.

どんなボーダースタイルがあるのか気になったのでまとめてみました.

サンプルは jsdo.it で作ってあるので, 実際に動かしたり fork して遊んでみて下さい.

border-style

Read More

CSSメタ言語『LESS』を簡単に使い始められるテンプレートを作りました!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

LESS のことは知ってはいるけど, 使っていない. そろそろ触ってみようかなぁ〜って人向けのエントリーです.

LESS 用のスタートアップテンプレートを作りました. ダウンロードするだけで LESS を使った Web サイトを開発する環境が揃います.

Read More

jsdo.it が SCSS と LESS をサポート!! サンプルもあるよん♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

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

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

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

jsdoit-sass-less

Read More