レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHTML5/CSS3の勉強としてスキルアップにもいいですね。
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
こんにちはこんにちは!! 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました! そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ&ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ&ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし
機械的でごめんない。サイト名は割愛させていただきます。掲載内容・順番に深い意味は特にありません。 お金もらって書いて、とかそういうのでも無いっす。 デザイン / 参考 【クリエイター必見】創作意欲が湧くデザイン 参考になるWebデザインリンク集まとめ Webデザイナーなら押さえておきたい、今月の優れたWebデザイン(2012年7月)まとめ11個 ハイクオリティな最近のパララックスWebデザインまとめ13個 ポートフォリオ作ろうぜ!参考サイト、リンクまとめ9つ 『さすがデザイナー…!』と思わされるクリエイティブな名刺デザイン集 配色のセンスをゼロから習得するために役立つスライドまとめ5つ GIFアニメを効果的に使ったサイトまとめ4つ ここまでするのか!アイデア満載の採用サイト おしゃれでかわいいポスターデザイン集 【デザイン】面白いアイディアの広告ギャラリーまとめ HTML5で書かれたス
人を育てるというのは、とても難しい。 なぜなら、育てる方も未完成な人間だから。 ちょっと経験値のある未完成な人が、経験値の少ない未完成な人と、ともに冒険をし、ともにレベルをあげていくことが、人を育てるってことだと思う。 人を育てようと思うと、どうしても上から目線になってしまう。上から目線だと気持ちも相手に伝わりにくい。気持ちが伝わらないと相手もうまく成長してくれない。 だから、人を育てる機会があったら、ともに冒険をする仲間を持ったと考えよう。きっとその方がうまくいく。 それでは、自分の話をしよう。自分というよりは自分たちの話かな。 2010年、自分は、昼間、ブラ三をやりながら、新規ビジネスの企画を考えたり、プロトタイプを作っていたりしていた。ブラ三をやっていたのは、当然ソーシャルアプリというものを学ぶためだ。ブラ三の能力はかなり向上したけど、仕事ではたいした結果が出せなかった。特に企画考え
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」! HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します! まずは王道!縦に長い高級ペライチ
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました(スクリーンキャストはこの記事の末尾に埋め込んであります)。 それは「リアルタイムなWebアプリケーションを構築す
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
以下を読んで。 kouseipapa.net/i » 「Clear」をまだ購入してない人はチェックしてみては?HTML5でサンプルが作られてますぞ! おぉ、最近話題のiOSアプリ「Clear」のHTML5版サンプルだそうです。以下がそのサイト。 HTML5 Clear ちなみにこのサンプル、Safariで表示してアクションボタンから「ホーム画面に追加」してWebクリップ化し、Webクリップから起動すると、以下のように全画面表示になります。 おぉ、なんだかアプリっぽい感じ!面白い! 最近のHTML5はすごいですねぇ。以前、調べるだけ調べてまだ何も出来てない以下とか、そろそろ何かやりたいなぁ、とも思う次第。 前から気になってたHTML5について色々調べてみました最近気になってきたjQueryについて色々調べてみました - もとまか日記乙 てことで。 ツイートする
翔泳社主催のソフトウェア開発者向けカンファレンス「Developers Summit 2012」(以下、デブサミ2012)が先週末に2日間かけて開催されました。ご参加いただいた皆様、ありがとうございました。現在Web上で一般公開されている講演スライドの入手先をまとめましたので、ぜひご参考ください。 2月16日(木):A会場 【16-A-1】見る前に翔べ ~ギークの工夫で社会を変えよう~ 【16-A-2】大規模ソーシャルゲーム「ドラゴンコレクション」 ~ そのシステム運用の最前線を語る! 【16-A-3】デブサミをきっかけに転職したエンジニアの歩き方 【16-A-4】Effective Smartphone UX at GREE 【16-A-5】node.jsテクノロジースタック for ソーシャルアプリケーション 【16-A-6】いまどきのi18nのはなし 【16-A-7】あの人の自分戦略
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ&ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
連載を始めるに当たって どうもこんにちは。白石俊平と申します。今回から定期的に、HTML5をはじめとしたWeb標準、そして業界の動向をまとめた記事を発信していきます。 ぼくは、Web開発者向けコミュニティであるhtml5j.orgを運営しており、そのメーリングリストにほぼ毎日、HTML5関連のアップデートを投稿しています(また、投稿内容がメーリングリスト内で埋もれてしまわないよう、同じ内容を自身のブログにもポストしています)。 こうして、日々HTML5関連のアップデートを追いかけている身として実感するのは、HTML5を中心としたオープンなWebプラットフォームが、現在すさまじい勢いで成長しているということです。HTML5関連技術や関連APIは非常に数が多く、毎日そのどれかがアップデートされているような状況です。ブラウザのアップデートも速く、どのブラウザがどの機能を実装しているのか、もはや記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く