[B! HTML5] igrepのブックマーク

郵便番号フィールドに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 は分割された郵便番号フォームの後ろの部分が以下のよ

igrep 2018/08/28

iOS
html5

リンク

普通のHTMLの書き方

保守しやすく、規模に依存しないHTML文書のために一般 DOCTYPEで始める置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする制御文字や不可視文字は数値文字参照を使うコメントではその内容の前後へ空白文字を置く終了タグを省略しない空要素の書き方を混ぜないタグや属性値の前後へ空白文字を置かない大文字・小文字を混ぜない引用符を混ぜない属性を2文字以上の空白文字で区切らない真偽値を取る属性の値は省略する名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜないデフォルトの暗黙のARIAセマンティックスを尊重する文書要素 lang属性を追加する lang属性の値はできる限り短くするできる限り

igrep 2018/07/24

html
html5

リンク

Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた

Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた白石俊平︵HTML5 Experts.jp編集長︶ Webの現状をどう見る？白石: 今日は取材お受けいただきありがとうございます。簡単に自己紹介からお願いします。芦村: W3C/Keioで働いている芦村です。Webの標準化を仕事にしていまして、アクセシビリティやコンピューターを使いやすくすることに興味を持って取り組んでいます。白石: W3Cの方に直接お話を伺う機会なんてそうはないので楽しみにしてきました。芦村さんから見て、今のWebの現状はいかがですか？芦村: HTML5のムーブメントを経て、アプリケーションやシステム構築のための共通プラットフォームになってきました。 WebDINO Japan︵元Mozilla Japan︶の浅井智也さんが作った﹁Web曼荼羅﹂という図ですが、凄まじい数の仕様が、様

igrep 2017/12/22

html5
w3c

リンク

Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた

Webアプリのアクセシビリティを追求せよ！﹁インクルーシブ﹂なマークアップを議論しながら学んでみた白石俊平︵HTML5 Experts.jp編集長︶こんにちは、編集長の白石です。この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。お二人のセッション﹁多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍﹁インクルーシブ HTML + CSS & JavaScript﹂より﹂に関するスライド資料は、こちらで公開されています。﹁インクルーシブ﹂に込

igrep 2017/11/02

inclusive, いい言葉だ。

リンク

HTML5のapplication cacheがつかえない件 - （ひ）メモ

ちょっと思い違いをしていたのでメモっておきます。 HTML5にはオフラインでも参照できるapplication cacheという機構があります。 HTML5 Rocks - A Beginner'sGuide 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 を指定して、そこでキャッシュするとかしな

igrep 2017/10/17

いやー、役立たずでセキュアじゃないとは聞いてたけどここまで役立たずとはねー。

html5

リンク

Web Componentsについて気になること、泉水さんに全部聞いてきました！

Web Componentsについて気になること、泉水さんに全部聞いてきました！白石俊平︵HTML5 Experts.jp編集長︶こんにちは、編集長の白石です。この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの泉水翔吾さんです。 ▲株式会社サイバーエージェント泉水翔吾さん泉水さんのセッションは﹁The State of Web Components﹂︵ルームA 16:20-17:00︶です。︵現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベント

igrep 2017/09/21

詳しい。

リンク

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=

igrep 2017/02/06

すごい。

リンク

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!

igrep 2016/12/28

markdownはHTMLタグが使えるのでdetailsタグを使ってGitHubのコメントとかもよくしようという話。すばらしい。

リンク

Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)

The document lists many techno logies 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 techno logies are being developed by groups like the W3C, WHATWG, IETF, and Khronos to advance the capabilities of web applications.

igrep 2016/09/04

リンク

Easy Fullscreen HTML5 Background Video

Bideo.js A JS library that makes it super easy to add fullscreen background videos. (Hold on! The video might take a while to load.)

igrep 2016/06/30

背景動画

リンク

Good-Bye Flash ~ CacooはHTML5で生まれ変わります | Cacooブログ

仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。こんにちは、Cacooプロジェクトマネージャの平山です。今回は、Cacoo開発チームが現在注力していること、近い将来Cacooにもたらされる大きな変化について皆様に報告したいと思います。 2009年にCacooが生まれてから約7年間、僕たちはCacooの編集画面にFlashという技術を使ってきました。 FlashはWeb上で高度な表現を、環境に左右されることが少なく実現できる技術として、CacooのようなリッチなUIを備えたアプリケーションやエンターテイメントに長い間利用されてきました。しかし昨今ではFlashの抱える脆弱性によるセキュリティ面での懸念が指摘されることも多く、Flashが利用できない、あるいは利用しづらい環境も見られるようになりました。一方でWebの標準的な

