ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
Chrome 43から各種Permissionの状態を問い合わせるPermissions APIが提供されます - Qiita
Webブラウザが提供するAPIの中には、事前にユーザが許可しなければ結果を得られないAPIがいくつかあります。GeolocationやNotificationなどがそうなのですが、ユーザから権限を取得するための方法や、権限を得たのかどうか問い合わせるための仕組みが、今まではAPIごとに異なるやり方になっていました。これを改善するために、Permissions APIがChrome 43から提供されます。そのアナウンスがHTML5Rockの更新情報として流れていましたので、さっそく日本語訳してみました。そのようなAPIを利用されている方々は、ぜひ下記の内容を読んで、今後の実装作業の参考にしてください。 原文: http://updates.html5rocks.com/2015/04/permissions-api-for-the-web Permissions API for the We
Chrome 43からcutおよびcopyコマンドが使えます - Qiita
Chrome 43から、選択されたテキストをクリップボードにコピーしたり切り取ったりする機能が利用可能になります。Chrome拡張機能からは前から使うことができていましたが、Chrome 43からは普通のWebページからも利用することが可能です。HTML5Rockの更新情報にてアナウンスされていましたので、早速日本語訳してみました。ぜひご活用ください。 原文: http://updates.html5rocks.com/2015/04/cut-and-copy-commands Cut and Copy Commands IE10やそれ以上のバージョンは、Document.execCommand()メソッド（ https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
YouTubeがFlashを排除し、HTML5の最後の障害を取り除いた - 週刊アスキー
公式な発表だ：Flashは失速し、HTML5の勢いは止まらない。 サービス開始から10年、YouTubeは1月27日、Adobe Flashをデフォルト・プレイヤーの座から引きずり下ろした。それに代わって、同サイトは延々と出てくるネコの動画や、テイラー・スウィフトの「歌ってみた」、映画の予告編などを再生するのにHTML5をデフォルトに設定すると発表した。 数年前にはその動きは考えられなかったことだろう。2010年、アドビはオンライン動画の約75％がFlashを使用していることを誇っていた。しかし、昨年の時点でHTML5が80％以上のシェアとなり、その人気は強固になったようだ。 YouTubeにとってこの変更は自然なことと言えそうだ。5年前、アドビがトップの座を誇っていた頃、同サイトはHTML5をオプションとして提供し始め、今回の変更の基礎を築いた。実際のところ、ほとんどのユーザーにはおそら
HTML5日本語訳
This Version: https://www.w3.org/TR/2018/SPSD-html5-20180327/ Latest Published Version: http://www.w3.org/TR/html5/ Latest Version of HTML: http://www.w3.org/TR/html/ Latest Editor's Draft of HTML: http://www.w3.org/html/wg/drafts/html/master/ Previous Version: http://www.w3.org/TR/2014/REC-html5-20141028/ Previous Recommendation: http://www.w3.org/TR/1999/REC-html401-19991224/ Editors: WHATWG: Ia
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
HTML5Rocks の日本語記事まとめ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Apple Shows Love for HTML5 with iOS 8
We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items we missed in the next couple of weeks and months, but for now we wante
HTML5: Network Information API | Envato Tuts+
Introduction One of the most discussed concepts in the world of the web design is responsive web design. Thousands of articles have been written on responsive web design and I therefore won't discuss it in this article. However, responsive web design has an important limitation, responsive web design is for the most part based on the size of the browser's viewport. While this approach works well f
WebComponentsでデバイスピクセル比を表示するカスタム要素を作った - コンピュータクワガタ
Chrome 36でWeb ComponentsのHTML Importsが使えるようになり、Web Componentsのすべての要素が普通に使えるようになりました。そこで、Web Componentsのすべての要素（HTML Imports、Template、Shadow DOM、Cuntom Elements）を使ってデバイスピクセル比を表示するサンプルを作ってみました。 まず、コンポーネントの方です。 <template> <style> p { font-size: 3em; } </style> <div> <p>デバイスピクセル比: <span id="devicePixelRatio"></span></p> </div> </template> <script> var ScreenInfoProto = Object.create(HTMLElement.prototy
HTML Imports: ウェブのための #include - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Conference 2015 講演資料まとめ #html5j
モバイル時代のWebパフォーマンス
HTML Standard
https://demo.agektmr.com/dialog/
GitHub - abarth/marquee: An implementation of <marquee> using web components
