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

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

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

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

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

今回は CSS3 から box-sizing について紹介します.

width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？

これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます.

あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

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

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

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

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

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

先週『リッチマン、プアウーマン』第三話が放送されました.

このドラマに出てくる架空の会社「NEXT INNOVATION」で下記のような面白い設定がありました.

NEXT INNOVATION のプログラマは３ヶ月更新になっており, 今日が更新日. 夕方６時までに解雇メールが届けば, 否応なしに解雇になる. 解雇通知のメールはデスメールと呼ばれていた.

理由は, 使えない人間を置いておくと, 優秀な人間がそのフォローをしなくてはいけなくなるかららしい. ん～なかなか面白い.

この制度の興味深いところは…ってまぁ本題はそこじゃなくて.

ドラマの演出で社内のモニターに映しだされていた夕方６時までのデスメールカウントダウンの演出が 面白くて簡単そうだったので再現してみましたって話です.

ブログなんかでお馴染みの Tag Cloud. これを少しオシャレにする方法について紹介しようと思います.

どうオシャレになるかというと, このブログの右上にある Tag Cloud のようになります. マウスを乗っけるとホワっとなってジュワっとなってピっとなります.(「ダセェ～じゃん!」なんて意見はあなたの心のなかに留めておいて下さい)

『右上のあのぼかすやつってどうやるんですか？』なんて質問を受けることが何度かあったので, ざっくりとまとめた次第です.