普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
結局 PWA は来るの？来ないの？
昨日 Twitter でこんな記事を発見しました。 PWA が来るって言っているエンジニアは今すぐ辞めろ 「instagram の PWA が最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、オワコンであった。」 もしかしてこれのことかな？ Instagram PWA is sooooooo impressive. I probably won't be able to distinguish it with its native app. InstagramのPWAが、デキが良すぎて感動してる。ネイティブアプリと見分けられる自信ない。 pic.twitter.com/DS8TfceBZ6 — Eiji Kitamura / えーじ (@agektmr) 2018年1月26日 確かに、この言い方は若干煽り気味のと
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Foundation CheatSheet
Primary #2ba6cb Secondary #e9e9e9 Alert #f04124 Success #43ac6a Body Font #222222 Header Font #222222 @media only screen { } @media only screen and (max-width: 40em) { } @media only screen and (min-width: 40.063em) { } @media only screen and (min-width: 90.063em) { } @media only screen and (min-width: 90.063em) and (max-width: 120em) { } @media only screen and (min-width: 40.063em) and (max-width:
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識
意外と知られていないことですが、Chromecast対応アプリは、iPhoneアプリやAndroidアプリ同様に誰でも開発することができ、今多くの開発者から注目されていて、今後もその数が増えることが予想されます。 Web＆モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイスの国内発売前からスマートフォンアプリ（iOS版およびAndroid版）の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載では、その時に得た技術を基にChromecastアプリのシステム構成、開発環境、開発準備、メディアストリーミングアプリの開発方法について注意点を含めて解説していきます。Chromecast対応アプリを開発する参考にしてください。 初回は、Chromecastの概要とサンプルアプリを動作確認できるまでの開発手順を解説します。 Chromecastアプリの
Refills - Patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus
Home | Onsen UI
Onsen UI, HTML5 UI framework for modern mobile application.The Answer to PhoneGap UI Development Onsen UI is an HTML5 UI Framework for Building Mobile App Front End Download Version 0.7.0 Onsen UI is a front-end development tool that radically improves PhoneGap/Cordova apps. Differing from previous frameworks, it is highly flexible and gives hybrid apps a native look and feel on all platforms. And
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
HTML5 Conference 2013 レンダリングパフォーマンスお話してきた！
HTML5 Conference 2013 で、僭越ながら1セッション担当させていただきました！やっっったら、奥行きの深い部屋で、後ろのほうの方にはスライド見えづらかったかもしれません。ごめんなさい。部屋の奥行きのわりに、スクリーン小さいという不遇がありました orz ということで、スライドのURL共有とか、イベントの感想とかです。 Rendering Performance 動画 Webフロントエンドのパフォーマンスは、今やページの初期表示を早くすることだけではありません。昨今のHTML/CSS/JavaScriptを駆使したWebコンテンツを、スムーズに動かすには、ブラウザのレンダリング(描画)処理について知る必要があります。このセッションでは、レンダリング上のよくあるボトルネックの見つけ方と対処を中心に、最適化Tipsをお届けします。 ちと粗いのですが、今回の参考URLリストです。
書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門
本コーナーは、技術評論社発行の書籍『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の詳細や購入は技術評論社のサイトをご覧ください。 スマートフォン向けアプリケーション開発では，iOS，Androidの両プラットフォームへの対応が求められることが多い一方，それぞれに対応することは，Objective-C，Javaによる異なる開発スキルが必要です。そこで現在注目されているのが，HTML5によるハイブリッドアプリです。本書では，フレームワークApache Cordovaによるアプリ開発から，ストレージの使い分け，タッチ・ジェスチャなどの活用，マルチプラットフォーム特有の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
StageXL for Dart
HTML5ハイブリッドアプリ開発のベストプラクティス
Chart.js
「こけむさズ」に３度通って 東郊雑記＠琳堂 on scriptogr.am
SSSSLIDE
GitHub - creatorish/WebSQL.js: Web SQL Databaseを使いやすくするライブラリ
もっと使おうPhoneGap／Cordova 2.0.0 記事一覧 | gihyo.jp
