CSS / CSS3 and LESS で作る iPhone ボタン – Step 00 まずは基本となるマークアップとスタイルを!

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

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

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

screenshot

Read More

超簡単♪ 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 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

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

box-sizing

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

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

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

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

Read More

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

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

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

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

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

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

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

screenshot

Read More

『リッチマン、プアウーマン』のデスメールカウントダウン演出をWebで再現してみた

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

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

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

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

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

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

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

death mail

Read More

たった3つの CSS3 プロパティで Tag Cloud をオシャレにする方法

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

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

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

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

Read More