これから目指すべきは「Desingineer」という存在かもしれない
via juhansonin 最近気になっている事柄についての記事があったのでご紹介。 「Desingineer」という存在について。 (Source: Desingineer – the mythical person every Startups are looking for Brajeshwar ) 以下、Source記事の抄訳です。 Chris Dixonさんのツイート "Desingineer" -> mythical person startups are looking for who can do UI, UX and also excellent front- and back-end coding. — chris dixon (@cdixon) December 19, 2011 "Desingineer"とは、UI, UXもできて、フロントエンド・バックエンド
jQuery初心者（凡人）が1か月でjQueryを書けるようになった4つのポイント : 読書メモ・感想とWebマーケティング雑感
2011年12月02日06:30 jQuery初心者（凡人）が1か月でjQueryを書けるようになった4つのポイント カテゴリWEB書評・読書メモ mixiチェック シェア Tweet 独学でjQueryをはじめて、1か月そこそこで ベーシックなアニメーションを実装できるようになりました。 私なりにポイントだと思ったことを整理したいと思います。 ポイント1 jQuery初心者用の本を買う 数か月前からjQueryを学びたい、学びたいと思い、はてぶのホッテントリに入る jQueryの記事を、ブックマークしては都度読んでいました。 しかし、一向に進歩が見られません。 いい加減、本でも買ってみるかと思った最中 ひょんなことで出会ったこの本により、jQuery学習のスピードが一気に上がりました。 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)西畑 一馬アスキ
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms - かちびと.net
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
マンネリ化から抜け出し、新鮮なウェブデザインを生みだす10のアイデア
いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
米Yahoo!で議論された、フロントエンドエンジニアリングの将来（前編）
Dion Almaer みなさんこんにちは。このディスカッションでは、ここにいるBen Galbraithと、私Dion Almaerで司会をします。まずパネリストを紹介しましょう。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan Dahl 私とBenのとなりにいるのが、Tantek Çelik（テンテク・チェリック）。IE 5.5の開発に携わり、その後Web標準に関する活動もしてきました。 Joe Hewitt（ジョー・ヒューイット）はFacebookに所属していますが、Firebugの開発者でもあり、Facebook for iOSの開発もしています。もともとはNetscapeからMozillaになるときのFirefoxのオリジナル
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas - かちびと.net
これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。 Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
