javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
JavaScriptによるWeb統合開発環境「Orion」、Webブラウザで試せる「OrionHub」でβ版公開
JavaScriptによるWeb統合開発環境「Orion」、Webブラウザで試せる「OrionHub」でβ版公開 「Orion」は、Webアプリケーションの統合開発環境を、JavaScript/HTML/CSSなどのWeb技術を用いてWebブラウザ上で実現しようとするオープンソースのプロジェクトです。Javaベースの統合開発環境として知られるEclipseを開発しているEclipse Foundationが開発しています。 Orionは現在開発中のソフトウェアですが、広く開発者からフィードバックを得るという目的で「OrionHub」というサイトが開設。ここからサインインすることでOrionを試すことができます。 Firefox 3.6で試してみた 実際に試すには、OrionのWebサイトからメールアドレスを登録します。すると、IDとパスワードがすぐにメールで送られてきます。このIDとパスワ
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる
iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる スポンサードリンク Tweet iPadには、Webページを開くボタンを、ホーム画面に配置することができるのですが、その配置するときに、HTML内で、<meta name="apple-mobile-web-app-capable" content="yes" >とかしておくと、ホーム画面から開いたとき、Safariがフルスクリーンモードになり、あたかも普通のアプリのように見える、と言うネタがあったので、ちょうど手持ちのサイトではAdobe Creative Suite対応店マップ http://labo.dtpwiki.jp/printshop/ があったので、設定してみました。 次の画面は、それぞれ、上記メタタグなし、メタタグありの状態でホーム画面に登録したものです。登録した時点のメタタグ
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
VexFlow TabDiv Demo
The tabstave command is used to create a new tab stave. The green code box below is editable - try adding another stave by typing tabstave on a new line. The notes keyword can be used to add notes. Notes are represented in the format fret/string. To add a long line of notes on the same string, you can use the format fret-fret-fret/string. Add a few more frets and notice how the notes are auto-just
Just Be Nice – Design Studio
Settling on a domain name for your new project can be stressful. You can always change the name later, but it’s a hassle to re-brand so it’s best to get it right the first time. Tools like NameFresh are helpful in brainstorming ideas. But how do you actually go about making the final decision? It’s best to avoid making the decision on your own. If you have the budget, purchase several domains and
Parkaby: Faster HTML Generation with Ruby
Ruby Weekly is a weekly newsletter covering the latest Ruby and Rails news. Why's Markaby is a really convenient bit of Ruby for generating HTML in your applications, rather than having to fiddle about with string interpolation or ERb, tangling together HTML and Ruby. However, Markaby can be slow compared with other options like Erubis or HAML. Magnus Holm has been working on an alternative soluti
Web屋のためのVim設定・Tipsまとめ 2/2 - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) 「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。 Vimを使ったHTMLとCSSの編集について、さらに関係しそうな事項を紹介します。 HTML編集でもよく使うVim基本機能 =キーで自動インデント HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。 ばらばら→範囲選択→「=」ですっきり カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。 なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。 gfで相対パスのリンク先ファイルを開
Purchase Intent Data for Enterprise Tech Sales and Marketing | TechTarget
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
静的Webサイト生成に便利なrote - walf443's blog
Rubygemsのroteが静的Webサイトの生成に便利です。まだまだ機能は少ないのですが、Railsのレイアウト機能を取ってきた感じなのでRailsやってる人は何となく使い方を把握するのは早いと思います。 `rote create PROJECT_NAME`を実行すると、gem/rote-xxx/lib/rote/project以下がコピーされます。 ディレクトリツリーはこんな感じ。 - / - README - Rakefile : taskを記述するだけでなく生成するファイルの設定ファイルもかねている - doc/ : 生成元のデータを入力したファイルを置くディレクトリ - layouts/ : テンプレート内にテンプレートを埋め込むためのもの - pages/ : メインとなるディレクトリ。アクセスできる各ページはここに置く - res/ : データ変換を行わない画像ファイルやC
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (1) 01-01 Internet Explorer 7 beta2のCSS実装 (MYCOMジャーナル)
米Microsoftから2006年5月、Internet Explorer 7(IE7)beta2がリリースされた。IE7は2001年にInternet Explorer 6(IE6)がリリースされて以来、5年ぶりのアップデートとなる。このメジャーアップデートでは、CSSの標準規格への準拠やバグの修正、未対応だった機能への対応などが期待されている。 IE7 beta2では、CSS2.0のセレクタや「fixed」による固定位置表示、すべての要素に対する「:hover」の指定などに対応しつつ、XML宣言の記述によって発生していた問題が修正されるなど、要望の大きかった部分への対応・修正が行われている。 しかし、フロート(回り込み)関連や、プロパティを組み合わせたときに発生する細かなバグに関しては修正されていない部分も残っており、正式版リリースまでにどのぐらい修正されるかが注目される。 一方で、
Webベースですぐにデザインを反映できるCSSエディタ:phpspot開発日誌
Web-based CSS Editor Tamkey It is a very strong web tool for weblog owner. "Tamkey CSS Editor" can modify your current stylesheet and easily change it what you want. Styles will be updated with a single click and you can verify it at the same time. You can also find the CMS/BLOG special selector with "Red Mark". The current selector will be in a red box while you press the "Red Mark" button. Tamke
Ajaxでタブインタフェースを実現するためのライブラリ:phpspot開発日誌
havocStudios: Ajax tabs CSS Tabs seem to be all the rage with the kids these days. I love the idea of them. It seems that the most popular method of creating tabs using CSS is the Sliding Doors method. They seem to look the coolest and are very easy to implement. However, they're so... static. Ajax Tabsを使えば次のようなCSSベースでデザインされたタブインタフェースの部品が簡単に作れます。 Ajaxを使ってタブが更新されるため、各タブ内のページ(HTML)は独立したファイルにすることが可能で
Elevate | a blog by Eight Media | <strike>Lightbox</strike>, Leightbox!
POSTED BY sdehaan, February 21st, 2006 <strike>Lightbox</strike>, Leightbox! Jump to comments • Post to Lightbox, Leightbox!" title="del.icio.us">del.icio.us • Lightbox, Leightbox!" title="digg">digg • Lightbox, Leightbox!" title="redd.it">redd.it We are looking for Python Developer Python Developer Senior Downloads Leightbox Right now we're listening to John Mayer - Your Body Is a Wonderland
24 ways: "Z's not dead baby, Z's not dead"
"Z's not dead baby, Z's not dead" by Andy Clarke While Mr. Moll and Mr. Budd have pipped me to the post with their predictions for 2006, I’m sure they won’t mind if I sneak in another. The use of positioning together with z-index will be one of next year’s hot techniques Both has been a little out of favour recently. For many, positioned layouts made way for the flexibility of floats. Developers
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/code_highlighter.html
CSSプルダウンメニュー１ 〜CSSテクニック〜
Newt Edge