郵便番号フィールドにinput[type="number"]を使ってはいけない
スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを 数字キーボードにしたいという要望があったので input[type="number"] や input[type="tel"] を使えば良いと聞いていた俺は それぞれ郵便番号と電話番号のフィールドの type を text から変更したのだけど input[type="number"] には罠があったので共有します。 input[type="number"] というよりは iOS の Safari にある罠です。 iOS の Safari は input[type="number"] のフィールドで入力値がゼロ始まりの数値の場合、頭のゼロを自動で除去するこの仕様…あのおせっかいな Excel を思い出す仕様だぜ…ｷﾞﾘｯ… 例えば皇居の郵便番号 100-0001 は分割された郵便番号フォームの後ろの部分が以下のよ
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた 白石 俊平（HTML5 Experts.jp編集長） Webの現状をどう見る？ 白石: 今日は取材お受けいただきありがとうございます。簡単に自己紹介からお願いします。 芦村: W3C/Keioで働いている芦村です。Webの標準化を仕事にしていまして、アクセシビリティやコンピューターを使いやすくすることに興味を持って取り組んでいます。 白石: W3Cの方に直接お話を伺う機会なんてそうはないので楽しみにしてきました。芦村さんから見て、今のWebの現状はいかがですか？ 芦村: HTML5のムーブメントを経て、アプリケーションやシステム構築のための共通プラットフォームになってきました。 WebDINO Japan（元Mozilla Japan）の浅井智也さんが作った「Web曼荼羅」という図ですが、凄まじい数の仕様が、様
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込
HTML5のapplication cacheがつかえない件 - （ひ）メモ
ちょっと思い違いをしていたのでメモっておきます。 HTML5にはオフラインでも参照できるapplication cacheという機構があります。 HTML5 Rocks - A Beginner's Guide to Using the Application Cache 6.6 Offline Web applications ― HTML Standard 「ローカルキャッシュなんで速いし！サーバーの負荷も減るし！！」と思ってちょっと試してみたんですが、これ、動的なページが基本のWebサービスには役に立ちません。 application cacheは、HTMLに <!DOCTYPE html> <html manifest="/cache.manifest"> <head> ...という風にキャッシュの指示ファイル cache.manifest を指定して、そこでキャッシュするとかしな
Web Componentsについて気になること、泉水さんに全部聞いてきました！
Web Componentsについて気になること、泉水さんに全部聞いてきました！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの泉水翔吾さんです。 ▲株式会社サイバーエージェント 泉水翔吾さん 泉水さんのセッションは「The State of Web Components」（ルームA 16:20-17:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベント
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
JavaScript製FlashPlayer「swf2js」って？ ある日、ある会社(Apple)の偉い人が言いました。 「僕たちFlashサポートしないよ。」 そして、世はスマホ時代へ突入。 本当にFlashがサポートされないまま突入。。。 困る！！ っということでJavaScript製FlashPlayerを作ってみました。 完成品 swf2js/swf2js サンプル提供 GAMEDESIGNさんのサイトからご提供していただきました。 ありがとうございます！ GAMEDESIGN 対応バージョン FlashLite 1.x, 2.x, 3.x, 4.x ActionScript 1.0, 2.0, 3.0 「swf2js」の使い方 ベーシックな使い方 応用的な使い方 ベーシックな使い方 <html> <head> <script type="text/javascript" src=
HTML5 <details> in GitHub
example.md Using <details> in GitHub Suppose you're opening an issue and there's a lot noisey logs that may be useful. Rather than wrecking readability, wrap it in a <details> tag! <details> <summary>Summary Goes Here</summary> ...this is hidden, collapsable content... </details> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details A collapsible section with markdown Click to expand!
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
The document lists many technologies related to HTML5, CSS3, ECMAScript, and web standards. It includes elements, syntax, parsers, APIs, multimedia, forms, storage, networking, graphics, web workers, web sockets, and more. The technologies are being developed by groups like the W3C, WHATWG, IETF, and Khronos to advance the capabilities of web applications.
Good-Bye Flash ~ CacooはHTML5で生まれ変わります | Cacooブログ
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは、Cacooプロジェクトマネージャの平山です。今回は、Cacoo開発チームが現在注力していること、近い将来Cacooにもたらされる大きな変化について皆様に報告したいと思います。 2009年にCacooが生まれてから約7年間、僕たちはCacooの編集画面にFlashという技術を使ってきました。 FlashはWeb上で高度な表現を、環境に左右されることが少なく実現できる技術として、CacooのようなリッチなUIを備えたアプリケーションやエンターテイメントに長い間利用されてきました。しかし昨今ではFlashの抱える脆弱性によるセキュリティ面での懸念が指摘されることも多く、Flashが利用できない、あるいは利用しづらい環境も見られるようになりました。一方でWebの標準的な
Working on HTML5.1
Author(s) and publish date By: Léonie Watson Published: 6 April 2016 Skip to 22 comments HTML5 was released in 2014 as the result of a concerted effort by the W3C HTML Working Group. The intention was then to begin publishing regular incremental updates to the HTML standard, but a few things meant that didn't happen as planned. Now the Web Platform Working Group (WP WG) is working towards an HTML5
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
Phaser - A fast, fun and free open source HTML5 game framework
Open Source HTML5 Game Framework For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Phaser Editor Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects and more. It's
What Web Can Do Todayで今のウェブブラウザのできる事がわかるっぽいよ - Qiita
本気でなんでも出来そうなHTML5ですが、逆にしがないマークアップエンジニアである我々（我々と言わせてくれ！）が何かしようと思い立ってもMDNとW3Cのスペックドキュメントの海で溺れる事になるわけです。 Hacker Newsで話題になっていたサービス。 6つのカテゴリでHTML5のAPIを分類。さらにアクセスしているデバイスでその機能が使えるかと使い方、スペックまで教えてくれます。 昔みたいにハックでブラウザ判別とかしなくていいなんて、いい世界になったもんだ…… アプリっぽい機能 ローカル通知 - ノティフィケーションAPI プッシュ通知 - プッシュAPI オフラインモード - サービスワーカー ホーム画面インストール - Webマニフェスト フォアグラウンド検知 - ページビジビリティAPI Service Workerが実用的になってきたことで、最近はやってる感じの通知&オフライン
テーブルレイアウトを使おう！ - Qiita
こんにちは、この記事はHTML5 Advent Calendarの2日目になります。 タイトルは釣りです！ ここでは、HTMLメールの話をしたいと思います。 なぜ、テーブルレイアウトか？ 最近、TechFeedというエンジニア向けのキュレーションサービスを作りまして（宣伝）、そこで記事の配信にHTMLメールを使っています。HTMLメールのレンダリングは、ブラウザのHTML5の対応状況に比べて非常に遅れており、テーブルレイアウトがまだまだ生き残ってる状況です。ここでは、それらのHTMLメールへの鬱憤をつらつらと書いていきたいと思います。 TechFeedのメール HTMLメールのリッチ化 Webサービスには、モバイルアプリのようなプッシュ通知(※) はないので、Webサービスにとってメールは数少ないリエンゲージメントの手段です。ここで少しでもコンバージョンを上げるために、最近では多くのWeb
Adobe、「Flash Professional」の名称を変更 「Animate」に
アドビシステムズは12月1日、Flash制作ソフト「Adobe Flash Professional CC」の名称を「Adobe Animate CC」に変更すると発表した。来年初頭に予定しているアップデートから適用する。 約20年にわたってWebアニメーション制作ツールの標準として利用されてきたが、既にHTML5 CanvasやWebGLのネイティブサポートも果たしている上、SVGなどさまざまな形式への出力にも対応している。同ソフトで作成される3分の1以上がHTML5を使用するなど環境が変化しており、Flashに限らずさまざまなアニメーションを制作するためのツールであることを示すため、名称変更に踏み切る。 HTML5対応の改善を続ける一方、Flash（SWF）やAIR、放送品質のビデオなどのフォーマットへの出力もサポートを続けるとしている。 関連記事 ChromeブラウザでのFlashア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Easy Fullscreen HTML5 Background Video
Konva.js - JavaScript 2d canvas library
Slant - 13 Best boilerplates for modern webapp front-end development as of 2024
What Web Can Do Today
