HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。 Chico UI [ad#ad-2] Chico UIの対応ブラウザは下記の通りです。 IE6には対応していませんが、十分でしょう。 対応ブラウザ Google Chrome Safari Firefox 4+ Internet Explorer 7+ Opera Chico UIのウェブページに使用するさまざまなUIコンポーネントを紹介します。 と、その前にレイアウトとグリッドから。

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが７つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜％として表示してくれます。 何を改善すればポイントを上げられるか？についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ

キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが

iphoneに表示最適化したサイトもかなりたくさん出てきていますが、iphone対応サイトの作り方を備忘録的にまとめたかったので途中までまとめてみた。もっと書きたい事あるけど、続きは追記しておこうかな。 iphone最適化とはヤフー検索が対応した事例でもある通り、すぐに情報を見つけられるように、よりページを軽く、そして操作性の良い、iphoneに特化した見せ方をする事を言います。iphoneは通常PCでの見え方をそのまま表示し、タップしたりピンチオープンして拡大させたりしながら使用しますが、PC表示だといらない情報が多く、特に検索だと、パッと探してパッと表示できるものであって欲しいですよね。使う人の利便性を考えた設計から成り立ってます。 と言うことで今回は、iphoneサイト制作の基本をまとめてみた。 基本 iphoneのブラウザはMobile Safari ブラウザ: Safari2.

ウェブサイトの制作に役立つGoogle Chrome用の機能拡張をCSS Reflexから紹介します。 15 Must Have Google Chrome Extensions for Web Development [ad#ad-2] Pendule HTML, CSS, WAIなどの検証をはじめ、CSSの無効化、リンクチェック、カラーピッカー、ルーラーなど。 Chrome Sniffer そのサイトで使用しているCMSとJavaScriptのライブラリを表示。 Chrome Web Developer Tools FirefoxのWeb Developer toolbar（日本語版）のクローンを目指して開発。 IE Tab ChromeでIEのレンダリングで表示。 Window Resizer ウインドウのサイズをワンクリックで任意の値に変更。 Chrome SEO 各種検索エンジン

本特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため

Googleもスマートフォンに参入、ノートPCが完全に主流になるなど、ブロードバンドから逆に回線の「低速化」が起こっています。 参考： 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話 また、GoogleはWebの表示速度をPageRankに加味することを検討中であることを明言しています。 ただ、そうは言ったものの、ちゃんと実装しないと話しにならない訳で・・（大汗 細かいことでもちゃんと積み重ねて行かねばと。 というわけで、軽快なサイトを実装するためのTipsを自分のサイトで使ったのを備忘録的にここにも書いておきたいと思います。 まずはまとめ記事から 原則を押さえてから、細かいところに行った方が効率がよいかな、と思います。 30分でできる！Webサイトを高速化する6大原則 最適化を行うための観点が簡潔にまとまっていて、高速化チェック項目として有効です。 具体的な方法もいくつ

CSS3, please! - This element will receive inline changes as you edit the CSS rules on the left. Enjoy! CSS3の規約は現在策定段階にある。しかし、すでにどの主要ブラウザもCSS3に準拠する記述方法か、またはベンダプロパティとしてその機能を実装している。CSS3で提供される角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッションなどの機能は魅力的だ。浸透しつつあるプログレッシエンハンスメントのデザイン実装方法論を採用するなら、基本となるデザインをCSS2.1で整え、CSS3の機能で最新ブラウザ向けに一歩先のデザインを提供するというのは悪くない選択肢といえる。 ただし問題がある。CSS3は依然として策定段階にあるため、同様の機能は提供されているものの

デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

今週のTOP記事はHTML5関するもの。 HTML5のチートシートみたいなサイトがちょこちょこ現れていますが、そのまとめです。 HTML5のことをチェックしておきたい方は、是非覗いてみてくださいね。 あとはデザイン系からWebアプリ、拡張機能など幅広く揃いました。 カラーピッカーまとめに関しては、ライフハッカーの方で書かせていただきました。 →カラースキームを決めるのに役立つ、配色ジェネレータ17個まとめ （※ネタ帳では海外記事しか扱いません、あしからず）