HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | DevelopersIO
HTML5でinputタグのタイブが追加されましたが、現行のiPhone、Androidでどのくらい使えるのか調べてみました。 OSとブラウザに関しては以下の機種で調べています。 iPhone 5(iOS6)のSafari Galaxy S3(Android 4.04)のGoogle Chrome バージョン18 目次 テキスト入力 検索(search) 数値(number) 電話番号(tel) URL(url) メールアドレス(email) 日付・時間指定 時間(time) 日付(date) 日時(datetime) 日時(datetime-local) 週(week) 月(month) その他 範囲から指定(range) 色選択(color) テキスト入力 まずはテキスト入力系の属性を調べてみます。 見た目が変わったり、フォーカスインした際の入力モードが変わります。 検索(search
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward outbox_alt Generative AI arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia
HTML5/JavaScriptによるゲーム開発に使えるフレームワーク·Gamvas MOONGIFT
GamvasはHTML5/JavaScriptを使ったゲームフレームワークです。物理エンジンを内包しています。 HTML5/JavaScriptが発展するのにつれてWeb標準で動作するゲームの現実味が増しています。そんな時に必ず必要になるのがゲームエンジンと思われます。今回はHTML5用のゲームエンジン、Gamvasを紹介します。 デモです。上からオブジェクトが落下してきます。 オブジェクトは作用しあって動きます。 こちらは雨が湖畔に落ちていくデモです。 煙のデモ。ランダムに流れていきます。 こちらはクリックするとその部分で爆発が起きるデモ。 空間に三角形のオブジェクトが浮かんでいます。左右の矢印キーで視点が変えられます。 移動はスムーズです。 Gamvasはオブジェクトごとのステータスサポート、アニメーション処理、Box2Dベースの物理エンジンをサポートしています。カメラシステムとして視
クリーン且つクオリティの高いデザインで完成度の高いフリーのHTML5製WordPressテーマ・TheProton - かちびと.net
なかなか素敵なテーマだったので ご紹介。サイトのオプションや、 美しいレイアウトと完成度の高い デザインながら無料で配布されて いるWordPressテーマ・TheProton です。高機能でもあるので作りを 参考にしたいですね。 僕はよくテーマを探していますが、これはそのテーマの構成を参考にしたいからです。お仕事でそのまま使う事はありませんが、配布されたテーマから学べる技術はかなり多く、他のブログでも記事にされていないTipsも得られたりします。いろいろなテーマを触ることはスキルアップにも繋がるかなと思います。 今日ご紹介するテーマもとても高性能ですので開発者さんも参考にされてはいかがでしょう。 とっても綺麗です。美しいデザインだけでなく、ドロップダウンメニュー対応、管理画面内でテーマカラーや、スライド、Twitterやロゴなども変更できます。 特徴は・・・ありすぎるくらいです。ちょっと
実際遊べる&解法もついたHTML5ルービックキューブ·html5rubik MOONGIFT
html5rubikはHTML5を使って描かれた遊べるルービックキューブです。 昔懐かしいおもちゃのルービックキューブ。高速で解き明かす人、コンピュータに解かせるなどまだまだ人気のあるおもちゃですが、HTML5を使ってWeb上で遊べるようにしたのがhtml5rubikです。 HTML5で作られています。 マウスで動かしてごちゃ混ぜにしてみました。 ボタン一つで解き明かしてしまいます。 ルービックキューブの向きは自由に変えられます。 デモ動画です。ボタン一つで解き明かしているところに注目。 HTML5とCSS3を駆使することで3Dで表示できるようになっています。自由に回転させたり、面を動かして遊べます。一人はもちろん、友達同士で遊んでも面白いかもしれません。 html5rubikはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません
HTML5でプログレスバー付きファイルアップロードを実現する例:phpspot開発日誌
Html5 File Upload with Progress On Matlus HTML5でプログレスバー付きファイルアップロードを実現する例 これまでの仕組みとは違う、HTML5のProgress Eventsを使って実装しています。 ブラウザのAPIで取れるようになるのでこれまでのハックっぽい実装法ではない方法で実装できます こういう機能が当たり前に使えたら楽だなと思いつつ、覚えることがどんどん出てきて大変だなぁという感じもしますね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
あなたは何点？Webデザイナーのためのクイズサイト12
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
Webとネイティブのいいとこどり。HTML5をラッピングしたAndroidアプリの参考に·html5webview MOONGIFT
html5webviewはHTML5を積極的に取り入れたAndroidアプリを作るサンプルです。 スマートフォンはHTML5を積極的に使っていくのに最適なデバイスとなっています。HTML5を積極活用すればネイティブアプリ並のWebアプリケーションも実現できます。そんなHTML5型Androidアプリを作ってみるなら参考にしたいのがhtml5webviewです。 デフォルトでは有効になっていないAndroidのHTML5機能について、html5webviewでは有効にしながら実際に使ってみるデモアプリも提供しています。 デモアプリをインストールしてみます。 デモは動画（videoタグ）音楽（audioタグ）、位置情報、ストレージ、縦書きとなっています。 audioタグのデモ。ボリューム調整、再生、停止ができます。 videoのデモ。Canvasタグを使ってキャプチャを撮れます。 下に表示され
HTML5でゲーム開発をはじめたい人は注目·HTML5 Game Dev MOONGIFT
HTML5 Game DevはHTML5でゲームを開発し、そのノウハウを蓄積するプロジェクト。 HTML5 Game DevはHTML5/JavaScript製のオープンソース・ソフトウェア。iOS/Androidにはじまり、モバイル向けのゲーム開発が熱い。とは言え、Web開発で培ってきたナレッジがそのままゲームに活かせる訳ではない。画面遷移やオブジェクトの管理、レンダリングなどが全く異なっている。 ブラウザのレース もしゲーム開発をしたいと思うならば、これまでの知識を一旦リセットして改めて学び直すくらいの意識が必要だ。もちろんそれは容易なことではないだろう。だが仲間と一緒ならばできるかも知れない。そのためのプロジェクトがHTML5 Game Devだ。 HTML5 Game DevはHTML5を駆使してゲーム開発を行うプロジェクトだ。その中でノウハウを蓄積し、整理していくことを目的として
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
HTML5ベースの動画プレイヤー１１:phpspot開発日誌
11 Efficient HTML5 Video Players | blueblots.com HTML5ベースの動画プレイヤーが１１種類まとまったエントリのご紹介です。 UIがそれぞれ個性を持っているので好みに合わせて選ぶことができそう Flashを使うことなく、既存のWEB技術でデザインを調整できるのはいいですね。 関連エントリ HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 これは見ておくべきHTML5のCanvasを使ったデモ集 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新技術を学べるHTML5 Conference 2012の発表資料
HTML5 Security Cheatsheet
今話題のWebSocketを使ったサービスの実装方法
Web Hosting: Fast, Secure & Reliable | InMotion Hosting
Demos of open web technologies | MDN
Daftar 20 Situs Judi Slot Online24jam Terpercaya 2022 -
HTML5＋CSS3ベースのテンプレート集１２:phpspot開発日誌
HTML5マークアップの心得と作法
