GitHub - substack/html-inline: inline javascript, stylesheets, and images from an html page
<html> <head> <style>body { background-color: cyan; } </style> </head> <body> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFcwAABXMBNzKusgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAhPSURBVHic3Zt/cFRXFcc/5y1JIP6oRG1lWmutJU0WtLRaZEaH2l+O/2A7U9JWHQWqBWuLimInQHYvd7MJYAewLVhg2lK106JpZ/zRP5yK2Ok/oB3aqrggwZZqpVAFNE4o+bF7/OO9JJtl39
Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ
はじまり物語はその昔、WURFL（Wireless Universal Resource File、モバイル端末を検出するためのデータベース） が幅を利かせており、またモバイル専用 Web サイトが流行りだったときから始まります。この時代、開発者は「本物」の Web サイトのシンプルで低レベルななバージョンを作り、UA 判別をしてモバイルユーザーに提供していました。 みなさんも知っているように、ビューポートの大きさを始め異なる特徴を持つデバイスの急激な増加によって、より良いモバイルユーザー（もしくは非モバイルユーザー）の判別が急務とされました。レスポンシブ Web デザイン（「Responsive Web Design」「レスポンシブデザイン」とも）は、新しいブラウザに搭載された機能と CSS のテクニックを組み合わせデバイスに応じた表示を提供し、どのような環境でも理想的な見た目にするとい
レスポンシブイメージのネイティブサポート - 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
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
Srcset and sizes — ericportis.com
Translations: 日本語 (Japanese) by 鈴木丈 (Takeru Suzuki) 中文 (Chinese) by 陈三 (Sam Chen) Português by Tárcio Zemel Part 1: What’s Wrong With Media Queries? So let’s say you’re making a web page sometime between February 23rd, 1993 and May 25th, 2010. Images are easy! Simply: Look at your fixed-width layout Measure exactly how many pixels on each and every user’s screen you will invariably need to fill wi
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Jonathan T. Neal | Understand the Favicon
When Alec Rust asked the HTML5 Boilerplate project to switch to a HiDPI favicon, I realized how little I knew about favorite icons, touch icons, and tile icons. When I decided to dive in a little deeper, things got interesting. Since they were first introduced by Internet Explorer in 1999, almost nothing about favicons has changed. They have almost-always been ICO files, either nested in the root
画像とキャンバスをオリジン間で利用できるようにする - HTML: ハイパーテキストマークアップ言語 | MDN
HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 <img> 要素で定義されている他のオリジンから読み込まれた画像を、 <canvas> の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。 crossorigin 属性の使い方については CORS 設定属性をご覧ください。 キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。 CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは汚染 (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。
オンラインカジノの主な特徴と魅力
オンラインカジノは、リアルにあるカジノの世界を、ネット上でエンジョイする事が出来る、ギャンブルゲームです。 現実の上でのカジノと変わらず、インターネット上と言いましても、リアルマネーをかけることが可能となっています。 したがって、ギャンブルを満喫する事が行なえるので、とてもスリリングな世界観を満喫できます。 そして、オンラインカジノについては、賞金額もかなり高いのが持ち味だと言えます。 オーソドックスなギャンブルとして市民権を得ている、パチンコやスロットのケースでは、稼ぐことができたとしても、1日あたり数十万円ぐらいになります。 しかしながら、オンラインカジノについては、1日あたり数千万の高額当選も想定でき、具体的に1億円を的中させたプレイヤーもいます。 ひと晩で億万長者になれることが望めるギャンブルとなっています。 そして、オンラインカジノについては、好きな時間に好きな場所で満喫する事が
Prefetch (先読み) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
先読み (Prefetching) は、近い将来ユーザーが移動する可能性のあるページに対して、バックグラウンドで文書やサブリソースを投機的に取得するということです。 これによって、ユーザーが先読みされたページを選んだ場合、そのページの読み込む時間を大幅に短縮することができます。 先読みは、例えば、 "Next" ボタンでリンクされたページやそのサブリソース、ユーザーが当てたリンクのポップアップ、検索結果などを取得するために使用する可能性があります。 リソースの先読みは、それが将来のナビゲーションで必要になる可能性の高さに基づいて行うべきです。ブラウザーは、アドレスバーの現在の URL のようないくつかのリソースについて、これを自動的に推測することができます。 これは <link rel="prefetch"> を使用して行う言ことができます（投機ルール API はナビゲーションのための文書
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
High Performance Images (Preview Edition)
2016年版 フロントエンド開発フォーマット
Exey Panteleev's Geekography