「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」のサンプルを LESS で作ってみた | TM Life
昨日 に引き続き LESS 関連エントリーです. 「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです. 今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました. ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪ サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい. Table of contents サンプルを実行してみよう テーブルのメインカラーを変数化 linear-gradient を使ってヘッダーにテカリフィルター
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninjaは、同じくMotorola MobilityがリリースしたHTML5対応のフレームワーク「Montage」をベースにしています。Montageは、Adobe Flash/Flexのような形でHTML5のアプリケーション開発ができるようにという意図で開発されたフレームワーク。 Ninjaの画面
これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」 - Chrome Life
前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。（CAATは、Canvas Advanced Animation Tookitの略） 「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
Angry BirdsのHTML5版にも使われた「PlayN」入門
Angry BirdsのHTML5版にも使われた「PlayN」入門：PlayNでクロスプラットフォームのゲーム開発（1）（1/3 ページ） クロスプラットフォームゲームライブラリ「PlayN」とは 近年ゲーム開発の環境は変化し、個人でも手軽に開発できるようになりました。また、スマートフォンの普及により、より手軽にゲームが購入できるようになり、開発者側もGoogle PlayやApp Storeを利用することで多くの人にゲームを届ける環境が出来てきました。ゲームのプラットフォームも多様化し、iOS（iPhone、iPad、iPod touch）、Android、HTML5、Javaアプリケーション、Flashなどさまざまなものがあります。 しかし、多くのプラットフォームがあるということは、1つのゲームをより多くのプラットフォームに対応する場合、それぞれの環境に合わせて開発しなければなりません
HTML5/CSS3のニュースやTIPSなどのまとめ (2012年6月26日)
「HTML5を使ってWebページでビデオ ファイルを再生する方法」「JavaScriptベースのカスケード ナビゲーション システムを作成する方法」「Webページ上の画像スライド ショーの作成方法」「ローカルファイルを管理する方法」
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト｜Tips*Blog｜株式会社コプロシステム
ここ2～3年の間で、HTML5／CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。 このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか？ 今回のエントリーでは、HTML5／CSS3／jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。 HTML5とは？ 今さらなのであまり詳しい説明は書きませんが、過去に弊社HP内で私が書いたコラム『次世代を担う技術「HTML5」について』から引用しますと、 "現在のwebコンテンツで、最も一般的に使われているHTMLの標準仕様は「H
第32回 HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」 | gihyo.jp
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
JavaScriptのクロスドメイン問題対応方法
皆さん、こんにちは。笹亀です。 しばらく立て混んでいた関係でブログがかけませんでした。 久しぶりにブログを書かせていただきます。 JavaScriptでいろいろと実装しているとき、別ウィンドでページを呼び出し、その別ウィンドーと呼び出しウィンドー間にて通信を行うといったときによくクロスドメイン問題に悩まされます。 今回はそのようなクロスドメイン問題を解決する方法についてご紹介します。 そもそもクロスドメインとは、異なるドメイン間をまたがったデータに対してアクセスをすることをいいます。 Webアプリケーションを設置・公開するホストのドメインと、そのアプリケーションがアクセスするWebサービスのドメインが、サブドメインやポート番号も含め異なる場合は、JavaScriptなどでのデータのアクセスは遮断されます。 JavaScriptにてクロスドメイン間の通信をする場合には、JSONPを利用して行
HTML5モバイルWebフレームワークの比較 - きしだのHatena
モバイル用でJavaScriptでアプリケーションを作成できるフレームワークについて比較した記事を翻訳しました。 Comparing HTML5 Mobile Web Framework - Dzyngiri Comparing HTML5 Mobile Web Framework Apr 27, 2012 by Dzyngiri 今年はモバイルWebにとって面白い年になっている。HTML5とCSS3の採択、モバイルブラウザのパフォーマンス向上、モバイルアプリケーションフレームワークの爆発は、モバイルデバイスでのリッチでインタラクティブなWeb体験の作成がこれまでよりも現実的になったことを意味する。PhoneGapのようなラッパを使うことで、iPhoneやiPad、AndroidのネイティブのAppストアでアプリケーションを配布することも可能になった。単一のコードベースでマルチプラットフォ
45 Examples Of Websites Designed With HTML5
With the revised and improved edition of HTML, the authors as well as the web developers have been given some more flexibility and interoperability in order to create more interactive and creative websites. HTML5 has been proposed recently because the community believed that now it is the time to move forward and push the limitation of HTML further more in every direction. In today’s collection, w
カヤック、HTML5ゲームを集めた無料ゲームサイト「jsdo.it HTML5-Games」を開始…皆で作って皆で遊ぶ | gamebiz
カヤック、HTML5ゲームを集めた無料ゲームサイト「jsdo.it HTML5-Games」を開始…皆で作って皆で遊ぶ カヤックは、本日（4月20日）、HTML5ゲームを集めた無料ゲームサイト「jsdo.it HTML5-Games」の提供開始した。 これは、カヤックが運営するHTML5、CSS、JavaScriptの投稿と共有ができるWebサービス「jsdo.it」に投稿されたHTML5ゲームを掲載するサービス。「jsdo.it」にアクセスし、ブラウザ上の専用エディタからHTML5ゲームを制作して、「jsdo.it HTML5-Games」に掲載することができる。 また制作されたゲームのソースコードは公開されているため、他のユーザーがつくったゲームを自分で改造することも可能。初心者でもゲーム改造をしながらHTML5を学習することができる。 このほか、WebSocketをつかったコントロー
［速報］JavaOne Tokyo基調講演。JavaへHTML5機能統合、Java EE 7のクラウド機能などを紹介。JavaOne Tokyo 2012
［速報］JavaOne Tokyo基調講演。JavaへHTML5機能統合、Java EE 7のクラウド機能などを紹介。JavaOne Tokyo 2012 「JavaOne Tokyo 2012」が開幕しました。国内での開催は7年ぶり、サン・マイクロシステムズがオラクルに買収されてからは初めての開催となります。 初日の基調講演は「Java Strategy Keynote」として、Java全体を俯瞰した今後の方向性、ロードマップなどがおもなテーマ。いままで別々に行われていたJava MEとJava SEのリリースを同期させていくこと、Java EE 7でのクラウド対応、JavaにHTML5の機能を統合するProject Avatarの紹介などが行われました。 午前9時から行われた基調講演の内容をダイジェストで紹介します（ちなみに、Oracle OpenWorldとJavaOneは午前9時か
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サンプルだけでも見ておくべきHTML5のチュートリアル集:phpspot開発日誌
Loading...
HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5」:phpspot開発日誌
html5-memo.com