igrep 2016/06/22

やっとか。それだけ捨てるには大きすぎるんだろうけど…

リンク

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

igrep 2016/04/14

HTML5.1どないなるんやろ

リンク

JSだけでVRできる！『WebVR』ことはじめ

今年はVR元年と呼ばれています。実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。ですが、今年はいよいよそれが本格的になりそうな状況になってきました。そこで今回は、﹁今からWebVRに備えよう！﹂ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift︵詳細は後述︶に代表される、いくつかのヘッドマウントディスプレイ︵以下、HMD︶が比較的安価に家庭で利用できるようになったことです。今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。またこれらが注目される理由として、現在

igrep 2016/03/24

リンク

Konva.js - JavaScript 2d canvas library

Konva.js - HTML5 2d canvas js library for desktop and mobile applications npm install konva

igrep 2016/02/04

“2d html5 canvas framework for desktop and mobile applications.”

リンク

Phaser - A fast, fun and free open source HTML5 game framework

WebGL & Canvas Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for lightning fast rendering across Desktop and Mobile. Preloader We've made the loading of assets as simple as one line of code. Images, Sounds, Sprite Sheets, Tilemaps, JSON data, XML - all parsed and handled automatically, ready for use in game and

igrep 2016/01/26

リンク

Slant - 13 Best boilerplates for modern webapp front-end development as of 2024

The Slant team built an AI & it’s awesomeFind the best product instantly

igrep 2015/12/29

リンク

What Web Can Do Today

What Web Can Do Today? Can I rely on the Web Platform features to build my app? An overview of the device integration HTML5 APIs

igrep 2015/12/08

リンク

What Web Can Do Todayで今のウェブブラウザのできる事がわかるっぽいよ - Qiita

本気でなんでも出来そうなHTML5ですが、逆にしがないマークアップエンジニアである我々︵我々と言わせてくれ！︶が何かしようと思い立ってもMDNとW3Cのスペックドキュメントの海で溺れる事になるわけです。 Hacker Newsで話題になっていたサービス。6つのカテゴリでHTML5のAPIを分類。さらにアクセスしているデバイスでその機能が使えるかと使い方、スペックまで教えてくれます。昔みたいにハックでブラウザ判別とかしなくていいなんて、いい世界になったもんだ…… アプリっぽい機能ローカル通知 - ノティフィケーションAPI プッシュ通知 - プッシュAPI オフラインモード - サービスワーカーホーム画面インストール - Webマニフェストフォアグラウンド検知 - ページビジビリティAPI Service Workerが実用的になってきたことで、最近はやってる感じの通知&オフライン

igrep 2015/12/08

Chromeにしか実装されなさそうなのもあるから注意な。

リンク

テーブルレイアウトを使おう！ - Qiita

こんにちは、この記事はHTML5 Advent Calendarの2日目になります。タイトルは釣りです！　ここでは、HTMLメールの話をしたいと思います。なぜ、テーブルレイアウトか？最近、TechFeedというエンジニア向けのキュレーションサービスを作りまして︵宣伝︶、そこで記事の配信にHTMLメールを使っています。HTMLメールのレンダリングは、ブラウザのHTML5の対応状況に比べて非常に遅れており、テーブルレイアウトがまだまだ生き残ってる状況です。ここでは、それらのHTMLメールへの鬱憤をつらつらと書いていきたいと思います。 TechFeedのメール HTMLメールのリッチ化 Webサービスには、モバイルアプリのようなプッシュ通知(※) はないので、Webサービスにとってメールは数少ないリエンゲージメントの手段です。ここで少しでもコンバージョンを上げるために、最近では多くのWeb

igrep 2015/12/03

“MozillaのThunderbirdやAppleのApple Mailは、実装も凄く進んでいるので、MicrosoftやGoogleもブラウザばかりだけでなく、こちらも是非改善していってもらえれば”

リンク

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ア

igrep 2015/12/01

僕の頭のなかではお店の方のAnimateとはアクセントの違う「Animate」が響いたので大丈夫。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (122)

HTML5に関するigrepのブックマーク (110)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス