様々なデバイスにレイアウトを最適化するレスポンシブWebデザイン対応でタブやフォームなどのリッチUIもセットにしたフレームワーク・Foundation(と、サーバー移転のお知らせ)

iPadやiPhoneなど、様々なデバイスにもレイアウトを最適化するレスポンシブWebデザイン対応で、タブやグリッド、フォームデザインなど、UIをリッチなデザインに変更可能なマルチフレームワーク・Foundationのご紹介。

Read More »

CSS3のハードウェアアクセラレーターを使ったビジュアルエフェクト生成用jsライブラリ・Alice.js

気になったので備忘録的に触って見ました。
ハードウェアアクセラレーターを使った
CSS3の新機能を実装出来るjsライブラリ・
Alice.jsです。と、分かったような事を
書きましたが、まだちょっと勉強不足で
いろいろ調査中です。ので内容にはあまり
期待しないで下さい。

Read More »

Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS gallery

ありそうでなかったWebデザインギャラリー
だったのでご紹介。Googleでも提供して
くれている、Webフォント。日本語では
なかなか難しいですが、英語圏ではかなり
一般化してきている印象です。そんな
Webフォントを上手く利用したWebサイト
を収集しているギャラリーです。

Read More »

著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid

なかなか凄いフレームワークがあったので
反射的にメモ。パブリックドメインという
のが何より太っ腹ですねー。自由に使用で
きて、シンプルで汎用的、しかも軽量で
iPhoneやiPadにもレイアウトを自動調整
するレスポンシブWebデザイン対応のHTML5
フレームワークです。

Read More »

レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid

シンプルでいいなーと思ったのでシェアがてら
ご紹介。レスポンシブWebデザインに対応できる
グリッドレイアウト構築用のCSSを吐き出して
くれるジェネレーターです。必要最低限のコード
だけ出してくれるのは嬉しいかも。頻繁に
使うものではないけど覚えておきたいですね。

Read More »

HTML5の動画上に字幕や、デザイン変更可能なツールチップをキャプションっぽく埋め込めるライブラリ・BubblesJS

これはなかなか便利かも、と思っていつかの日
のために備忘録。HTML5製の動画に、字幕や
デザインの変更が可能なツールチップ的なもの
を埋め込めるライブラリ、BubblesJSです。応用
すればニコニコ動画のような動画コンテンツも
実装出来るんじゃないですかね?試してない
ので分かりませんけど。

Read More »

地味に使えるCSS小技のメモ&サンプル集

cssの小技的なテクニックが便利なので好きなん
ですが、cssそのものが嫌いで覚えられないので
カンペ的な記事を作ることにしました。便利な小技
は沢山あるんですが、特に自分が良く使いそうな
Tipsをメモします。既に出回っている情報ばかりで
特に目新しい手法はありませんので何も期待でき
ないです。

Read More »

HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか

あまりに情報量が多くて混乱してきたので
自分用にまとめ。リファレンスとか、ちゃんと
実践で使えるツールを自分なりに厳選して
まとめておきます。どうも、あっちこっちで
あれが便利とかこれが便利だとか言われる
と訳が分からなくなるのでそろそろ絞らない
とですね。

Read More »

モダンなデザインのプレゼンテーションコンテンツをHTMLで実装出来るようにするjsライブラリ・deck.js

なかなか良かったのでご紹介。最近よく
見かけるHTML製のプレゼンテーション
を実装出来るライブラリ。素敵なデザイン
で実装できてエフェクトなんかも選択
出来るみたいですね。タッチデバイスに
も最初から対応できてるといろいろと
ありがたいんですけど・・

Read More »

240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid System

iPhoneなどのモバイルや、超ワイドなモニターサイズ
までサポートしているレスポンシブWebデザイン構築用
のフレームワーク・Golden Grid Systemなるものが
登場した模様です。最大で2560pxまで対応できる
らしいですよ。テレビでネットを見れるようにもなって
いるのでそういった事情からですかね・・どんどん
進化していきますねー。

Read More »

スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER

スマートフォンやiPadなどのタブレットはもちろん、
様々なウィンドウサイズにも自動でレイアウトを
調整するレスポンシブなjQueryスライダーのご
紹介。FLEXSLIDERは4KBと軽量で、実装も
手軽なので覚えておくと重宝しそうです。マーク
アップも簡単なのでiPhone向けサイトの構築
時に導入を検討したいですね。

Read More »

css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い

とっても可愛らしいコンタクトフォームがありま
したのでメモがてらご紹介します。封筒に入
った手紙を模したフォームのデザインで、
マウスを乗せると、フォーム部分の手紙が
アニメーションしながら出てきます。使いど
ころは今は限られてしまいそうですが・・
将来は普通に使えるといいですねw

Read More »

エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider

実用性は別にして、こういうの嫌いじゃない
ので記事にします。よくあるイメージギャラリー
なんですが、画像が変わる際のエフェクトが
無駄に凝っています(褒め言葉です)。こんな
事もflashを使わないで出来るんだなー、と
素直に関心したので、同じ気持ちで見て
頂けたら嬉しいです。

Read More »

わずか4KBと軽量でクロスブラウザ対応の、シンプルなデートピッカー(カレンダー)を実装するjQueryプラグイン・glDatePicker

軽量でカスタマイズしやすいデートピッカー
のjQueryプラグイン・glDatePickerのご紹介。
とてもシンプルで、4KBと超軽量です。汎用
的で使いやすいかなと思ってエントリー。
jQueryUIでもいいっちゃいいんですけど、
デートピッカーだけならUIを入れる必要は
無いですしね・・・

Read More »

Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery

ポップアップしたLightbox内にサムネイルも表示可能
なjQueryプラグイン・ppGalleryのご紹介です。Lightbox
系のjQueryプラグインの大半は1つずつ見ていくか、
一旦ポップアップを閉じてからもう一度開く必要があり
ましたが、ppGalleryは一回開けばあとはサムネイルで
好きな画像に飛べるのでLightboxスクリプトの中でも
イメージギャラリーに向いてそうです。

Read More »

Ads

Posts

Contact

Services