有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」
もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.com/ Zocial | CSS3 Button Set http://zocial.smcllns.com/ ダウンロードは下記サイトの「ZIP」ボタンをクリックすれば可能です。 samcollins/css-social-buttons - GitHub https://github.com/samcollins/css-social-buttons/ サンプルは以下から閲覧可能。 Zocia
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
フリー写真素材 Futta.NET - 無料の風景フリー画像
フリー写真素材として使える無料風景画像を3000枚ダウンロードできます。著作権フリー画像に相当し、あらゆる用途に自由に利用できます。 3000枚のフリー写真素材集 ようこそ 日本・海外旅行などでデジカメ撮影された写真素材をフリー(無料)で3000枚配布しています。 風景の写真がメインで、「外国の観光名所(世界遺産都市)、日本の街中の風景、自然風景」などの高解像度画像があります。 著作権フリーに相当し、無料で「デスクトップ壁紙、Web・ホームページ、背景・イメージ、印刷(年賀状)、商用」等に使えます。 ダウンロードできる種類 A.未加工写真：高解像度、中解像度、サムネイルの3種類があります。 B.デスクトップ壁紙：ご使用中のディスプレイ用に自動サイズ変更されたフォトを生成できます。 C.のべ30万枚以上の画像素材：「フレーム追加、イラスト化、バナー変換」等、100種類以上に1クリック編集でき
第8回 WebページにGoogle APIで簡単にきれいなグラフを描く
Googleが提供しているAPIライブラリ「Google API」と聞いてパっと思いつくのは，検索系（Google AJAX Search API）か，地図系（Google Maps API／Google Earth API）でしょう。しかしGoogle APIには他にもいくつか種類があります。今回ご紹介するのは「Google Visualization API」です。Visualizationってなんだろうということですが，実はこれグラフを描画するためのAPI群です。 グラフを作るということだけであれば，Excelのような表計算ソフトを使うのが一番手っ取り早い方法です。しかし，例えばWebサイトの中でグラフを利用しようと思えば，Excelでグラフを作り，これを画像としてキャプチャし，HTMLに貼り付けるという手順を踏まなくてはなりません。実際にIT系の記事では，特にハードウエアのベンチマ
無料で利用できるウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコン集
ウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコンをFree Icons Webから紹介します。
Webデザイナ向けFirefoxエクステンション19 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて19 Firefox Add-ons For Designersのタイトルのもと、Webデザイナ向けのFirefoxエクステンションを紹介している。Webデザインの作業をおこなうにあたり、複数のプログラムを起動して使うのではなく、1つのプログラムで複数の処理を簡単に行いたいという趣旨の内容になっている。紹介されているエクステンションは次のとおり。 カラーツール ColorSuckr (画像から代表的な色を12色取り出して、そのデータからカラースキーマを作成する) ColorZilla (ページのみならずブラウザの任意のポイントのカラーをピックアップするツール。任意の2点間の距離も測定できる) F
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
「無料で使える画像素材が満載の20サイト！」という記事があったので本当に使えるものだけピックアップしてみた - IDEA*IDEA 〜 百式管理人のライフハックブログ 〜
ドットインストール代表のライフハックブログ
あなたのブログやサイト作りに、タダで使える10の方法 | ライフハッカー・ジャパン
進行中のプロジェクトがあって、途中経過を友だちには見せたいけど、ネット上にはまだ公開したくない、もちろん検索で引っ掛かるのもマズいという場合。『.htaccess Editor』を使えば、ベーシック認証やアクセス制限など、個人的にちょっと使いたい程度のことは簡単にできます。こういう類いのアプリは他にも色々あるけど、これはアクセス制限と許可に関する設定を、1つずつ順を追ってすることができるのがいいです。あと、いくつもあるサブドメインの設定をする時も便利（参考記事：「.htaccess実践活用術」）。 残る9つのハックは以下にて。 【9】サイトをiPhoneや携帯ブラウザに最適化する方法 携帯やスマートフォンでブログを読む人の数は、どんどん増えてきています。以前紹介した、あなたのブログをiPhone閲覧用に最適化する『Intersquash』（米過去記事）は、iPhone用のRSSフィードも作
PSDファイルをCSSレイアウトのHTMLに変換してくれる『psd2css Online』 | 100SHIKI
PSDファイルをCSSレイアウトのHTMLに変換してくれる『psd2css Online』 March 13th, 2009 Posted in その他 Write comment 便利だか便利じゃないのだか判断に迷うところだが、意欲的な試みなのでご紹介。 psd2css OnlineはPSDファイルをCSSレイアウトのHTMLに変換してくれるというツールだ。 肝となるのはPSDファイル中のレイヤーである。このレイヤーを判別してCSSのブロックにしているようだ。 Photoshopなんかでまずレイアウトを組んでいる人はまぁ、試してみてもいいかもしれない。 ただ、いろいろと癖があるようなので（テキストを配置するには？とか）、このツールの使い方を習得するまでに時間がかかりそうだ。だったらCSSを学んだ方が・・・という気がしないでもない。 ただ、用途を限定すればそれなりに便利、という人もいるだろ
"吹き出し"を画像使わずにCSSで作る方法 | エンタープライズ | マイコミジャーナル
Filament Group ツールティップとしての吹き出しエフェクトはWebページでは広く使われるようになったUIのひとつだ。吹き出しの四隅は丸みを帯びて角の外側は透過表示になり、吹き出しを示すための小さい突起がついているところに特徴がある。多くの場合で背景画像がこれらUIを実現するために使われる。 Filament Groupにおいて、これに背景画像を使わずCSSと若干のHTML、それに多少のJavaScriptを使って実現する例がImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?として紹介されている。Filament GroupではjQuery UIウィジェットの開発中にこの問題にあたり、CSSで多角形を描画するためのよく知られたトリックといくつかの工夫を凝らすことでこれを実現したと説明している。 背景画像を使わないで
MOONGIFT: » 複雑なグリッドに対応した軽量CSSフレームワーク「Golden Grid」:オープンソースを毎日紹介
オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。 Webサービスの企画、構築承ります いつもMOONGIFTをご覧いただきありがとうございます。 こちらはお仕事募集の案内になります。 MOONGIFTではWebサービスの企画、コンサルティングおよび構築などを承っております。ご興味のある方はinfo@moongift.jpまでお気軽にお問い合わせください。 詳細はこちら。 [CSS] [ GPL] [ Google Code] [ Web] [ オープンソース] [ デザイン] [ フレームワーク] ※ 画像は公式サイトデモより Webサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとす
テキストに意味を持たせるXHTMLタグの正しいマークアップ（1/20） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/2/20 テキストに意味を持たせるXHTMLタグの正しいマークアップをおさらいしましょう。フレーズ要素を含む19タグを一挙ご紹介します。 これらの要素を用いたマークアップを行うことにより、「この文章は○○から引用された文」とか「この文字列は▲▲の略語である」といったふうに、テキストに論理的な意味を持たせることが可能になります。 p要素 p要素は、文章の段落を表すための要素です。 ブロックレベル要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。 p 文章の段落構造を表すp要素 q要素 q要素は、段落による区切りが不要な短い引用文を表す際に使います。 インライン要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。cite属性値に引用元のURIを記述し、必要に応じて
YUI最新版、CSSをオンザフライで変更するユーティリティ | エンタープライズ | マイコミジャーナル
YUI - Yahoo! User Interface Library The YUI development communityは18日(米国時間)、YUI (Yahoo! User Interface Library)の最新版となるYUI 2.7.0を公開した。YUIはYahoo!で開発されたAjax JavaScriptフレームワーク。さまざまなUIコンポーネントが用意されている。対応ブラウザチェックも充実しており、クロスブラウザ開発に活用できる。 YUI 2.7.0の主な特徴は次のとおり。 StyleSheet Utilityコンポーネントの導入 IE8サポートの改善 ベータ扱いから正式コンポーネントへ格上げ (Element、ProfilerViewer、Selector) コンポーネントの機能拡張 (Charts Enhancements、Dom Collection、Cont
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」 | ライフハッカー・ジャパン
http://www.designwalker.com/2009/08/user-interface.html
http://www.designwalker.com/2009/08/usability-test.html
IDEA * IDEA
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
IDEA * IDEA
