レスポンシブイメージのネイティブサポート - HTML5 Rocks
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている仕様であり、HTML5 およびその周辺技術の利用により、Web サイト閲覧者 (以下、ユーザ) のブラウザ内でのデータ格納、クライアントとサーバ間での双方向通信、位置情報の取得など、従来の HTML4 よりも柔軟かつ利便性の高い Web サイトの構築が可能となっています。利便性が向上する一方で、それらの新技術が攻撃者に悪用された際にユーザが受ける影響に関して、十分に検証や周知がされているとは言えず、セキュリティ対策がされないまま普及が進むことが危惧されています。 JPCERT/CCでは、HTML5 を利用した安全な Web アプリケーション開発のための技術書やガイドラインのベースとなる体系的な資料の提供を目的として、懸念されるセキュリティ問題を抽出した上で検討を加え、それらの問題
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
ファイルの変更を監視し、ブラウザを自動でリロード - Qiita
AutoLoader ファイルの変更を監視し、ブラウザを自動でリロードしてくれます。 コーディングの際、CSSやHTMLを変更したあと保存すると かってにブラウザをリロードしてくれます！ ブックマークレット形式なので簡単に使えます。 FileAPIを利用しているため、IEでは動かなかったりします。 使い方 １．まずは下のリングをブックマークバーに登録します。 ２．リロードしたいページを開いた状態で、ブックマークレットをクリックすると小ウィンドウが開きます。そこのグレーのボックスに監視したいファイルをドロップして下さい。 ３．監視ファイルを変更すると、親ウィンドウが自動でリロードされます！ ４．監視を辞めたいときは、小ウィンドウを閉じるかリストをクリックすればOKです！ Bookmarklet AutoLoader ↑ブックマークレット！これをタブにドラックして登録して下さい。
ウェブブラウザの時代は終わるのか 〜スマホアプリとHTML5の未来〜
3. Developers Summit 2013 ⾃自⼰己紹介 n 1997-‐‑‒2003 Palmscape / Xiino の開発 ⁃ Palm OS⽤用ウェブブラウザ • 実質世界初 ⁃ Sony, IBM, NTTドコモ等が採⽤用 n 2004 「Webアプリ統合開発環境の開発」 ⁃ IPA未踏スーパークリエータ 3 Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 4. Developers Summit 2013 ⾃自⼰己紹介 n 2005-‐‑‒2010 サイボウズ・ラボ ⁃ ウェブ関連のR&D業務 ⁃ Japanize / Pathtraq • ウェブブラウザ拡張を使うサービス ⁃ Q4M • メッセージキュー（MySQLプラグイン） • Mixi, NHN,
特定の範囲内にのみスタイルを適用できる scoped 属性
HTML5 で追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly が対応したそうなので、ちょこっと試してみます。 HTML5 で style 要素に追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly Builds が対応したそうなので、ちょこっと試してみます。 Firefox Development Highlights - Windows での H.264 & MP3 サポート、スコープが設定されたスタイルシート など ： Mozilla Developer Street (modest) sco
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
hamashun me : HTML5のstyle要素が持つscoped属性について
HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます（フローコンテンツの中って意味じゃ無いです）。 フローコンテンツには、div要素やsection要素やtable要素などがあります（詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください）。 scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。 <p>example text</p> <!-- 赤くならない --> <section> <style scoped="scoped"> p { color: red; } </style> <h1>example title<
Happy New Year 2013Script Tutorials - Web Development Tutorials
Happy New Year 2013 Today – New Year’s Eve Day. And we would like to congratulate all of our readers to this wonderful event. Thank you for being with us from the beginning, feel free to visit our website and in the New Year where you will find a great variety of new tutorials and articles. Today we have prepared an interesting html5 postcard for Christmas and New Year. This is animated Snowflakes
IE8にも対応させるaudioタグ – creamu
Flashを使わないで、HTML5のaudioタグを使った音声再生をIE8以上に対応させる方法です。 上記のデザインの場合、audioタグのデフォルトのプレーヤーは使わないので、IE以外ではjsのAudioクラスを使って、audioタグを生成します。 IEでは、html5mediaやaudiojs等を使っても、Audioクラスが有効にならないので、Audioクラスを使ったjsで制御ができません。 そのため、IE8以下では、IEの独自拡張であるbgsoundを使います。 headタグ内 <head> <script type="text/javascript" src="/js/jquery-1.8.2.min.js" charset="UTF-8"></script> <!--[if (gt IE 8)|!(IE)]><!--> <script type="text/javascript"
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
HTML5 の File API でドラッグ＆ドロップする | TECHSCORE BLOG | TECHSCORE BLOG
こんちには、鈴木です。 HTML5 には File API というものがあます。 File API を使うとローカル PC からブラウザにドラッグ＆ドロップされたファイルを扱うことができます。 ということで、今回は File API によるドラッグ＆ドロップ処理をご紹介します。 まずは以下の HTML から始めましょう！ <!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ＆ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { // TODO ここにドラッグ＆ドロップに必要な処理を記述します. }); </script> </head> <body> <
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
Garlic.js
Garlic.js allows you to automatically persist your forms' text field values locally, until the form is submitted. This way, your users don't lose any precious data if they accidentally close their tab or browser. It strives to have a javascript agnostic interface for UI/UX developers that might want to use it. Just add some data-persist="garlic" in your form tags, and you're good to go!
HTML5のCanvas図形をクリッカブルにするjQueryプラグイン ClickableCanvas - ウィザード・コード | WIZARD-CODE
ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン２を公開しています。詳しくはこちらのデモページへ！ 10/11/18 Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vibrating Particles | CSSDeck
HTML5でモバイル3Dゲームの開発は可能?!
1216彩票-官网平台
Cool Canvas Particles Text Effect | CSSDeck