2012/05/19
最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。
デモです。スクロールを開始します！
回転しながら飛んでくる文字！
下から上がってくる文字！
横からスライドも。
色が変わりました。それに合わせてテキスト色も変わっ...
2012/05/18
CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったアニメーションを実現するjQuery keyframeを紹介します。
最初の表示です。ボックスをクリックします...
2012/05/17
LESSをはじめてみたいと思いつつも、既にある資産が邪魔していたり最初のとっかかりがないと感じている人は多いのではないでしょうか。そこで使ってみてほしいのがCss2Lessです。
左側がCSS、右側がLESSです。
左側を編集すると右側が変更されます。
既存のCSSをペーストしました。右側に...
2012/05/16
最近はCSSもそのままではなくLESSやSassを使って書くケースが増えてきました。そこで紹介したいのがRECESS、Twitter社の開発したLESSコンパイルツールです。
インストールします。npmでインストールできます。
解析処理です。
オプションです。
RECESSを使うとLESSか...
2012/05/03
jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。
アイコンの一覧です。
実際に使っている例。data-iconで指定するだけで使えます。...
2012/04/28
Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。
トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。
吹き出しの位置は上下...
2012/02/29
BootswatchはTwitterの開発したBootstrapをLESSにし、それらを容易にカスタマイズできるようにしたソフトウェアです。テーマのように色合いを変えて様々なWebサイトに適用できるようにします。
Bootswatchのトップページ。これもまたBootstrapで作られていま...
2012/02/25
TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。...
2012/02/17
dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。
トップページです。上半分が適用されたHTML、下がそのCSSとなっています。
上にマウスを持っていくとメニューが表示されます。
ログインします。GitHubアカウントでログイン...
2012/01/26
iPhone向けの最適化サイトを作る際に、グリッドに沿った奇麗なサイトを作りたいと思ったらiPhone.gsを使ってみましょう。4/6/8のグリッド表示ができます。
4カラムのグリッドです。320pxを最大幅として1:3、2:2、1:1:1:1に分かれます。
同様に6カラムのグリッドです。こ...
2012/01/11
最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。
表示例です。角丸や複数の組み合わせ表示ができます。
さらに細めのタイプもあります。
コードです。styleのwidthでバー...
2012/01/07
CSSのフレームワークにCompassやSassを使っているWebデザイナー&プログラマーにお勧めなのがScoutです。フォルダを監視してファイルを修正すれば自動でファイルを生成してくれます。
インストールです。Windows、Mac OSXに対応しています。
起動しました。まず左下のプラス...
2011/12/31
CSSの煩わしさから解放してくれる記法が幾つかありますが、今回取り上げるのはLESSです。そしてCrunch!はLESSファイルを編集するためのエディタで、CSSへのコンパイル機能を備えています。
インストールです。Adobe AIRが必要です。
インストール自体はウィザードで進められます。...
2011/12/28
インストールします。Rubygemsでインストール可能です。
実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。
生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。
生成されたCSSです。img.pngのSprite指定になっています...
2011/12/03
JavaScriptやCSSを使っている際に一緒に使ってほしいのがJuicerです。短縮化やファイルのマージなどをコマンド一つで行ってくれます。
インストールはRubygemsで行います。juicerのインストールコマンドでYUI Compressorなどもインストールします。
YUI Co...
2011/11/14
一日数十万、数百万とアクセスのあるWebサイトではほんの少しの改善が積み重なって大きな速度改善につながることもあります。CSSも作成したそのままではなくちょっと工夫すれば大きな負荷軽減につながるかも知れません。そのための短縮化ライブラリがclean-cssです。
インストールはnpmを使って...
2011/11/13
最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。
色々な画像が並んでいます。マウスオーバーでアニメーショ...
2011/11/12
CSSで不満に感じられることの多い、入れ子の構造や変数定義などを可能にするCSSライブラリがLESSです。そんなLESSファイルの作成、更新を監視してCSSファイルを自動生成してくれるソフトウェアがSimpLESSです。
最初に起動したときの画面です。SimpLESSはTitaniumを使っ...
2011/11/07
実行しているところです。メニューバーに常駐します。
設定です。SCSSまたはSassに対応し、自動で短縮化もしてくれます。
通知機能があります。Mac OSXの場合はGrowlで通知してくれます。
Webサーバ機能とlivereload機能があります。保存したタイミングで任意のポートをたたい...
アンケート