HTML5でスマホをコントローラにするゲームを作ってみた | CSS-EBLOG
HTML5でスマホをコントローラにするゲームを作ってみた カテゴリ：HTML5 2011年10月27日 09:00 Canvasゲームをカスタマイズ ゲーム自体は以前作ったものをそのまま使いました。 今回作ったスマホコントローラ版 http://edo-m18.me:9000/ 以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。 これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`) ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。 Node.jsを使って実装 今回、WebSocket部分はNode.jsを使って実装しました。 最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんｗ やはりサーバサイドとクライアント
フリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」
TOP > WebDesign > フリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」 HTML5とCSS3、随分昔からWEB業界ではよく聞く単語ではありますが、HTML5やCSS3の実案件というのは対応ブラウザの問題から意外と少なく、本腰を入れて勉強する機会も創らないとなかなかないのが現状だと思います。今日紹介するのはフリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」。 Minimalism 案件ではあまり使えないかも知れませんが、知識を仕入れるには出来上がったのを触るのが手っ取り早い方法だと思います。全部で15のテンプレートが公開されていますが、その中からいくつピックアップして紹介したいと思います。 詳しくは以下 Simple Style その
HTML5で誤用されがちな各要素の正しい使い方 | コリス
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
HTML5 + WAI-ARIA: 入門篇
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
canvasを使って地下鉄の路線図のようなグラフィックを描けるjQueryプラグイン・Subway Map Visualization
面白かったのでご紹介。地下鉄路線図 のようなグラフィックを簡単に描ける、と いうユニークなjQueryプラグインのご紹介 です。なかなか珍しいですね・・・地下鉄 の路線図はインフォグラフィックでもよく 使用されていますね。 HTML5のcanvasを使って路線図のようなグラフィックを簡単なマークアップで描けます。駅に当たる場所にはリンクも貼れるので、上手く使えば面白いコンテンツが出来るかも知れないですね。 駅名部分がリンクになっていますよ。画像は使っておらず、HTML5のcanvasで書いていますのでIEには対応していません。 使い方<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jque
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
HTML5での視覚的効果や技術などの実験ラボ的サイト「HAKIM.SE」｜BLACKFLAG
ブラウザやスマートフォン（Android）の進化によって、徐々に日の目を見るようになってきたHTML5。 すでにHTML5をサイトに組み込んで今までにない演出をしているサイトもちらほら見かけますが、 HTML5で可能な視覚的効果やさまざまな技術をさまざまな形で実験し、 ラボ的サイトとして情報を公開している「HAKIM.SE」が今後の参考になりそうだったので紹介してみます。 ≫The HTML5 Experiments of Hakim El Hattab マウス操作やクリックアクションでさまざまなエフェクトが起こるサンプルが 現在12種類用意されています。 さまざまなエフェクト操作パターンが用意されていますが、 いくつか参考に挙げてみたいと思います。 Pool – WebGL ≫Pool – WebGL マウスクリックで立方体や球体を3Dパーツとして出現させます。 3Dを形成するには「We
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
WEBレイアウトの画像をアップしてドラッグ＆ドロップでHTMLに変換できる「RecRec」:phpspot開発日誌
RecRec - Image to HTML WEBレイアウトの画像をアップしてドラッグ＆ドロップでHTMLに変換できる「RecRec」。 サイトのレイアウトの画像をアップロードして、ブロック部を選択するだけでHTMLとCSSを出力できるWEBベースのツールです。 生成されるHTMLはdivベースのデザインになります。 簡単なものならこれで仕上げちゃうこともできそうです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル そのまま使えるWEBレイアウトのPhotoshopテンプレート40 スタイリッシュなWEBレイアウト作成Photoshopチュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集８０
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
HTML5に対応したYouTube動画の新しい埋め込み方法
HTML5に対応したYouTube動画の新しい埋め込み方法 YouTubeでは従来の<embed>タグによる動画の埋め込み方法の他に、<iframe>での埋め込みが利用できることを発表しました。 さて、一般のPC以外からの動画再生はFlashが対応していないため視聴できない、という問題がありましたが、昨今HTML5の登場によってプラグイン無しで再生することができる環境になってきました。 そこで、今回の新しい埋め込み方法では、ユーザーの環境に合わせてFlashプラグインが対応していれば従来の方式で、そうでなければHTML5方式で自動的に埋め込み内容を切り替えてくれるようになっています。 埋め込みコードは以下のような感じで、従来よりもむしろスッキリしてます。 <iframe class="youtube-player" type="text/html" width="640" height="
縦書きを可能にするjavascriptライブラリ「竹取JS」
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
エクセルシートをコピー&ペーストでHTMLテーブルに変換できる「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」
TOP > WebDesign , WebService > エクセルシートをコピー&ペーストでHTMLテーブルに変換できる「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」 HTMLの中でも、特に手打ちの場合、面倒な部類に入る表組み。最近ではテーブルは一切使わないなんて事がありますが、テーブルで組む利便性もあったりします。今日紹介するのは煩わしいテーブル組みをエクセルからのコピー&ペーストで簡単に変換できる「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」を紹介したいと思います。 手順は非常にカンタンで、エクセルから表にしたい部分をコピーして、細かい部分を設定し、変換ボタンを押すだけで簡単に表を出力してくれます。 詳しくは以下 変換されたテーブル 単純に変換するだけではなくて、Thタグの背景色だったり文字色、クラス名を埋め込んだりなど、テーブルに必要な細か
見ておくべきHTML5サイト集:phpspot開発日誌
5 Must See HTML5 Sites 見ておくべき、かどうかは分かりませんが、HTML5の可能性について知ることができるサイト集です。 ビデオ、キャンバス、ドラッグ＆ドロップ、ストレージ等HTML５のデモ集。 サポートブラウザの対応もアイコン付でわかりやすいサイト。 CanvasでWindowsのPaintを実現した凄いサイト HTML５で書かれたサイトのギャラリーサイト。 といった感じでHTML5について学べるサイト集。暇なときに眺めるだけでも予習になりそうですね。 関連エントリ 無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」 最近公開のHTML5関連の参考サイト色々まとめ
ＰＨＰの開発効率を上げる１０個の関数 - PHP,MySQL,Flex,JSな日々＋イラストとか
「追記とか」にコメントの返答や追記をしてますので合わせてどうぞ。 かれこれ３年くらいPHPをやっているので、せっかくなので１０個の便利な関数を並べてみました。 作業効率がかなりアップするので、これからPHPをやってみようかなぁって思う方は知っておくと便利だと思います。 変数、配列の内容をキレイに表示する関数「d」 変数や配列の内容をHTML構文でキレイに表示してくれます。 しかも、var_dumpと書くとタイピングが大変なので「d($hoge)」として簡単に記述。 これだけでも作業効率8倍 function d() { echo '<pre style="background:#fff;color:#333;border:1px solid #ccc;margin:2px;padding:4px;font-family:monospace;font-size:12px">'; foreac
[CSS]HTML 5用のブラウザのスタイルをリセットするスタイルシート
HTML 5用のブラウザのスタイルをリセットするスタイルシートをHTML5 Doctorから紹介します。 <textarea name="code" class="css" cols="60" rows="5"> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で3Dスケッチ(Sketch) : monogocoro ものごころ
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報